HTML/CSS

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

 

悩む人
悩む人

ニュース系のコーディングがうまくいかない!

よくあるコーディングデザインの一つが「ニュース系デザイン」ですが、これがなかなか初心者を苦しめているんですね。

 

この記事を書いている僕は、

完全未経験からプログラミング学習3ヶ月で、Web制作会社に転職することができました。

 

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

 

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

 

ニュース系デザインの理解をより深めるためにも、いろんなパターンを紹介していきたいと思います。

 

ニュース系デザインに苦戦!

実は僕もめちゃくちゃ苦戦してました。

 

なんとか形になっても、

  • 「レスポンシブにしようとしたらずれる」
  • 「余白が合わない」

といったことで足止めを食らっていました。。。

ですが、ググりつつ手を動かしまくったら、なんとか完成といった感じ。

 

今回のデイトラでは、ニュース系デザインを経験したので、「そういえば似たようなデザインをやったな!」と、スラスラとコードを書くことができました。


やっぱり経験って大事なんだなーと実感。

 

ちょっと前置きが長くなってしまいました、、それでは具体的なコーディング方法を解説していきましょう。

 

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

ぶっちゃけて、ニュース系デザインをコーディングする方法は人それぞれです。

僕が今回使ったのはdlタグを使った方法で、かなりオーソドックスではないかと思います。

 

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

dlタグを使用したコーディングの方法はcodepenにまとめました。

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の中に<span>でも<a>タグでもいいので追加し、マークアップしていきます。そして、marginとpaddingで余白を整えます。

 

どうでしょう??

これでよく見るニュースや新着情報のデザインっぽくありませんか?

 

レスポンシブにはしてませんが、基本的にはこれで大丈夫だと思います。

あとはメディアクエリで調整していく感じでしょうか。

 

今回は、dlタグでマークアップしましたが、

ulタグでもマークアップが可能です。

 

他のサイトはどうやってコーディングしてる??

僕は行き詰まった時、他のサイトがどんなコードを書いているかを「カンニング」していました・・。

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

 

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

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

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

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

こんな感じでしょうか。

divで囲って、flexで横並びした方がメンテナンスしやすそうですね!

 

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

liタグの中に、aタグで囲んだspanタグとpタグを入れて、inline-blockで横並びになっています。

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

これも、パターンの一つとして覚えておきたいですね!

 

 

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

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

 

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

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

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

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

こんな感じだと思います。

 

 

結論:正解はないけど、パターンは知っておくべき

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

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

 

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

NEWS系のデザインは、実務でもガンガン使うので必ずマスターしましょうね。