Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
アイコンがなぜずれるのか？
- 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にしたんだけど 真ん中に来ない」
- 7. block lebel 要素 h1 h6,p,div,dl,ol,ul,pre,table… • ブロック。前後に改行が入る。 • 高さ、幅の指定が可能 • margin / padding
- 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…
- 14. たぶんこうすればOK inline要素の場合、 • vertical-align:middle,top,bottomで調整する • 画像に余白を付けて調整 • 行間を調整する • CSSで、block lebel要素に変えてしまう 影響範囲をよく確認 margin 効かない=inlineだから
- 16. たぶんこうすればOK-2 • marginで調整する • display:table-cell、inline等、有効なdisplay要 素に変える • 当然、影響範囲をよく考えましょう
- 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
- 24. The quick brown fox jumps over the lazy dog
- 25. The quick brown fox jumps over the lazy dog フォントサイズはascender lineとdescender lineの間
- 32. じゃあどうする？ • 背景画像にして、background-positionで 調整するのが楽かも。 • dispay:inline-tableまたは、displayにしてfloatさ せ、marginを指定する手もありますが使いドコロ をよく選んで、考えましょう。 • 調整が大変なので、アイコンサイズは 絶対に統一（パターン化）しておきましょう。