【html/CSS】スタンダードレイアウト まずはベースから作る
本日は画面設計の基礎についての記事になります。
- やったこと
- 今回作成した画面
- htmlとCSS
- 読み込むCSSファイルの解説
- CSSの中身を解説
- メインとサイドメニューを横に並べる方法
- おまけ：ボックス要素とインライン要素
- 最後に一番大事なこと
- 参考URL
- 参考図書
やったこと
- ヘッダー、メイン、サイドメニュー、フッターに分ける
- ヘッダーとフッターは画面幅いっぱいに伸ばす
- メインとサイドは合わせ960pxにして、中央寄せ
- メインとサイドメニューは横に並べる
今回作成した画面
htmlとCSS
htmlファイル
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link href="htmlcsstest.css" rel="stylesheet" type="text/css"> <link href="csshack.css" rel="stylesheet" type="text/css"> <link href="reset.css" rel="stylesheet" type="text/css"> <title>html/css</title> </head> <body> <header class="header"> <a href="#">ヘッダー</a> <a href="#">ヘッダー</a> <a href="#">ヘッダー</a> </header> <div class="wrapper clearfix"> <div class="main"> <p>メイン</p> <p>メイン</p> <p>メイン</p> <p>メイン</p> <p>メイン</p> <p>メイン</p> <p>メイン</p> <p>メイン</p> </div> <div class="sidemenu"> <p>サイド</p> <p>サイド</p> <p>サイド</p> </div> </div> <footer class="footer"> <a href="#">フッター</a> <a href="#">フッター</a> <a href="#">フッター</a> </footer> </body> </html>
CSSファイル
.header { width: 100%; } .wrapper { width: 960px; margin: 16px auto; } .main { width: 586px; float: left; padding: 8px; } .sidemenu { width: 358px; float: right; padding: 8px; } .footer { width: 100%; } .clearfix::after { content: ''; display: block; clear: both; } *, *::before, *::after { box-sizing: border-box; }
csshackファイル
* {background-color: rgba(255,0,0,.2)} * * {background-color：rgba(0,255,0、.2)} * * * {background-color：rgba(0,0,255、.2)} * * * * {background-color：rgba(255,0,255、.2)} * * * * * {background-color：rgba(0,255,255、.2)} * * * * * * {background-color：rgba(255,255,0、.2)} * * * * * * * {background-color：rgba(255,0,0、.2)} * * * * * * * * {background-color：rgba(0,255,0、.2)} * * * * * * * * * {background-color：rgba(0,0,255、.2)}
resetcssは省略
読み込むCSSファイルの解説
CSSファイルは以下の３つを作成しています。
- reset.css
- csshack.css
- htmlcsstest.css
reset.css
ブラウザごとの異なるデフォルトCSSをリセットするためのCSSです。
以下のサイトのものを使いました。
Eric Meyer’s “Reset CSS” 2.0 | CSS Reset
csshack.css
画面レイアウトがわかりやすくCSS。便利そうなので今回から使い始めました。
CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack | コリス
htmlcsstest.css
CSSのメイン部分。ファイル名にセンスがなくてすみません。
中身については少し解説します。
CSSの中身を解説
メインの画面幅は960px
以下のリンクを参考に今回は960pxと8の倍数を意識して作っていきます。
デザインは8の倍数でできている | 1 pixel｜サイバーエージェント公式クリエイターズブログ
黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ | コリス
フッターとヘッダーの横幅
画面いっぱいに伸ばすために「width: 100%」を指定。100%とは親要素に対して100%という意味。今回で言えば、親はbody要素。
つまりbody要素を「width: 400px」のように設定してしまうと画面いっぱいに伸びないので注意
メインとサイドメニューを横に並べる方法
今回はfloatとclearfixを使って、横に並べています。
横に並べる方法は多くのサイトで解説されているので、ここではポイントだけ。
ポイント
- floatを使うとボックス要素が高さがなくなって、下の要素が回り込んでくる。
- 上記を回避するために親要素にclearfixを設定する。
ちなみにclearfixの設定しないと以下のようにフッターが回り込んできます。
「box-sizing: border-box」にしておく
デフォルトだとpaddingとborderが要素サイズに含めないため、全体サイズを計算するのが大変です。
border-boxを指定することで、要素サイズに含めることになり、色々楽になります。
ちなみにborder-boxを指定しないと以下のようになります。
メインとサイドの横幅を足した合計が、親要素であるwrapperの横幅960pxを超えているため、うまく横並びにできていないわけです。
paddingをwidthに含めない時の横幅計算
mainの横幅・・・586+8+8 = 602
sidemenuの横幅・・・358+8+8 = 374
合計・・・976
中央寄せ
marginの左右をautoにすればOKです。
おまけ：ボックス要素とインライン要素
私がいつも忘れてしまうボックス要素とインライン要素の特徴が以下です。
ボックス要素
- div、p、h1〜h6など
- 左上に重力のある、箱の積み重なり。なので、箱は縦に積み重なっていく。
- 横幅のデフォルトは親要素。なので、横いっぱいに広がることが多い。
- 縦幅のデフォルトは子要素の合計。なので、子要素が無いと高さが無くなって表示されなくなる。
- 高さ（height）幅（width）の設定ができる
インライン要素
- aなど
- 平べったく横に並ぶ。
- 高さ（height）幅（width）の設定ができない。文字列の大きさや長さで決まる。
最後に一番大事なこと
困ったら再起動！困ったら履歴削除！
参考URL
CSSのmarginとは？paddingとは？余白の指定方法まとめ
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
参考図書
HTML5/CSS3モダンコーディング
