在職中にCSSでよく質問された内容についてまとめた、某社退職時の置き土産。 (Elementary CSS tips in Japanese.)

1. レイアウト崩れで困ったときに…
CSS 基礎＆Tips

2. CSSの基礎

3. ボックスモデル
Box Model

4. ボックスモデル
margin
border
padding
content

5. ボックスモデル
ブラウザの開発ツールで確認できます
Firefox (Firebug)
Google Chrome

6. ブロックレベル要素
インライン要素
Block-Level Elements & Inline Elements

7. ブロックレベル要素
見出し 段落 表など、
・
・
文書を構成する基本となる要素で、
独立したブロック
（かたまり）
として扱われる。
下にレイアウトされてゆく。
ブロックレベル要素
ブロックレベル要素

8. ブロックレベル要素
他のブロックレベル要素やインライン要素を
配置することができる。
ブロックレベル要素
ブロックレベル要素
インライン要素
インライン要素

9. ブロックレベル要素
代表的なタグ
<div>、
<p>、
<h1>∼<h6>、
<form>、
<table>、
<ul>、
<ol>、
<dl>、
<blockquote>、
<address>

10. インライン要素
ブロックレベル要素内に特定の意味を持たせる要素で、
行内の一部として扱われる。
横にレイアウトされてゆく。
インライン要素
インライン要素
インライン要素
インライン要素
インライン要素

11. インライン要素
インライン要素を配置することはできるが、
ブロックレベル要素を配置することはできない。
インライン要素
インライン要素
インライン要素
ブロックレベル要素

12. インライン要素
代表的なタグ
<a>、
<img>、
<span>、
<input>、
<select>、
<label>、
<strong>、
<em>

13. HTML5での注意点
HTML5では、
ブロックレベル要素とインライン要素の分類はなくなる。
インライン要素にブロックレベル要素を配置することもできる。
インライン要素
インライン要素
インライン要素
ブロックレベル要素

14. 基本レイアウト

15. floatを使った段組み
Column Layout

16. 2カラム
通常

17. 2カラム
これもアリ

18. 3カラム

19. float使用時の注意点
必ずwidthを指定する
floatした後は必ず解除する
これは約束。

20. float使用時の注意点
floatを解除し忘れることによる
レイアウト崩れが非常に多いです

21. floatの解除の仕方
Clear Float

22. clearプロパティ
後続の要素に clear: both; を指定

23. clearfix
親要素に class="clearfix" を指定

24. clearfix
（2004年）
.clearfix:after {
content: " ";
.
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac ¥*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}

25. clearfix
（201
1年）
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
*zoom: 1;
}

26. 位置指定
Positioning

27. 絶対配置
position: absolute;
基準点からのオフセッ
トで位置を指定する

28. 絶対配置
position: absolute;
基準点
top
left
position: absolute;
top: 20px;
left: 20px;
基準点からのオフセッ
トで位置を指定する

29. 絶対配置
position: absolute;
position: absolute;
bottom: 20px;
right: 20px;
right
bottom
基準点
基準点は、
上下左右どこでもＯＫ

30. 絶対配置の注意点
基準点を指定しない場合は、
ウィンドウの左上が基準点になる。
基準点

31. 基準点の設定
基準にしたい親要素に
position: relative; を指定
基準点
position: ralative;
position: absolute;
top: 10px;
left: 10px;

32. CSS Tips

33. 初心者のために
CSS Tips for Beginners

34. vertical-align
画像の下に謎のスキマができる場合

35. vertical-align
画像に vertical-align: bottom;

36. display
要素の表示形式を指定する
display: none;
要素を非表示にし、
レイアウトに影響を与えない
display: block;
要素をブロックボックスとして生成する
display: inline;
要素をインラインボックスとして生成する
display: inline-block;
幅や高さなどを指定できるインライン要素を生成する

37. display
例えば、
画像を横並びにしたい場合
li {
display: inline;
}

38. display
例えば、
画像を横並びにしたい場合
li {
display: inline;
}

39. display
display: inline;
display: inline-block;
だけでは、
スキマができる
0.34em程度のスキマ

40. display
代替案①
float を使う
<li>
<li>
<li>
li {
float: left;
width: 150px;
}
floatの解除を忘れずに

41. display
代替案②
HTMLソースの改行を削除
<ul>
<li> ・ </li><li> ・ </li><li> ・ </li>
・・
・・
・・
</ul>
<li>
<li>
<li>