こんにちは、タビんちゅです。
目標は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記事: