| メリハリがない |
危険度：★★ |
75 画像とテキストの上辺の位置がそろわないのを解決
文＝平澤隆（デジパ（株））
画像の横にテキストが回り込んでいるデザインはよく見かけるだろう。これをCSSで行うには、img要素などに「flaot:left;」などと指定をすることで実現可能だ。しかし、このままではline-heightプロパティで指定している値分の行間と画像の上辺がそろうため、テキストの上部に若干の余白が生じてしまう。意識していないと気づきにくい部分だが、サイトのクオリティアップにこだわるのなら、この数ピクセルの余白の詰めを行うか行わないかでサイト全体のクオリティに影響してくる。
XHTML
CSS
【1】img要素にclassを指定して、CSSで画像の横にテキストがくるようにflaotプロパティを指定している。これだけだと画像とテキストの上辺がキレイにそろわない。
CSS
【2】margin-topプロパティの値に行間分の高さを指定することで、画像とテキストの上辺がそろいガタガタ感がなくなる。このmargin-topプロパティの調整をemで指定すると文字サイズを変更したときにもある程度対応でき、クオリティを維持できる。
CSS
【3】img要素のmargin-topの値を調整することで、画像とテキストの上辺をそろえることができたが、このままでは隣接している要素との余白が変わってしまう。隣接している要素が本来20pxの余白を下に指定していたのなら、img要素に指定したmargin-topの値を計算して数px減らす必要がある。
［INDEX］
●整理されていない
>>> 03 リストマーカーと個条書きのバランスが悪いのを解決
>>> 04 大量の要素がびっしり詰まっていて全体的に見づらいのを解決
●やぼったい
>>> 33 表の背景がきれいに表示されないのを解決
>>> 34 写真を入れると文章が読みにくいのを解決
●平凡でつまらない
>>> 41 長方形のボックスにインパクトが足りないのを解決
>>> 42 枠にとらわれたデザインになるのを解決
●メリハリがない
>>> 75 画像とテキストの上辺の位置がそろわないのを解決
>>> 76 テキストリンクがパッとしないのを解決
