マインド改善用資料

1. 文字とアイコンが
なぜずれるのか？

2. よくある文字+アイコン
• 画像（<img>）とリンク（<a>）
<a href=“#”><img src=“./images/icon.gif”>文字</a>
• インプット（<input>）とラベル（<label>）
<label><input type=“radio”>文字</label>
<input type=“radio” id=“link”><label for=“link”>文字</label>
• 背景画像（<li>のbackground等）
<li class=“icon”>文字</li>
.icon {
background-image:url(“./images/icon.png”) no-repeat right bottom;
}

3. 原因

4. そろえないからです！

5. よくある「あれ、 わない」
• 「marginで調整しようとしたんだけど
効かない」
• 「vertical-align:middleにしたんだけど
真ん中に来ない」

6. まずは…
block lebel要素とinline要素の違いを
正しく理解しましょう

7. block lebel 要素
h1 h6,p,div,dl,ol,ul,pre,table…
• ブロック。前後に改行が入る。
• 高さ、幅の指定が可能
• margin / padding

8. inline要素
• 文章の一部。前後に改行が入らない。
a,span,img,input,label,select,sup,li…

9. inline要素
• 文章の一部。前後に改行が入らない。
1. 文章の一部 = 行
a,span,img,input,label,select,sup,li…

10. inline要素
• 文章の一部。前後に改行が入らない。
1. 文章の一部 = 行
2. 行間に影響を受ける。
a,span,img,input,label,select,sup,li…

11. inline要素
• 文章の一部。前後に改行が入らない。
1. 文章の一部 = 行
2. 行間に影響を受ける。
3. それ自体は高さを持たない（中身に依存）
a,span,img,input,label,select,sup,li…

12. inline要素
• 文章の一部。前後に改行が入らない。
1. 文章の一部 = 行
2. 行間に影響を受ける。
3. それ自体は高さを持たない（中身に依存）
4. 上下のmarginは効かない（img等の例外はあります）
a,span,img,input,label,select,sup,li…

13. 「margin効かない」
inline要素はmarginでは調整できない
（上下は。）

14. たぶんこうすればOK
inline要素の場合、
• vertical-align:middle,top,bottomで調整する
• 画像に余白を付けて調整
• 行間を調整する
• CSSで、block lebel要素に変えてしまう
影響範囲をよく確認
margin 効かない=inlineだから

15. vertical-alignが効かない
vertical-align
block lebel要素には効きません。
divやh１∼６、pタグには効かない
仕様です

16. たぶんこうすればOK-2
• marginで調整する
• display:table-cell、inline等、有効なdisplay要
素に変える
• 当然、影響範囲をよく考えましょう

17. WEBアプリケーションの中で
きちんと統一することが重要

18. ここからが問題
• vertical-align:middle
middleは何に対してのmiddle ?

19. タイポグラフィの基本
textの各エレメントについて
ここで

20. The quick brown fox
jumps over
the lazy dog
base line

21. The quick brown fox
jumps over
the lazy dog
base line
descender line
mean line
ascender line
capsline
小文字の「x」の高さ = 1ex
大文字の「M」の高さ = 1em

22. abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
同じフォントサイズでも、フォントによってサイズが違う
同じフォントでも、文字によってサイズが違う

23. html/cssの「vertical-aling:middle」 は
x-heightの中央

24. The quick brown fox
jumps over
the lazy dog

25. The quick brown fox
jumps over
the lazy dog
フォントサイズはascender lineとdescender lineの間

26. 日本語も欧文も
ベースラインで う

27. 日本語の場合、仮想ボディという箱が基準
どちらも100pxの高さ

28. 画像、日本語、英語が混在する場合は？

29. 画像の場合
デフォルトではbase lineで う

30. 画像の中央が、（欧文のx-heightの）
middleになる
画像の中央線

31. って見えるように
画像とCSSを
設計する必要がある
つまり

32. じゃあどうする？
• 背景画像にして、background-positionで
調整するのが楽かも。
• dispay:inline-tableまたは、displayにしてfloatさ
せ、marginを指定する手もありますが使いドコロ
をよく選んで、考えましょう。
• 調整が大変なので、アイコンサイズは
絶対に統一（パターン化）しておきましょう。

33. まとめ
プログラムは思った通りには
動かない。書いた通りに動く。
CSSも同じです。
設計をきちんと/オブジェクト化/DRY…etc
プログラムを書くつもりでCSSも。

34. 参考
MDN/CSS
https://developer.mozilla.org/ja/docs/Web/CSS