ニュース欄でよくみるレイアウトコーディング

こんなところで使えるリストタグ

ニュース記事とかでよく見るデザイン。実際にコーディングしたときにどのタグを使うかとても迷ったので、メモ。
このようなレイアウトよく見ませんか？

どのタグが使えるだろうか

まず、どのようにHTMLを構成しようか軽く考えてみました。

最初はtableタグや定義リストを使おうとしましたが、なかなかうまいこといかず…
参考になるサイトはないかと探してみて、見つけました！

丸の内インフラストラクチャー株式...

お知らせ | 丸の内インフラストラクチャー株式会社 丸の内インフラストラクチャー株式会社では、日本に所在するエネルギー、交通、通信・ユーティリティといった各種インフラ事業に幅広く投資を行って参ります。

検証で見てみると、なんとリストタグが使われていました。
こんな使い方ができるんだと思い、勉強になりました。

・liタグ直下には意外と子要素が入れられる。
・aタグ直下にdivをいれるという発想がなかった。勉強になる。

ちなみに、コーディングをしていると、このタグ親要素や子要素に入れられるのなんだけっけ？ってなることよくあるのですが、こちらのサイトがとてもおすすめ！

あわせて読みたい

HTML5 入れ子チートシート | 吉川ウェブ HTML 5.2までの子要素・親要素の対応を視覚的に表示するチートシート（早見表）です

ブックマークしといて、ぜひ見返してみてください。

コーディング

参考サイトを元にコーディングしてみました。よければ、参考にしてみてください。

See the Pen by komame (@komame) on CodePen.

さいごに

先週やったばかりなので、もう一度自力でやろうとしてもできなかった。
一回できたからできると思ってたけど、自分の中でまだ落とし込めてなかったんだなあ。習得するまでには、繰り返して何回もすることが大切だと思いました。