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

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

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

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

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

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

  • Web制作で稼いで2020年5月のセブ🇵🇭友達の結婚式に絶対行く
  • セブIT留学で大失敗
  • 海外フリーランスを諦められない
  •  #30DAYSトライアル で再挑戦プログラミング中
  • Web制作、フリーランス関連を学んで即発信中

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

『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);』を理解したら、あとは使いまわせばいいという便利な式ですね。

ひと口メモ

デイトラ1stで学んだレスポンシブがここで大活躍。flexboxもnth-child()も使いながら慣れていく感じですね。実際にアウトプットしながら学ぶのが超大事。

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

人気No.1記事: