エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

【DAY5】AdobeXDからニュース系のコーディング【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【DAY5課題】AdobeXDからニュース系のコーディング

DAY5の課題は「AdobeXDからニュース系のコーディング」です。

 

AdobeXDからニュース系のコーディング

AdobeXDからニュース系のコーディングです。

 

CSSのFlexBoxが超便利

私は、CSSのFlexBoxを使ってニュース部分を実装しました。

超便利ですね。

下記のサイトがうまく整理されていてわかりやすいです。

www.webcreatorbox.com

 

FlexBoxの中にFlexBoxを入れる

今回、FlexBox(Row)の中にFlexBox(Column)を入れて実装しました。

注意するのは「意味のまとまり」ごとに作ることですね。

見た目だけで言うと、Columnの中に、Rowを入れても、同じ仕上がりになります。

が、それだと今後のnewsが1つ増えた時に面倒くさいのでダメですね。

 

色が少し違うラベル部分をどうコーディングするか?【保守】

色が少し違うラベル部分をどうコーディングするか?

…というのが今回気になったところです。

 

背景色だけが違う「ラベル」が3種類あるので、

  • news-label-1 ※ラベルのフォント・形の設定 + 背景色(灰色)
  • news-label-2 ※ラベルのフォント・形の設定 + 背景色(青色)
  • news-label-3 ※ラベルのフォント・形の設定 + 背景色(赤色)

と3つのクラスを用意すれば実現はできます。

 

しかし、それだと「保守性」が低くなるので、

  • news-label ※ラベルのフォント・形の設定 
  • news-label-1 ※背景色(灰色)のみ設定
  • news-label-2 ※背景色(青色)のみ設定
  • news-label-3 ※背景色(赤色)のみ設定

とした方が良さそうだなあと思いました。

こうすることで、形やフォントサイズが変更になったときに、一箇所だけ(news-label)だけを変更すれば良くなります。

 

ちなみにこの辺りの保守の話は「Web制作者のためのCSS設計の教科書」という本が参考になります。

※今後WEB制作をするなら買って損はない本だと思いますが、今回のデイトラですぐに必要ではないです

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

 

 

【おまけ】displayのblock, inline, inline-blockの整理

おまけです。

displayのblock, inline, inline-blockについて。

 

この辺りに迷って、コーディング速度が落ちることが多いので、改めて整理しました。

段々とCSSの考え方に慣れてきました

 

以上「AdobeXDからニュース系のコーディング」というお話でした。

今回はあまり書くことがなかったですw

www.engineer-step.com