MB-Support

パソコン初心者のサポートページ

1.スタイルシート:横2段表示


今回はスタイルシートの float(フロート)を使って、ページを横2段で表示する方法を試してみます。 右の黄色い部分がメニュー用で、白い部分がコンテンツだと想定します。基本となるソースは以下。スタイルシートを適用前ですが、大きな DIV の ID が container 、その中に二つの DIV を作成して片方がコンテンツ(白い部分)で ID を content 、もう一方がメニュー(黄色い部分)で ID を menu としました。


HTMLソース(メモ帳)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スタイルシート適用前</title>
</head>
<body>
<div id="container">
 <div id="content">
  <p>
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
   sample text 1 sample text 1 sample text 1 sample text 1 sample text 1
  </p>
 </div>
 <div id="menu">
  <p>
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
   sample text 2 sample text 2 sample text 2 sample text 2 sample text 2
  </p>
 </div>
</div>
</body>
</html>

サンプル0

サンプルをクリックすると分かりますが、単純にいくつかのsample text 1 が表示された後に、sample text 2 が表示されます。



スタイルシート

<style type="text/css">
<!--
div#container {
 width:100%;
}
div#content {
 width:70%;
 float:right;
}
div#menu {
 width:30%;
 float:left;
}
-->
</style>

サンプル1

基本ソースのヘッダーに上のスタイルシートを挿入した結果がサンプル 1 となります。大きい DIV は横幅 100 % で、その中の二つの DIV の横幅を 30 % と 70 % に指定しています。 ソースが書かれている順番は、上から sample text 1 、sample text 2 となりますが、メニュー 30 % とコンテンツ 70 % が float により左右に移動しています。



スタイルシート

<style type="text/css">
<!--
div#container {
 width:100%;
}
div#content {
 width:70%;
 float:left;
}
div#menu {
 width:30%;
 float:right;
}
-->
</style>

サンプル2

今度は、ソースはそのままに、スタイルシートの float を左右逆にしてみました。 テーブルを使わずに左右にページを割り振る事ができましたが、このやり方にはメリットとデメリットが存在します。 次は、もう少し掘り下げてサンプルを元に検証してみます。




戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項