- floatで作る段組みレイアウト講座
ステップ4ーfloatで作る段組みレイアウト mainとsidebarを入れ替えてみる
それでは、「main」と「sidebar」の左右を入れ替えてみましょう。
といってもやり方は簡単。floatプロパティの値を変更するだけです。
今度は、「main」を右寄せに「sidebar」を左寄せに指定を変えます。
#main { float: right;/*要素を右寄せにする*/ width: 760px;/*floatしたので幅を指定する*/ background-color: red;/*背景色はレッド*/ height: 500px;/*練習のための仮の高さ指定*/ } #sidebar { float: left;/*要素を左寄せにする*/ width: 320px;/*floatしたので幅を指定する*/ background-color:yellow;/*背景色はイエロー*/ height:500px;/*練習のための仮の高さ指定*/ }
ここでHTMLファイルの記述順を確認してみましょう。
現在のHTMLは以下のように、先に「main」の記述があり、次に「sidebar」の記述があります。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>段組みレイアウトサンプル</title> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <!-- 全体を囲む枠 開始--> <div id="wrapper"> <!-- ヘッダー開始 --> <header id="header"> <p>ヘッダーの内容ヘッダーの内容ヘッダーの内容ヘッダーの内容ヘッダーの内容</p> </header> <!-- ヘッダー終了 --> <!-- メイン開始 --> <div id="main"> <p>メインの内容メインの内容メインの内容メインの内容メインの内容</p> </div> <!-- メイン終了 --> <!-- サイドバー開始 --> <div id="sidebar"> <p>サイドバーの内容サイドバーの内容サイドバーの内容サイドバーの内容</p> </div> <!-- サイドバー終了 --> <!-- フッター開始 --> <footer id="footer"> <p>フッターの内容フッターの内容フッターの内容フッターの内容フッターの内容</p> </footer> <!-- フッター終了 --> </div> <!-- 全体を囲む枠 wrapper終了 --> </body> </html>
この「main」と「sidebar」の記述の順番を変更しても見た目は変わりません。
どちらが左右に配置されるかは、HTMLの記述の順番ではなく、CSSの指定で決まるからです。
実際に「main」と「sidebar」の記述の順番を変更してみても、
<!-- サイドバー開始 --> <div id="sidebar"> <p>サイドバーの内容サイドバーの内容サイドバーの内容サイドバーの内容</p> </div> <!-- サイドバー終了 --> <!-- メイン開始 --> <div id="main"> <p>メインの内容メインの内容メインの内容メインの内容メインの内容</p> </div> <!-- メイン終了 -->
↓↓↓見た目は変わらない
どちらを先に記述すればよいか?
例えば、コンテンツ部にキーワードが多い場合は、コンテンツを先に記述という考え方が基本です。
重要なコンテンツほどHTML上では上に記述するという意味です。
サイドバーに、キーワードを含まない広告バナーばかりのサイトでは、html上はできるだけ、下の方にサイドバーの記述したほうがよいです。
「コンテンツの内容次第で優先させる方を先に記述する」ということですね!
次回は、3カラムに挑戦してみましょう!