「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

フレームを使わないでメニューを表示したい。

パソコンお助け情報

Webページ作成

困った顔アイコン フレームを使わないでメニューを表示したい。

解決した顔アイコン Webページで画面を分割してメニューや目次を表示させるために、frameset要素などが使われます。便利ですがいろいろ欠点があることと、XHTML1.1 では frameset DTD がなくなり使用できなくなりなすので、代わりの方法が欲しくなります。

フレームを使わないと分割されたそれぞれの部分が独立してスクロールすることが出来なくなりますが、企業の多くのサイトで使われているように、例えば左側にメニューなどを表示して、中央にコンテンツの本体、右に広告などと分割して表示させることが出来ます。

Q&Aのサイトで説明されていたことがありますけれど、ページ全体を3列1行のtable要素で囲む方法は判りやすいのですが、表以外のレイアウトの目的でtable要素を使用するべきでないとされています。

3つの部分をそれぞれdiv要素の内容として(<div>〜</div>)、左側のdiv要素をスタイルシートで width:xxxx で幅を決めて、float:left と左へ寄せます。

次に右側のdiv要素をスタイルシートで width:xxxx で幅を決めて、float:rightと右へ寄せます。

残った中央のdiv要素が中央に入ります。この部分は幅をきめてありませんのでウィンドウの幅に順応します。


「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

(2007/5/1 UP) 作成&連絡先 NET・陽だまり