フレームを使わないで 横スクロールが一部だけできるようにする



0   名前: あみ : 2006/09/12(火) 06:48  ID:pUVaSaEo
にはどうしたらよいのでしょうか??

テーブルの右は横スクロール無しで、左は横スクロールが出来るというようにしたいのですが

どうも上手くいきません

どなたかお教えください

1   名前: カヅサツ ◆ThCi95HEzw : 2006/09/12(火) 06:48  [URL]  ID:f0UXxXRM
width, height に auto以外を指定して、さらに overflow に auto を指定すれば、多くのブラウザは指定した縦横サイズからあふれた内容をスクロールでアクセスするように表示します。

ただし、テーブルセルは特殊なので、この方法を td,th要素に適用しても上手くいかないと思います。下記サンプルでは div要素に適用してみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title>あみのサイト</title>
<style type="text/css">
div#menu{
	color: black;
	background-color: #FFC;
	width: 40%;
	float: left;
}
div#diary{
	color: black;
	background-color: #FCC;
	width: 59%;
	height: 30em;
	overflow: auto;
	float: right;
}
</style>
</head>
<body>
<h1>あみのサイト</h1>
<div id="menu">
	<h2>メニュー</h2>
	<ul>
		<li><a href="">リンク</a></li>
		<li><a href="">掲示板</a></li>
	</ul>
</div>
<div id="diary">
	<h2>日記</h2>
	<h3>2006年9月1日</h3><p>朝起きたら夜だった</p>
	<h3>2006年9月2日</h3><p>朝起きたら夜だった</p>
	<h3>2006年9月3日</h3><p>朝起きたら夜だった</p>
	<h3>2006年9月4日</h3><p>朝起きたら夜だった</p>
	<h3>2006年9月5日</h3><p>朝起きたら夜だった</p>
	<h3>2006年9月6日</h3><p>朝起きたら夜だった</p>
	<h3>2006年9月7日</h3><p>朝起きたら夜だった</p>
	<h3>2006年9月8日</h3><p>朝起きたら夜だった</p>
	<h3>2006年9月9日</h3><p>朝起きたら夜だった</p>
	<h3>2006年9月10日</h3><p>朝起きたら夜だった</p>
</div>
</body>
</html>


> どうも上手くいきません

URLがわかれば、誰かがより具体的な提案をできるかもしれません。

2   名前: なし : 2006/09/12(火) 06:48  ID:j2HKObeZ
ご要望のものを、疑似フレームといいます。名前が付くくらい普及していますので検索エンジンで調べてみてください。

いろいろテクニックはありますが、全てのブラウザで問題なくとはなかなかいかなかったり、検索エンジンに悪い評価をもらったり一長一短あるようです。フレームではだめな理由で選ぶテクニックが変わってくると思います。

テクニックも詳しく説明しているサイトもあります。ブラウザもどんどん新しくなっています。今年や、去年くらいの紹介記事をお薦めします。

3   名前: あみ : 2006/09/12(火) 06:48  ID:pUVaSaEo
カヅサツさん
ありがとうございました
テーブルは特殊なんですね。
参考になりました
この方法を使わせてもらおうと思います。

ナナシさん
ありがとうございました。
疑似フレーム関連頑張っていろいろ見てみます。

4   名前: カヅサツ ◆ThCi95HEzw : 2006/09/12(火) 06:48  [URL]  ID:f0UXxXRM
というか、まさに >>1 が、俗に「疑似フレーム」と呼ばれるテクニックの一種ですが…

5   名前:  : 2006/09/12(火) 06:48  ID:HBXxod9e
カヅサツさん
気に障ったんだ、ごめんねぇ

私はカヅサツさんの疑似フレーム横にスクロールバーが2つでるのが気に障ったので
他の方法もいっぱいあるよって紹介しました。

6   名前: あみ : 2006/09/12(火) 06:48  ID:pUVaSaEo
??
2さん=5さんですか?

カヅサツさんが貼ってくださったサンプルを元になんとなく作りたかったものはかたちになりました。
まだサーバーもかりていないのでURLをはったりはできないんですけど

ただ、ぜいたくを言うようですが、スクロールボックス(?)の中の文字が上によってしまいます
これはなぜなのでしょう?
なおせないのでしょうか??

たびたびごめんなさい

7   名前:  : 2006/09/12(火) 06:48  ID:/MqiT7fH
2=5です

ぜいたくではありません。
それはCSSによる疑似フレームですので、少しCSSを勉強してください。
CSSはスタイルシートとか、カスケイドスタイルシートともいいます。

質問を続けるにしても、場所が違います。

8   名前: カヅサツ ◆ThCi95HEzw : 2006/09/12(火) 06:48  [URL]  ID:O5hEMlpW
>>6
> スクロールボックス(?)の中の文字が上によってしまいますこれはなぜなのでしょう?

何故も何も、それが普通です。

> なおせないのでしょうか??

どのように?
(ここは総合質問板なので、このまま質問を続けるのはかまわないと思います)

9   名前: カヅサツ ◆ThCi95HEzw : 2006/09/12(火) 06:48  [URL]  ID:O5hEMlpW
>>5
http://www.tagindex.com/cgi-lib/bbs/patio.cgi?mode=view2&f=146&no=127-

10   名前: 匿名 : 2006/09/12(火) 06:48  ID:pUVaSaEo
>梨さん
板違いゴメンなさい
微妙な場合は総合掲示板で、と書かれていたのでそのまま質問してしまいました。
別スレッドで聞くべきでしたね
>カヅサツさん
それが普通なんですか
勉強不足のようなので勉強してきます
とりあえずは<br>タグでごまかして行こうと思います

11   名前:  : 2006/09/12(火) 06:48  ID:L/r5Do4m
あみさんが、与えられたものをコピペするだけの人でその意味すら考えようと
しない。答えられても、きちっと読まない人だってだけです。

>>8 では
カヅサツさんも、どのように直したいかきいておられますよね。
どのようにしたいかいえない人には、アドバイスしようがありません。
<br>でごまかしていけばいいです。

総合質問版なので、可らしいです。変なこといってごめんなさい。


一覧へ戻る