【ズルいWeb制作】2nd：100万円稼ぐまでの挑戦27【横並びカードのコーディング】

こんにちは、タビんちゅです。

目標はWeb制作で100万円稼ぐ！！

東京フリーランスが無料で提供している30DAYSトライアル（デイトラ）１stを完了し、２ndで学んだことを忘れないうちに書いていきます。

これからデイトラをはじめる人の参考にもなるかもです。

この記事を書いたタビんちゅは、

あと記事はサクッと書いているので、誤字脱字があったらすみません。

『2nd：DAY10』を学習中

【今日やること】横並びカードのコーディング

カードはfloatじゃなくflexboxを使って楽に書くのがいいらしい。

flexboxをうまく使うのがコツ

カードのコーディングは、ひとつのカードを作って、量産して、横に並べて、余白とる

カードのコーディングは大変そうに見えますが、ひとつカードを作ってしまえば、後はコピペでカードを大量生産するだけです。

カードを横に並べるのは『display: flex;とflex-wrap: wrap;』を使えばサクッと出来ちゃいますよ。

レスポンシブのタブレット＆スマホはwitdthを変える

width: calc(33.333333% – 30px * 2 / 3);の値を変えるて、nth-child()を調整するだけ

Sassのレスポンシブの書き方がこれでいいのか不安ですが、こんな感じでタブレットのレスポンシブは完成です。

スマホはwidth100%にするだけなので楽ですね。スマホのレスポンシブもサクッと完成。

参考サイト

CSSの「calc」と「nth-child」を組み合わせて余白を意識した横並び

上記のサイトで解説されているCSSのcalc関数を使って余白を計算させながらパーセント指定できる

『width: calc(33.3333333% – 100px / 3);』を理解したら、あとは使いまわせばいいという便利な式ですね。

ひと口メモ

というわけで、今回はここまでです。『プログラミングは継続がいちばん大事。』ではでは。

人気No.1記事：

Tweets by tabin_chu100