ul要素を使ったスタイリング
新着情報一覧を組むときにどのHTML要素を使うかを考えてみると、リスト状になるのでdl要素かul要素か迷うところですね。
dl要素にすればdt要素で日付を入れ、dd要素へ内容を入れられます。一見HTMLの意味合いもあっている様な気がしますよね。
でもよく考えてみてください。dt要素に入れる日付はdd要素に入る内容の見出しとして適切ですか？
きっと違うと思います。タイトルならともかく、日付は見出しになり得ません。
逆に見出しをdt要素にしたらな、dd要素には内容が入らないと成り立ちませんね。
更にdt要素とdd要素をリンクエリアにしようと思うと、a要素を二カ所に書かなければならないので手間です。
それに更新箇所が増えるという事は間違いに繋がりやすいので、あまりお勧めできません。
また1箇所で済ませようとすると、dl要素全体をa要素で囲まなくてはならないので、新着情報一覧の記事1件ごとに区切ることになってしまいます。
それでは見た目はリスト状になっても、HTMLの方ではリスト状にはなりません・・・
そこで私はul要素を使うことを推します。
新着情報一覧のレイアウト例
例えばこんなレイアウト配置を考えたとき、どうやってコーディングしますか？
先ほどの導入があったので、きっとul要素で外枠を作って、li要素の背景に記号と背景色を付けて・・・あれ？日付とタイトルはどうやって配置しよう・・・と困るでしょう。
日付とタイトルをそれぞれfloatさせてもいいですが、レスポンシブWEBデザインやスマートフォン対応をしようと思うと、横幅が決まりません。
横幅が確定できないと、表示が崩れてしまいます。
display:inline-block;で横に並べる方法もあるかもしれませんが、中に入る文章量が変わると思ったような配置ができません。
そこで、前回紹介した方法を使ってみましょう！！
HTMLの構造はこのように作り、CSSを使って成形します。
span.date{float:left; width:7em;}
span.title{padding-left:7em;}
これで日付の部分を横幅7emだけ確保する事ができます。
続くタイトルの部分についても、左に文字の横幅分の7emを空けてあるので、複数行になってしまっても日付の下に文字が回り込んでしまうこともありません。
更にa要素を「display:block;」を指定しているので、リンクエリアが横一行分に設定する事もできます！！
a要素の中にp要素やdiv要素を入れる事に抵抗のある方も、これなら大丈夫ですね。
今回の例では日付、タイトル共にspan要素を使っていますが、これだとclass名を設けないといけませんね。
そんな場合はb要素で代用しても大丈夫です！太字になっていまいますが、font-weight:normal;で戻してあげれば問題ありません。
これで新着情報一覧のリストを作ることができました！
見た目もリスト状ですし、HTMLもリストだとわかる作りにすることができます。
何よりclass名やid名を付ける箇所が、最小で親要素のul要素の1箇所だけで大丈夫なんです！
class名やid名を付ける作業は地味に大変な作業ですよね？それが1箇所で済むんですよ！シンプルな作りなので、デザインもいろいろと載せる事ができます。
新着情報一覧のリスト以外にも、沿革に使ったりすることもできます。
実際に使ってみると、いろいろな部分に応用が利く考え方なので、ぜひ取り入れてみてください。
まとめ
・新着情報一覧のリストはul要素を使ってコーディングする
・日付を入れる要素をfloatして横幅を指定、タイトルを入れる要素にdtの幅の分だけpaddingを設定する
