いまさら聞けないCSSレイアウト入門
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 6,259 views

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

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

Statistics

Views

Total Views
6,259
Views on SlideShare
5,476
Embed Views
783

Actions

Likes
41
Downloads
56
Comments
0

6 Embeds 783

http://sadah.hatenablog.com 640
http://dev.gcserver.jp 70
https://twitter.com 60
http://localhost 11
https://www.chatwork.com 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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