ステップ4ーfloa...|独学でWebデザインの勉強をする人のためのまとめサイトです。


WordPressの準備・導入パターンとレンタルサーバー費用相場・比較表
WordPressの始め方、導入パターン・レンタルサーバーの費用相場、おすすめのレンタルサーバーを紹介

マンダラ塗り絵ダウンロードサイト
マンダラや幾何学模様、花、ボタニカルアートの塗り絵を配布中。





floatで作る段組みレイアウト


  • 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;/*練習のための仮の高さ指定*/
}

mainとsidebarを入れ替えてみる

ここで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>
<!-- メイン終了 --> 

↓↓↓見た目は変わらない

mainとsidebarを入れ替えてみる

どちらを先に記述すればよいか?

例えば、コンテンツ部にキーワードが多い場合は、コンテンツを先に記述という考え方が基本です。

重要なコンテンツほどHTML上では上に記述するという意味です。

サイドバーに、キーワードを含まない広告バナーばかりのサイトでは、html上はできるだけ、下の方にサイドバーの記述したほうがよいです。

「コンテンツの内容次第で優先させる方を先に記述する」ということですね!

 

次回は、3カラムに挑戦してみましょう!




Facebookページに「いいね!」をクリックしていただくと、当サイトの更新情報を受け取ることができるようになります。
ぜひ、「いいね!」していただけると嬉しいです!



Pagetop