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

  Рет қаралды 8,835

HIROCODE.

HIROCODE.

Күн бұрын

Пікірлер: 10
@xerico1128
@xerico1128 Жыл бұрын
続けて試聴しました! わーかりやすーい!感謝です。 スクールに通ってますが、ここまで教えてくれないので本当に助かります。 ありがとうございます。 引き続き勉強させていただきます。
@hirocode
@hirocode Жыл бұрын
参考にしていただけて嬉しいです😊♪こちらこそありがとうございます❗️
@milk-m7x
@milk-m7x 2 жыл бұрын
動画の構成が簡潔で分かりやすく、かつ動画内のデザインもスタイリッシュで見やすいです! 動画だと文章を読むよりもスッと頭に入ってきやすいので、このようなコンテンツを作ってくださって本当にありがたいです。 以前からHIROさんの動画をいくつか拝見していて、すごくお世話になってます。 もっと再生数伸びても良いのに❕と密かに思っております…🫢 これからもHIROさんの動画でたくさんお勉強させてもらいます!!!😤
@hirocode
@hirocode 2 жыл бұрын
凄く良く言ってくださってめちゃめちゃ嬉しいです😭‼️こちらこそもっと有益になるような動画上げれるように頑張ります🙇‍♂️‼️
@あらた-u2s
@あらた-u2s 10 ай бұрын
レイアウト組の「コツ・ポイント」について、レイアウト要素とパーツ・コンテンツの具体的なスタイリングが知りたいのですが、ここら辺の考え方は何か別に書籍などでも学べるものなのでしょうか?
@Nyan-l3w
@Nyan-l3w 2 жыл бұрын
ヒロさんいつもありがとうございます。今初案件でLPを作成中です。それでひとつのあるセクションがとても複雑で、gridで組むことにしたのですが上手く行きません。デザインは画面いっぱいの桜色の背景に白い雲(svg)がそのセクション全体に21個、ランダムに配置されています。手前にはリストタグの要素が4個と、可愛い小さなイラスト(png)が散りばめられています。各要素は重なっている部分もあるので、これはZindex で指定すれば良いのですが、grid-template をどう指定するのが良いか迷っています。このような場合、widthは100vwでmin-widthにインナー幅を充てる。heightもmin-hightである程度確定させた方が良いのでしょうか? あと、いわいる細かく碁盤の目の様に(rows columns)を30ピクセル位で区切ったセクションを作る事についてはどう思われますか? 質問の意味が伝わらなかったらごめんなさい🙇‍♀️もし良かったらアドバイス下さい😢
@Nyan-l3w
@Nyan-l3w 2 жыл бұрын
何度もすみません😅お客様に確認したところ、雲の中にテキストもやっぱり入れたいそうで。。もうこうなったら背景は白い雲型ヌキの一枚背景にして、その上にグリッドを組み、手前のイラストとリストを配置させる事になりました。お騒がせしました🙇
@hirocode
@hirocode 2 жыл бұрын
コメントいただきありがとうございます😊♪ 無事解決されたようでよかったです☺️ 初案件なんですね!応援してます😆❗️
@nyrxeachuv7925
@nyrxeachuv7925 2 жыл бұрын
質問ですが、現在はモバイルファーストが当たり前ですが、制作する際は、スマホサイトからCSSで構築してスマホ用の内容をもとに、最後にPC制作をやってますか?
@hirocode
@hirocode 2 жыл бұрын
コメントいただきありがとうございます😊♪ PC→SPの場合、コーディングで対応できることも多いのですが、SP→PCの場合は何度か試した結果、PC版のデザインカンプも作った上でコーディングした方が効率が良いという結論に至ってます(僕の場合)🙆‍♂️ SPはPCに比べて表示要素を絞ることがほとんどなので、コーディングで対応する場合、頭で増やす要素を考えて作業するって形になるので結構ハードルが高いです💦 なので、いずれにしても最近はSP, PCのどっちもデザインした上でコード化していくって形をとっています😆❗️
Why no RONALDO?! 🤔⚽️
00:28
Celine Dept
Рет қаралды 115 МЛН
Мясо вегана? 🧐 @Whatthefshow
01:01
История одного вокалиста
Рет қаралды 7 МЛН
#37 CSS Grid Tutorial [Complete Guide] - CSS Full Tutorial
43:12
Dev Dreamer
Рет қаралды 110 М.
HTML CSSでSVGをプロ級に使うための2つの実用的な方法
13:30
HIROCODE.ヒロコード
Рет қаралды 11 М.
SASSの超便利な使い方【HTML/CSSコーディング】
14:32
HIROCODE.ヒロコード
Рет қаралды 20 М.
Learn CSS Flexbox in 20 Minutes (Course)
20:37
Coding2GO
Рет қаралды 279 М.
【HTML/CSS】カード型レイアウトのコーディング練習問題
17:17
動画でWebデザインにtorikumu@クリエイターズファクトリー
Рет қаралды 19 М.
Why no RONALDO?! 🤔⚽️
00:28
Celine Dept
Рет қаралды 115 МЛН