Programming

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

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

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

  • innerクラスのついたdivでスタイルを定義
  • カードタイプのコンテンツをパパっと作れるようになる
  • flex-wrapでcardを折り返す
  • nth-child→ ○番目の要素だけ違うスタイルつけたい
  • カラム落ちしないようにする便利な関数

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

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

共通のスタイルを定義しておくと便利

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

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

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

div>img,h3,p

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

cardタイプのコンテンツ

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

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

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

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

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

ひとまとめにしてflex

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

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

続きは調べてくださいw

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だな」ってしょっちゅう思います。

  • innerを用意して共通のスタイルはひとまとめにして時短
  • cardは頻発するから覚えちゃおう
  • nth-child( )で特定の要素だけスタイル変更可能
  • calcは %で幅を指定しても pxで調整できる

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