| やぼったい |
危険度：★★ |
34 写真を入れると文章が読みにくいのを解決
文＝新谷剛史（（株）セカンドファクトリー）
文中に図が含まれる場合に、写真が左寄せや右寄せになるように定義されている（であろう）Webサイトを見かけるが、その中で、写真と文字がくっついてしまっているために、読みにくくなってしまっている場合がある。はじめは写真の周りにフレームのように見える余白が入っていたのだろうが、運用しているうちに画像の周りの余白を入れ忘れてしまったものと推測される。運用後のことも考えて、画像の周りにはあらかじめ余白をとっておくと、運用後の不具合を防ぐことができる。あらかじめ左寄せと右寄せを用意しておくとあとの運用が楽になる。
CSS
【1】＜p＞タグに含まれる＜img＞タグなど、特定のブロック要素内に含まれる＜img＞タグにはあらかじめ回り込みの指定を行おう。右か左、よく使うと思われる回り込みは、クラス指定を行わなくても適用されるようにタグに対して指定をおこなっておく。その逆の指定は、要素にクラスを指定した場合に適用されるように準備するとよい。ここではデフォルトで左寄せにし、クラス指定の組み合わせによって写真のレイアウトが柔軟に行えるように準備した。
CSS
【2】回り込みの指定だけでは、画像に余白をとるのを忘れた場合に、文字と画像がくっついてしまい読みにくくなる。そのため、回り込みの指定には同時に余白を設定しておくとよい。サンプルでは左または右にマージンを設定。上下のマージンは必要に応じて設定しよう。外側のブロック要素に「clear:both」を指定し、画像が大きく文章が少なかった場合の回り込み指定をしておくとよい。
CSS
【3】必要に応じてボーダーなどを指定することもできる。＜img＞タグがインライン要素であることに注意して、必要に応じて背景色やボーダーを指定しよう。ただし、写真を斜めにする場合など、画像に変化を加える場合にはこれらの指定が邪魔になることもあるので、ボーダーや背景色を指定しない状態のクラスを準備しておくとなおよい。
［INDEX］
●整理されていない
>>> 03 リストマーカーと個条書きのバランスが悪いのを解決
>>> 04 大量の要素がびっしり詰まっていて全体的に見づらいのを解決
●やぼったい
>>> 33 表の背景がきれいに表示されないのを解決
>>> 34 写真を入れると文章が読みにくいのを解決
●平凡でつまらない
>>> 41 長方形のボックスにインパクトが足りないのを解決
>>> 42 枠にとらわれたデザインになるのを解決
●メリハリがない
>>> 75 画像とテキストの上辺の位置がそろわないのを解決
>>> 76 テキストリンクがパッとしないのを解決
