LoginSignup
40

More than 1 year has passed since last update.

posted at

updated at

【dlかul】ニュース系(新着情報)デザインのコーディングパターン

ニュース系デザインとは、Webサイトでよく見かける「新着情報」とかを掲載しているデザインです。

スクリーンショット 2020-02-18 14.33.34.png

こんな感じのデザイン
テンプレを覚えてしまえば楽チンなのですが、一からコーディングをしようとすると、「ん??どうやるんだっけ?」となってしまう。

ニュース系デザインの理解をより深めるためにも、いろんなパターンを調査してみた。

ニュース系デザインのコーディング方法

dlタグでニュース系デザインのコーディング

See the Pen wLXZzp by kei (@kei_01011) on CodePen.

シンプルに書くには、「float:left」を使う方法があります。

floatを使うことで、ddが自然に回り込み、dtの右側に配置されます。

marginを使って余白を調整すればオッケーです。

次に、ラベルを追加していきます。

See the Pen VJdNbm by kei (@kei_01011) on CodePen.

ラベルは、dtの中にでもタグでもいいので追加し、マークアップしていきます。そして、marginとpaddingで余白を整えます。

レスポンシブにはしてませんので、あとはメディアクエリで調整していく感じでしょうか。

参考
無難なニュースリスト

他のサイトのコーディングパターンを知る

いいところはいただきつつ、自分のコードパターンを増やしてくのはいいことだと思っています。

コーディングの参考に、他のサイトのニュース系のデザインを見つつ、実際にコードを書いてみました

首相官邸(divで囲んでflexで横並び)

スクリーンショット 2020-02-18 14.34.45.png

liの中のそれぞれの子要素は、divでマークアップしてflexで横並びになっています。

See the Pen mZKgzp by kei (@kei_01011) on CodePen.

Y!mobile(linline-blockで横並び)

スクリーンショット 2020-02-18 14.35.10.png
liタグの中に、aタグで囲んだspanタグとpタグを入れて、inline-blockで横並びになっています。

See the Pen ydEWyL by kei (@kei_01011) on CodePen.

タイムズカーレンタル(擬似要素を使ったNEWラベル)

スクリーンショット 2020-02-18 14.35.31.png

ラベルが2つあるパターン!

デザインを見た感じだと「難しそう」と思ってしまいますね。

一見難しそうに見えますが、これもさっきとやり方は同じでinline-blockで横並びにしているだけです。

ラベルは擬似要素を使って作られていますね

See the Pen PravQg by kei (@kei_01011) on CodePen.

パターンは知っておくべき

今回見てきたように、様々なコーディングの方法があります。

つまり、コーディングに正解はないけど、パターンを知っておけば楽にコーディングできるということ。

たくさんのサイトを見つつ、コーディングパターンを盗んで、自分のものにしていきましょう。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
40