#30DAYSトライアル #2nd DAY2：XDから横並びのカードのコーディング

2019年2月16日からスタートした #30DAYSトライアル #2nd。
#2ndの講師ははにわまんさん（@haniwa008）！
いつもHPこーどにお世話になっています。

DAY1の課題は『DAY2：XDから横並びのカードのコーディング』です。

#30DAYSトライアル #2nd DAY2
カードタイプの要素を並べる

innerの利用→ 複数セクションで同じスタイルをつけたいときに定義しておくと楽（margin paddind等）
カード→ div>img,h3,p
nth-child→ ○番目の要素だけ違うスタイルつけたい
width:calc(%, – px) →カラム落ちの調整、めっちゃ便利

— だりあ＠エンジニア (@engineer_dahlia) February 18, 2019

DAY2で身につけられるのは上記4つかなと予想しながら課題に取り掛かりました。

div class=”inner” で共通のスタイルを予め定義しておくと便利

リセットCSSを書いた下に、複数のセクションに同じスタイルを当てる為のinnerをつくりました。

この方法ははにわまんさんのブログでも書かれていますので用チェックです。
レイアウトの基本である.innerの中央寄せを覚えよう！

cardタイプのコンテンツの作り方

div>img,h3,p

cardタイプのコンテンツをBootstrap等を使わずにコーディングするには、

こんな構成で作りました。

これをたくさん複製していけば、カードを並べていくことができますね。
予めheightを指定しておけば、カード内の文章（テキストテキスト…の部分）の長さに関わらず
同じ大きさのcardの出来上がりです。

今回の課題は3枚ずつ並べていますので、widthは33.333％くらいにしておけばOK。

3つのcardを flex-wrap: wrap;で並べれば折り返してくれる

この1つ1つのcardたちがバラバラにならないように、まずdivでひとまとめにしました。

いいclass名が思い浮かばなかったので、cardsにしてあります。（まぎらわしい）

それで、この div.cards という親要素をflexboxにして、
flex-wrap: wrap; を当てれば…😍

続きは調べてくださいｗ

nth-child()→ ○番目の要素だけ違うスタイルつけたい【擬似クラス】

並べたcardにmarginを当てて間隔を取りますが、
端っこのcardの margin-left が邪魔ですね。

ここで擬似クラスの登場です。
nth-child(n)→ n番目の要素だけにフォーカスしてスタイルを当てることができる便利クラス！

beforeやafterなど何種類かありますが、

こんな風に使いました。
cardというclassがついたdivの、3n番目の要素を指定しています。

なぜ3nかというと、cardは横に3枚並べたら次の行に改行する指定だからですね(^ω^)

4nだったら4の倍数、7nだったら7の倍数といった具合です。
（学生時代に数学やった方はイメージ付きやすいのではないでしょうか）

web兄さん（@webliker_info）のチートシートを手元に置いておくと良いですよ！
CSSセレクタのチートシート

width: calc(◯◯％ – □□px ); でカラム落ちを防ぐ【カルク関数】

実際にこのcalc関数を使ってカラム落ちせずにcardが並んだときは、
「ふ～～んそんな便利な関数があるのかぁ」なんてのんきな感想でした。
が、今この記事を書きながら思った。

めちゃくちゃすごい便利じゃない！？！？

だって、％とpxがごっちゃなのに計算してくれるんですもの！

キロメートルとメートル、計算するには単位を揃えますよね？
1時間と1秒、これもなんらかの計算をするには単位を揃えますよね？

％とpx、揃えなくて良いんですよ。
…すごい。

まとめ｜cardはよく出てくるから2分で書けるようになろう

DAY2では、インナーを作るのと、cardを作りました。

cardは色々な場面で頻繁に使うと思うのです。
PinterestなどでオシャレなLPデザイン探しをしていても、

「あ、ここはcardだな」ってしょっちゅう思います。

以上、DAY2のおさらいでした。