Transcript

• 1. Inline Layout 高津戸壮  @Takazudo
• 2. 自己紹介 高津戸壮  (たかつど  たけし) フロントエンドエンジニア 株式会社ピクセルグリッド @Takazudo
• 3. 今日話すこと font‒size line‒height vertical‒align inline‒block
• 4. <div><img></div> <div><img></div>
• 5. img { vertical-align: top; }
• 6. このスペースって何？
• 7. うまく位置揃わない
• 8. 今日のメニュー 1.  画像下部の余白の謎 2.  アイコン画像の縦位置調整 3.  アイコンを飛び出させる 4.  チェックボックスやラジオボタンの配置 5.  リストのポッチ 6.  カラムレイアウト
• 9. 1. 画像下部の 余白の謎
• 10. <p><span>The quick brown...</span></p> p { font-size: 16px; line-height: 16px; } span { background: pink; }
• 11. p { font-size: 16px; line-height: 24px; }
• 12. p { font-size: 16px; line-height: 24px; }
• 13. <p>The <b>quick</b> <em>brown</em> <i>fox</i> jumps...</p>
• 14. <p>The <b>quick</b> <em>brown</em> <i>fox</i> jumps...</p> p { font-size: 12px; line-height: 18px; } b { font-size: 20px; line-height: 30px; } em { font-size: 30px; line-height: 40px; } i { font-size: 40px; line-height: 50px; }
• 15. p { font-size: 12px; line-height: 18px; } b { font-size: 20px; line-height: 30px; } em { font-size: 30px; line-height: 40px; } i { font-size: 40px; line-height: 50px; }
• 16. img.A { vertical-align: top; } img.B { vertical-align: bottom; }
• 17. img.C { vertical-align: text-top; } img.D { vertical-align: text-bottom; }
• 18. img.E { vertical-align: baseline; } img.F { vertical-align: middle; }
• 19. img.G { vertical-align: 5px; }
• 20. img.H { vertical-align: central; }
• 21. vertical‒align: top
• 22. vertical‒align: bottom
• 23. vertical‒align: text‒top
• 24. +line‒height: 1 ※leading部分がなくなるから
• 25. vertical‒align: text‒bottom
• 26. vertical‒align: baseline
• 27. vertical‒align: middle
• 28. vertical‒align: 10px
• 29. ちょっとまとめ vertical-alignの値により色々スペースができる
• 30. 2. アイコン画像の 縦位置調整
• 31. <ul> <li><img src="icon.png" width="10" alt=""> xAhy 鈴</li> <li><img src="icon.png" width="20" alt=""> xAhy 鈴</li> <li><img src="icon.png" width="30" alt=""> xAhy 鈴</li> <li><img src="icon.png" width="40" alt=""> xAhy 鈴</li> <li><img src="icon.png" width="50" alt=""> xAhy 鈴</li> </ul>
• 32. vertical‒align: top
• 33. vertical‒align: bottom
• 34. vertical‒align: text‒top
• 35. vertical‒align: text‒bottom
• 36. vertical‒align: baseline
• 37. vertical‒align: 4px
• 38. vertical‒align: ‒4px
• 39. vertical‒align: middle
• 40. img { vertical-align: middle; }
• 41. 微調整の例
• 42. img { vertical-align: middle; position: relative; top: -0.1em; }
• 43. ちょっとまとめ とりあえずmiddleベースがいいんじゃない？ アイコンのサイズとか決めちゃうと楽
• 44. 3. アイコンを 飛び出させる
• 45. <ul> <li><img>彼は背後に...</li> <li><img>それはあまり...</li> </ul>
• 46. li { padding: 0 0 10px 32px; } img { width: 24px; height: 24px; vertical-align: middle; }
• 47. li { padding: 0 0 10px 32px; text-indent: -32px; /* 1行目だけ左に32pxずらす */ } img { width: 24px; height: 24px; vertical-align: middle; }
• 48. li { padding: 0 0 10px 32px; text-indent: -32px; } img { width: 24px; height: 24px; vertical-align: middle; margin: 0 8px 0 0; /* 32px確保 */ }
• 49. li { padding: 0 0 10px 32px; text-indent: -32px; } img { width: 24px; height: 24px; vertical-align: middle; margin: -14px 8px -10px 0; /* 32px確保 + 上下の高さ殺し */ }
• 50. margin-top: -14px; margin-bottom: -10px;
• 51. ちょっとまとめ text-indentで戻した部分に アイコンを置くと便利そう
• 52. 4. チェックボックス やラジオボタンの配置
• 53. 大きさ微妙に違う 高さ幅はブラウザによって違う インラインブロックが利用できそう
• 54. <ul> <li><label><span><input type="radio"></span>彼は...</label></li> <li><label><span><input type="checkbox"></span>それは...</label></li> </ul>
• 55. ul { list-style-type: none; border: 3px solid #000; } li { padding: 0 0 10px 25px; }
• 56. ul { list-style-type: none; border: 3px solid #000; } li { padding: 0 0 10px 25px; text-indent: -25px; }
• 57. span { display: inline-block; width: 20px; margin: -17px 5px -13px 0; vertical-align: middle; background: red; } input { display: block; margin: 0 auto; }
• 58. インラインブロック display: inline-block 中にブロックレベルの要素を入れられる 高さと幅指定しなければ自身のサイズは中身次第 外からは<img>のようなインライン 置換要素のようにレイアウトされる インライン要素と違って 矩形領域を維持し行をまたがない なかなか柔軟に使えるので色々活躍
• 59. 5. リストのポッチ
• 60. <ul> <li>彼は背後に...</li> <li>それはあまり...</li> </ul> li { padding: 0 0 10px 16px; background: url(bullet.png) no-repeat 0 .45em; }
• 61. li { padding: 0 0 10px 16px; } li:before { content: ''; width: 8px; height: 8px; display: inline-block; background: url(bullet.png) no-repeat 0 0; vertical-align: middle; }
• 62. li { padding: 0 0 10px 16px; text-indent: -16px; /* 左へ */ } li:before { content: ''; width: 8px; height: 8px; display: inline-block; background: url(bullet.png) no-repeat 0 0; vertical-align: middle; }
• 63. li { padding: 0 0 10px 16px; text-indent: -16px; } li:before { content: ''; width: 8px; height: 8px; display: inline-block; background: url(bullet.png) no-repeat 0 0; vertical-align: middle; margin: -5px 8px -3px 0; /* マージン調整 */ }
• 64. ちょっとまとめ 擬似要素と組み合わせると<img> 突っ込んだみたいに扱えて便利
• 65. 6. カラムレイアウト
• 66. <div>Hello! Hello! Hello!</div>
• 67. .box { display: inline-block; vertical-align: middle; } <div> Hello! <div class="box">...</div> Hello! </div>
• 68. <div> Hello! <div class="box">...</div> <div class="box">...</div> Hello! </div>
• 69. <div> <div class="box">...</div> <div class="box">...</div> <div class="box">...</div> </div>
• 70. <div class="items"> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> ... </div> .item { float: left; width: 25%; }
• 71. <div class="items"><!-- --><div class="item">...</div><!-- --><div class="item">...</div><!-- --><div class="item">...</div><!-- --><div class="item">...</div><!-- ... --></div> .item { display: inline-block; vertical-align: top; width: 25%; }
• 72. IE7以下.foo { display: inline-block; *display: inline; *zoom: 1; }
• 73. ちょっとまとめ display:tableやfloatを使うよりも 良いケースは色々ある
• 74. まとめ
• 75. ミクロなレイアウト制御から マクロなレイアウト制御まで インラインのレイアウトの 仕組みを把握すればいろいろ捗る display:tableとインラインブロックを 駆使して頑張りたい所存
• 76. CSS再入門  ‒  inline  layout  1
• 77. ありがとう ございました