float不要!スマホサイトの”記事一覧”をシンプルなHTMLとCSSで実現する方法。

smarphone_cording_0

本業はウェブディレクターなので、ディレクション業務がメインですが以前はデザインやコーディングもバリバリこなしておりました。 その時に感じたのが、このようなデザインが多いなぁってこと。

article_list

左側にサムネイル、右側に記事タイトルとリード文などがレイアウトされているデザインなのですが、このブログ記事の下にある”関連記事”などでも採用していますし、スマホサイトの記事一覧などでも多く見られますね。 このデザインが以下のような条件とHTMLの場合、皆さんはどのようなCSSを書きますか?

■条件
(1)サムネイルのサイズは不変(今回は100×100pxの正方形)
(2)テキストは分量やデバイスの横幅に応じて可変とする
(3)できるだけシンプルなHTMLにしたい

■HTML

方法1:サムネイル(dt)を左にfloatさせて右側にタイトルとテキスト(dd)を右側に回り込ませる

まず思いつくのはfloatでの回り込みだと思いますが、

  • floatさせると高さを失ってしまうのでテキストの分量に連動して高さが可変ではなくなる
  • 後続の要素でfloatを解除する必要がある(dtにcleafixしてもダメ)
  • 古いバージョンのIEなどでレイアウト崩れが発生する可能性がある

など、floatさせることでこれらに対する解決策を講じる必要があり、意外と面倒です。

方法2:テーブルを組む

レイアウトをテーブルで調整することになるので却下。

方法3:ネガティブマージンを採用する

今回オススメするのはddの左側にパディングを与えてサムネイルの右側まで移動させ、上下位置をネガティブマージンで調整する方法です。順を追って解説していきます。

(1)CSSで何も指定していないデフォルトの状態がこちら。分かりやすいように各要素に色付けしました。

smartphone_cording_2

(2)ddの左側にパディングを付与してddをサムネイルより右側に移動させる。パディングを110pxとした理由は後述します。

smartphone_cording_3

(3)次にddのトップにネガティブマージンを付与してddをサムネイルの横まで引き上げます。

smartphone_cording_4

これでサムネイルとddが横並びになりました。パディングを110pxとしたのはdtとddの間に10pxの余白を取りたかったからです。さらに、ddにmin-height: 100px;を指定しておきます。これでテキスト量が少なくても最低限サムネイルと同じ高さ(100px)を維持します。

smartphone_cording_5

ddの横幅はデバイスの横幅に追従するので、dtとddを一組にしてボーダーで区切りたい場合はddのbottomに対してborderプロパティを設定すればOKです。

smartphone_cording_6

まとめ

一部の古いブラウザでのレイアウト崩れを避けるためには、必要以上にfloatを使わないことが鉄則ですので、主にpaddingのコントロールだけでこのレイアウトが実現できるメリットは大きいと思います。 また、なるべくシンプルなHTMLやCSSで制作するとメンテナンス性も格段に上がりますので、今まで別の方法でレイアウトを組んでいた方はぜひ試してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です