【HTML CSS】グリッドレイアウトで、基本のレイアウトを作る！Grid Layout

[@xerico1128]

続けて試聴しました！ わーかりやすーい！感謝です。 スクールに通ってますが、ここまで教えてくれないので本当に助かります。 ありがとうございます。 引き続き勉強させていただきます。

[@hirocode]

参考にしていただけて嬉しいです😊♪こちらこそありがとうございます❗️

[@milk-m7x]

動画の構成が簡潔で分かりやすく、かつ動画内のデザインもスタイリッシュで見やすいです！ 動画だと文章を読むよりもスッと頭に入ってきやすいので、このようなコンテンツを作ってくださって本当にありがたいです。 以前からHIROさんの動画をいくつか拝見していて、すごくお世話になってます。 もっと再生数伸びても良いのに❕と密かに思っております…🫢 これからもHIROさんの動画でたくさんお勉強させてもらいます！！！😤

[@hirocode]

凄く良く言ってくださってめちゃめちゃ嬉しいです😭‼️こちらこそもっと有益になるような動画上げれるように頑張ります🙇‍♂️‼️

[@あらた-u2s]

レイアウト組の「コツ・ポイント」について、レイアウト要素とパーツ・コンテンツの具体的なスタイリングが知りたいのですが、ここら辺の考え方は何か別に書籍などでも学べるものなのでしょうか？

[@Nyan-l3w]

ヒロさんいつもありがとうございます。今初案件でLPを作成中です。それでひとつのあるセクションがとても複雑で、gridで組むことにしたのですが上手く行きません。デザインは画面いっぱいの桜色の背景に白い雲(svg)がそのセクション全体に21個、ランダムに配置されています。手前にはリストタグの要素が4個と、可愛い小さなイラスト(png)が散りばめられています。各要素は重なっている部分もあるので、これはZindex で指定すれば良いのですが、grid-template をどう指定するのが良いか迷っています。このような場合、widthは100vwでmin-widthにインナー幅を充てる。heightもmin-hightである程度確定させた方が良いのでしょうか？ あと、いわいる細かく碁盤の目の様に(rows columns)を30ピクセル位で区切ったセクションを作る事についてはどう思われますか？ 質問の意味が伝わらなかったらごめんなさい🙇‍♀️もし良かったらアドバイス下さい😢

[@Nyan-l3w]

何度もすみません😅お客様に確認したところ、雲の中にテキストもやっぱり入れたいそうで。。もうこうなったら背景は白い雲型ヌキの一枚背景にして、その上にグリッドを組み、手前のイラストとリストを配置させる事になりました。お騒がせしました🙇

[@hirocode]

コメントいただきありがとうございます😊♪ 無事解決されたようでよかったです☺️ 初案件なんですね！応援してます😆❗️

[@nyrxeachuv7925]

質問ですが、現在はモバイルファーストが当たり前ですが、制作する際は、スマホサイトからCSSで構築してスマホ用の内容をもとに、最後にPC制作をやってますか？

[@hirocode]

コメントいただきありがとうございます😊♪ PC→SPの場合、コーディングで対応できることも多いのですが、SP→PCの場合は何度か試した結果、PC版のデザインカンプも作った上でコーディングした方が効率が良いという結論に至ってます（僕の場合）🙆‍♂️ SPはPCに比べて表示要素を絞ることがほとんどなので、コーディングで対応する場合、頭で増やす要素を考えて作業するって形になるので結構ハードルが高いです💦 なので、いずれにしても最近はSP, PCのどっちもデザインした上でコード化していくって形をとっています😆❗️