いまさら聞けないCSSレイアウト入門

8,085 views

Published on

第3回HTML5ビギナーズでの講演資料です。

Published in: Technology
0 Comments
46 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,085
On SlideShare
0
From Embeds
0
Number of Embeds
959
Actions
Shares
0
Downloads
76
Comments
0
Likes
46
Embeds 0
No embeds

No notes for slide

いまさら聞けないCSSレイアウト入門

  1. 1. いまさら聞けないCSSレイアウト⼊入⾨門 2013/10/23 第3回  HTML5ビギナーズ Toru  Yoshikawa  (@yoshikawa_̲t)
  2. 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/
  3. 3. Agenda 1. まずは基本!ボックスモデル 1. 2. ボックスの種類 3. 垂直マージンの相殺 4. 2. ボックスモデルとは? ボックスの中央寄せ いよいよCSSレイアウトにチャレンジ! 1. 2. positionを使ったレイアウト 3. 3. floatを使ったレイアウト その他のTips まとめ
  4. 4. まずは基本! ボックスモデル
  5. 5. ボックスモデルとは? 要素が持つ領域の基本概念 要素自体の大きさやマージン、ボーダー、パディングから構成される
  6. 6. ボックスモデルとは? マージン 要素の外側の余白 ボーダー 要素の外枠 パディング 要素の内側の余白 要素自体の大きさ(width) パディングより中のコンテンツの幅
  7. 7. ボックスモデルとは? 例) div要素の赤の点線の幅は何ピクセル? div { width: 300px; height: 300px; padding: 5px; border: solid 1px black; margin: 10px; }
  8. 8. ボックスの種類 ブロック・レベル要素 (デフォルトで)親要素に合わせた幅が確保される要素 p, div, table, ul, h1~h6など インライン・レベル要素 テキストなど幅が自動的に決まる要素 a, label, small, spanなど インライン・ブロック要素 高さと幅を指定可能なインライン・レベル要素 改行されない button, img, input, selectなど CSSのdisplayプロパティで変更することができる
  9. 9. inlineとinline-blockの違い inlineだと改行される li { display: inline; } li { display: inline-block; }
  10. 10. ボックスの種類によって指定できるプロパティ display: inline block inline-block width/height: 不可 可 可 margin-left/ margin-right: 可 可 可 margin-top/ margin-bottom: 不可 可 可 padding: 可(※) 可 可 border: 可(※) 可 可 ※左右のプロパティは、最初の文字と最後の文字の外側に対応する
  11. 11. 垂直マージンの相殺 垂直方向のマージンは大きい方が適 用される(加算ではない) 水平方向のマージンは加算 そのためmargin-topとmarginbottomは原則として、どちらか片方 のみ利用するのが望ましい
  12. 12. 垂直マージンの相殺 例) div1とdiv2の 間のスペースは何 px? #div1 { margin-bottom: 15px; } #div2 { margin-top: 20px; }
  13. 13. 垂直マージンの相殺(その2) 垂直マージンの相殺は、親要素と子 要素でも発生する 親要素に、borderもpaddingも設 定されていない場合、親要素の marginと相殺される
  14. 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. 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. 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. 17. ボックスの中央寄せ インライン・レベル要素(テキスト)の中央寄 せは、"text-align: center"で ボックスは、左右のマージンをautoにするこ とで中央寄せすることができる .box { width: 20%; margin: 0 auto; }
  18. 18. いよいよCSSレイアウトに チャレンジ!
  19. 19. 【注意】もちろんテーブルレイアウトは禁止です テーブルをレイアウトの目的で使わない tableは表組みを表す要素 見た目がマークアップに依存する メンテナンスが大変 rowspan, colspan...
  20. 20. CSSレイアウト floatを使ったレイアウト positionを使ったレイアウト その他のTips
  21. 21. floatを使ったレイアウト
  22. 22. floatを使ったレイアウト 名前の通り、要素を浮かせて左右に配置 するプロパティ ボックスをfloat: leftで左寄せ、 float: rightで右寄せにできる 1行で表示しきれない場合は、改行される テキストが回り込むのが特徴
  23. 23. テキストの回り込み 新聞記事のように画像を左右に表示 .box { flaot: left; }
  24. 24. ボックスを横に並べる floatで指定されたボックスは、指定方向にスタックしていく ボックスを並べて全体のレイアウト構造を組み立てる 写真などを並べる用途にも(自動的に改行されるので並べやすい) .box { flaot: left; width: 25%; } .box { flaot: left; width: 50%; } box box box box box box box box
  25. 25. 回り込みの解除 ある要素を必ず回り込ませずに改行 させたい .box { flaot: width: } #box4 { clear: width: } left; 25%; both; 25%; box box box box box
  26. 26. floatを使ってレイアウトを考える ヘッダー コンテンツ フッター サイドバー
  27. 27. floatを使ってレイアウトを考える .header { width: 100%; } .content { /* floatで段組 */ float: left; width: 75%; } .sidebar { /* floatで段組 */ float: left; width: 25%; } .footer { /* 回り込みを解除 */ width: 100%; clear: both; }
  28. 28. 親要素の高さに注意 floatは、親要素から浮いているということから親要 素の高さの計算から除外される floatだけで構成されるボックスは、高さがなくなる 親要素 親要素 float float 期待しているイメージ 実際の表示
  29. 29. 内容に合わせて親要素の高さを確保する overflow: hidden もっとも簡単 親要素にoverflowでhiddenを指定する スクロールすべき要素には適用できない clearfix clear: bothを適用した空要素を最後に挿入す るテクニック
  30. 30. 内容に合わせて親要素の高さを確保する どちらかでOK! 親要素にoverflow: hidden 子要素の最後にclearfix 親要素 float float clear: both
  31. 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
  32. 32. positionを使ったレイアウト
  33. 33. positionを使ったレイアウト position: relative 要素を元の位置からずらすときに利用する ボックスの大きさはそのまま position: absolute 要素の座標を明示的に指定する position: fixed 画面上に固定表示させたい場合に利用する
  34. 34. position: relative 要素の位置をちょっとずらしたいときに 利用できるが基本的にはマージンで良い ほとんどの使い方はposition: absoluteと組み合わせて使う方法 absoluteの基点となる要素を relativeで指定する
  35. 35. position: absoluteを使ったレイアウト 要素の座標を明示的に指定する positionでは最もよくabsoluteを利用する top、left、bottom、rightで特定の要素からの縦軸・横軸の相対位置を指定す る 固定座標になるため、位置が動かないものに利用すると良い floatと同じく、親要素の高さには影響しない 全体のレイアウトというよりは、要素を重ね合わせる目的や個別のパーツに使うこ とが多い 使いすぎるとメンテナンスが面倒になるので必要最低限に留める
  36. 36. position: absoluteの使い方 1.基点となる親要素にposition: relativeを指定する 2.位置を指定する要素にposition: absoluteを指定す る 3.top, left, bottom, rightで相対値を指定する 4.複数のabsolute要素があれば、z-indexで重ね合わ せ順を指定する 例)z-index: 999
  37. 37. position: absoluteの使い方 image box <div class="box"> <img class="image"> box </div> .box { position: relative; } .image { position: absolute; top: 2px; right: 2px; }
  38. 38. position: fixed 画面に対して要素を固定できる スクロールしてもついてくる Android 2.2以降、iOS5以降で対応 レガシーなブラウザを考えると積極的には利用で きない どうしても使う場合は、JavaScriptと position: absoluteで代替しているものが多い
  39. 39. position: fixed サンプル ヘッダーかフッターのツールバーを固定する スクロールしても常にツールバーが表示される ツールバーを配置するスペースをpaddingで確保する .toolbar { position: fixed; bottom: 0; } .content { padding-bottom: 150px; }
  40. 40. その他のTips
  41. 41. table-cell 要素をテーブルのように扱う displayプロパティで設定可能 table(table)、table-row(tr)、table-cell(td)が ある 使いすぎるとtableと同じようなデメリットがあるので必要最小 限に table-cellのメリット ボックスの高さを えることができる vertical-align: middleが利用できる
  42. 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; }
  43. 43. ネガティブマージン marginにマイナス値を指定すること topとleftは、要素を左上に動かす rightとbottomは、隣接する要素を引っ張る margin-top:-15px box margin-left:-15px margin-right:-10px box box box2 box3 margin-bottom:-10px
  44. 44. position: absoluteで縦横中央寄せ top、leftなどは%指定が可能 中央に表示した後にネガティブマージンでボックスの半分の幅だけ 寄せる .box { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; }
  45. 45. まとめ
  46. 46. まとめ CSSレイアウトの使い分け 全体のレイアウトはfloatを利用する 細かな固定レイアウトはposition: absoluteを利用 する 場合によっては、table-cellもあり CSSレイアウトを覚えれば、CSSだけでレイアウトが柔軟に 変更できるので是非使いこなせるようになりましょう! さらに新しく追加されたレイアウトのテクニックも知って おきましょう!
  47. 47. Thank  you!! (  @yoshikawa_̲t  )

×