04 大量の要素がびっしり詰まっていて全体的に見づらいのを解決 | デザインってオモシロイ -MdN Design Interactive-

04 大量の要素がびっしり詰まっていて全体的に見づらいのを解決

2024.4.20 SAT

【サイトリニューアル!】新サイトはこちらMdNについて


整理されていない
危険度:★★★

04 大量の要素がびっしり詰まっていて全体的に見づらいのを解決
文=境祐司



マルチカラムレイアウトの各ボックスに配置された大量の要素を一覧すると、その情報量に圧倒されてしまうことがある。ニュースサイトなどは、新聞のフォーマットと同様に、すき間なく情報が詰め込まれる。このような形式のWebサイトは、余白を大きく取るような大胆なレイアウトは難しい。見出しや段落などの間隔をうまく調整し、情報量と読みやすさを両立させなくてはならない。行間、文字の間隔、単語の間隔、そして段落の間隔など、詳細に見ていく必要がある。特に情報のまとまりごとに確保しなければならない余白については、よく検証しよう。




【1】左右、中央の3つのボックスの内容(見出しや記事)が詰まって見える。各ボックスの余白(padding)の値が小さいので、区切り線との間隔がなくなっている。

XHTML

【2】XHTMLで、要素間の余白を確保するのは避けよう。table要素を使った余白取りなど、物理マークアップはできるだけ使わないほうがよい。

CSS

【3】段組みを構成している各ボックス(#leftColumn、#rightColumn、#content)のpadding値を大きくする。試しにborderを追加すると、枠線が表示されるので、他の要素との間隔などをチェックすることが可能だ。


[INDEX]
●整理されていない
>>> 03 リストマーカーと個条書きのバランスが悪いのを解決
>>> 04 大量の要素がびっしり詰まっていて全体的に見づらいのを解決
●やぼったい
>>> 33 表の背景がきれいに表示されないのを解決
>>> 34 写真を入れると文章が読みにくいのを解決
●平凡でつまらない
>>> 41 長方形のボックスにインパクトが足りないのを解決
>>> 42 枠にとらわれたデザインになるのを解決
●メリハリがない
>>> 75 画像とテキストの上辺の位置がそろわないのを解決
>>> 76 テキストリンクがパッとしないのを解決


twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在