Recommended
More Related Content
Viewers also liked
Similar to いまさら聞けないCSSレイアウト入門
Similar to いまさら聞けないCSSレイアウト入門 (20)
More from yoshikawa_t
More from yoshikawa_t (20)
いまさら聞けないCSSレイアウト入門
- 1. いまさら聞けないCSSレイアウト⼊入⾨門 2013/10/23 第3回 HTML5ビギナーズ Toru Yoshikawa (@yoshikawa_̲t)
- 2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t html5j／HTML5とか勉強会スタッフ／ビギ ナー部 (副部⻑⾧長) Google Developer Experts (Chrome) HTML5 Experts.jp エキスパートNo.3 Web先端技術味⾒見見部 (顧問)／⽇日本jQuery Mobileユーザー会 (管理理⼈人)／Sublime Text 2 Japan Users Group (管理理⼈人)／allWebク リエイター塾 jQuery Mobile担当講師 Blog: http://d.hatena.ne.jp/pikotea/
- 7. ボックスモデルとは？ 例) div要素の赤の点線の幅は何ピクセル？ div { width: 300px; height: 300px; padding: 5px; border: solid 1px black; margin: 10px; }
- 8. ボックスの種類 ブロック・レベル要素 （デフォルトで）親要素に合わせた幅が確保される要素 p, div, table, ul, h1~h6など インライン・レベル要素 テキストなど幅が自動的に決まる要素 a, label, small, spanなど インライン・ブロック要素 高さと幅を指定可能なインライン・レベル要素 改行されない button, img, input, selectなど CSSのdisplayプロパティで変更することができる
- 9. inlineとinline-blockの違い inlineだと改行される li { display: inline; } li { display: inline-block; }
- 12. 垂直マージンの相殺 例) div1とdiv2の 間のスペースは何 px? #div1 { margin-bottom: 15px; } #div2 { margin-top: 20px; }
- 14. 垂直マージンの相殺（その2） div1 上にある要素 上にある要素 margin-top: 20px margin-top: 20px margin-top: 20px テキスト #div1 { margin-top: 20px; } #div2 { margin-top: 20px; } div2 テキスト #div1 { margin-top: 20px; border: 1px solid blue; } #div2 { margin-top: 20px; }
- 15. ボックスの計算方法を変える（box-sizing） widthは、borderとpaddingを除いた幅になる が、その計算方法を変更することができる とても便利！ width = border + padding + content .box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
- 16. ボックスの計算方法（box-sizing） 例) div要素の赤の点線の幅は何ピクセル？ div { box-sizing: border-box; width: 300px; height: 300px; padding: 5px; border: solid 1px black; margin: 10px; } 答え）300px 画面幅4分割(25%x4)などにする際に便利
- 17. ボックスの中央寄せ インライン・レベル要素（テキスト）の中央寄 せは、"text-align: center"で ボックスは、左右のマージンをautoにするこ とで中央寄せすることができる .box { width: 20%; margin: 0 auto; }
- 21. floatを使ったレイアウト
- 23. テキストの回り込み 新聞記事のように画像を左右に表示 .box { flaot: left; }
- 24. ボックスを横に並べる floatで指定されたボックスは、指定方向にスタックしていく ボックスを並べて全体のレイアウト構造を組み立てる 写真などを並べる用途にも（自動的に改行されるので並べやすい） .box { flaot: left; width: 25%; } .box { flaot: left; width: 50%; } box box box box box box box box
- 25. 回り込みの解除 ある要素を必ず回り込ませずに改行 させたい .box { flaot: width: } #box4 { clear: width: } left; 25%; both; 25%; box box box box box
- 27. floatを使ってレイアウトを考える .header { width: 100%; } .content { /* floatで段組 */ float: left; width: 75%; } .sidebar { /* floatで段組 */ float: left; width: 25%; } .footer { /* 回り込みを解除 */ width: 100%; clear: both; }
- 31. clearfixスニペット /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } by HTML5 Boilerplate
- 33. positionを使ったレイアウト position: relative 要素を元の位置からずらすときに利用する ボックスの大きさはそのまま position: absolute 要素の座標を明示的に指定する position: fixed 画面上に固定表示させたい場合に利用する
- 36. position: absoluteの使い方 1.基点となる親要素にposition: relativeを指定する 2.位置を指定する要素にposition: absoluteを指定す る 3.top, left, bottom, rightで相対値を指定する 4.複数のabsolute要素があれば、z-indexで重ね合わ せ順を指定する 例）z-index: 999
- 37. position: absoluteの使い方 image box <div class="box"> <img class="image"> box </div> .box { position: relative; } .image { position: absolute; top: 2px; right: 2px; }
- 38. position: fixed 画面に対して要素を固定できる スクロールしてもついてくる Android 2.2以降、iOS5以降で対応 レガシーなブラウザを考えると積極的には利用で きない どうしても使う場合は、JavaScriptと position: absoluteで代替しているものが多い
- 39. position: fixed サンプル ヘッダーかフッターのツールバーを固定する スクロールしても常にツールバーが表示される ツールバーを配置するスペースをpaddingで確保する .toolbar { position: fixed; bottom: 0; } .content { padding-bottom: 150px; }
- 40. その他のTips
- 42. display: table-cell サンプル <div class="tbl"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div> .tbl { display: table; width: 100%; } .a, .b, .c { display: table-cell; width: 33%; } .a { height: 150px; vertical-align: middle; }
- 44. position: absoluteで縦横中央寄せ top、leftなどは%指定が可能 中央に表示した後にネガティブマージンでボックスの半分の幅だけ 寄せる .box { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; }
- 45. まとめ