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

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


<img width="621" alt="スクリーンショット 2020-02-18 14.33.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/5258de4a-cb92-2f0b-2851-47d5a30cf998.png">

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


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

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



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



<p class="codepen" data-height="300" data-theme-id="38004" data-default-tab="html,result" data-user="kei_01011" data-slug-hash="wLXZzp" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="wLXZzp">
  <span>See the Pen <a href="https://codepen.io/kei_01011/pen/wLXZzp">
  wLXZzp</a> by kei (<a href="https://codepen.io/kei_01011">@kei_01011</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

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

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

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




<p class="codepen" data-height="300" data-theme-id="38004" data-default-tab="css,result" data-user="kei_01011" data-slug-hash="VJdNbm" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="VJdNbm">
  <span>See the Pen <a href="https://codepen.io/kei_01011/pen/VJdNbm">
  VJdNbm</a> by kei (<a href="https://codepen.io/kei_01011">@kei_01011</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

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

参考
[無難なニュースリスト](https://blog.maromaro.co.jp/archives/stylerecipe_post/1276)



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

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

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

###首相官邸（divで囲んでflexで横並び）


<img width="631" alt="スクリーンショット 2020-02-18 14.34.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/d6d34dd6-5c1d-3efe-c458-e9d466b97cac.png">

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


<p class="codepen" data-height="300" data-theme-id="38004" data-default-tab="html,result" data-user="kei_01011" data-slug-hash="mZKgzp" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="mZKgzp">
  <span>See the Pen <a href="https://codepen.io/kei_01011/pen/mZKgzp">
  mZKgzp</a> by kei (<a href="https://codepen.io/kei_01011">@kei_01011</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



###Y!mobile（linline-blockで横並び）


<img width="612" alt="スクリーンショット 2020-02-18 14.35.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/19b4909a-5c68-7888-c40d-acbf482cdf27.png">
liタグの中に、aタグで囲んだspanタグとpタグを入れて、inline-blockで横並びになっています。



<p class="codepen" data-height="300" data-theme-id="38004" data-default-tab="html,result" data-user="kei_01011" data-slug-hash="ydEWyL" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ydEWyL">
  <span>See the Pen <a href="https://codepen.io/kei_01011/pen/ydEWyL">
  ydEWyL</a> by kei (<a href="https://codepen.io/kei_01011">@kei_01011</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>





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





<img width="629" alt="スクリーンショット 2020-02-18 14.35.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448787/7412d5ee-5c95-7407-cedd-5829632ebfcb.png">

ラベルが２つあるパターン！ 

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

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

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

<p class="codepen" data-height="300" data-theme-id="38004" data-default-tab="html,result" data-user="kei_01011" data-slug-hash="PravQg" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="PravQg">
  <span>See the Pen <a href="https://codepen.io/kei_01011/pen/PravQg">
  PravQg</a> by kei (<a href="https://codepen.io/kei_01011">@kei_01011</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



##パターンは知っておくべき
今回見てきたように、様々なコーディングの方法があります。

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


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