200514学習記録：CSSを使ったレイアウト②2カラム、3カラム wrapper とか clearfix とか inline-blockの使い方

TechAcadmy　lesson3 10.webページのレイアウト

◆レイアウト手順まとめ（詳しくは以下の2カラム、3カラムを見る）

１．headerとfooterの間に<div id="wrapper"></div> を作る
２．wrapper の中に、カラムとして横に並べたい div や aside などを作る
３．横に並べてもカラム落ちしないように width を調整する （ % や px で値を決める）
４．カラム用の要素に float プロパティを設定する
５．CSS に clearfix を追加して、wrapper に class="clearfix" をつける
　※cssで#wrapperに「overflow:hidden;」というプロパティと値をあてる方法もある。

◆2カラムレイアウトを作る

[header]
[div#main][aside]
[footer]

という構図のレイアウトを作る

▽【css】mainとasideに「floatプロパティ」をあてる

main{
 float:left;
 }
aside{
 float:right;
}

▽footerが回り込まないようする

〇【html】mainとasideを一つのdivボックスにまとめる
id=wrapperというidを指定することが多い。

<div id="wrapper">
    <div id="main">
        メイン
    </div>
    <aside>
        サイドバー
    </aside>
</div>

〇【html】wrapperのdivに「class="clearfix"」を加える

<div id="wrapper" class="clearfix">

〇【css】「.clearfix::after」セレクタを作る

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

◆３カラムレイアウトを作る

clearfixのところは2カラムと同じ

〇【html】3つのブロックをつくる
asideのタグに「left」「right」のクラス指定をする

<aside class="left">左サイド</aside>
<div id="main">メイン</div>
<aside class="right">右サイド</aside>

〇【css】mainとasideのサイズを指定する

div#main{
 width:34%;
 height:100px;
 }
aside{
 width:33%;
 height:100px;
 }

〇【css】それぞれに「floatプロパティ」を指定する

div#main{
 float:left;
 }
aside.left{
 float:left;
 }
aside.right{
 float:right;
 }

◆ナビゲーションメニューを横並びにする

▽【html】リストでナビゲーションのボタンを並べる

<nav>
<ul>
 <li>ホーム</li>
 <li>会社概要</li>
 <li>サービス</li>
 <li>お問い合わせ</li>
</ul>
</nav>

▽【CSS】displayプロパティにinline-blockという値を入れる

nav ul li{
 display:inline-block;
 }