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
- innerクラスのついたdivでスタイルを定義
- カードタイプのコンテンツをパパっと作れるようになる
- flex-wrapでcardを折り返す
- nth-child→ ○番目の要素だけ違うスタイルつけたい
- カラム落ちしないようにする便利な関数
DAY2で身につけられるのは上記4つかなと予想しながら課題に取り掛かりました。
div class=”inner” で共通のスタイルを予め定義しておくと便利

リセットCSSを書いた下に、複数のセクションに同じスタイルを当てる為のinnerをつくりました。
この方法ははにわまんさんのブログでも書かれていますので用チェックです。
レイアウトの基本である.innerの中央寄せを覚えよう!
cardタイプのコンテンツの作り方
div>img,h3,p
cardタイプのコンテンツをBootstrap等を使わずにコーディングするには、
1 2 3 4 5 |
<div class="card"> <img src="#" alt=""> <h3>タイトル</h3> <p>テキストテキストテキスト…</p> </div> |
こんな構成で作りました。
これをたくさん複製していけば、カードを並べていくことができますね。
予めheightを指定しておけば、カード内の文章(テキストテキスト…の部分)の長さに関わらず
同じ大きさのcardの出来上がりです。
今回の課題は3枚ずつ並べていますので、widthは33.333%くらいにしておけばOK。
3つのcardを flex-wrap: wrap;で並べれば折り返してくれる
この1つ1つのcardたちがバラバラにならないように、まずdivでひとまとめにしました。

いいclass名が思い浮かばなかったので、cardsにしてあります。(まぎらわしい)
それで、この div.cards という親要素をflexboxにして、
flex-wrap: wrap; を当てれば…😍
続きは調べてくださいw
nth-child()→ ○番目の要素だけ違うスタイルつけたい【擬似クラス】
並べたcardにmarginを当てて間隔を取りますが、
端っこのcardの margin-left が邪魔ですね。
ここで擬似クラスの登場です。
nth-child(n)→ n番目の要素だけにフォーカスしてスタイルを当てることができる便利クラス!
beforeやafterなど何種類かありますが、
1 2 3 4 5 6 |
.card:nth-child(3n) { padding: 16px; margin: 0 0 20px 0; width: calc(33.3333% - 30px); background-color: #fff; } |
こんな風に使いました。
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のおさらいでした。