【HTML/CSS】ニュースリストの作り方について

今回はHTMLとCSSを使って、WEBサイトでよく見るニュースリストを作成していきます。

簡単にできるので、是非参考にしてください!

【HTML/CSS】ニュースリストの作り方について

ニュースリストの完成形はこちら。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

日付とニュースのタイトルだけがあるシンプルなリストにしました。

HTML

 

ulタグの中に、liタグを用意してニュースリストを作成していきます。

そして、liタグの中にさらにtimeタグとaタグを入れ子にします。

今回は、「ニュースのタイトルが入ります。」のタイトルだけクリックできるようにしました。

CSS

 

親要素であるnewslistに対して、横幅を指定します。

そして、子要素であるliに対して「display: flex;」で横並びに。

「align-items: flex-start;」で日付とニュースタイトルの縦の高さを揃えます。

あとはニュースリストにアンダーラインを引いたり、余白を指定すれば完了です。

まとめ

以上が、HTMLCSSを使ってWEBサイトでよく見るニュースリストを作成する方法でした。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事