【HTML CSS】グリッドレイアウトの使い方。Grid Layoutの基礎コーディング。
今回は、CSSのプロパティの一つである、グリッドレイアウト（Grid Layout）の基本的な使い方を説明しています😊♪
🎥 この動画の構成 🎥
00:00 オープニング
00:10 グリッドレイアウトとは？
01:34 この動画の流れ
02:20 display: grid;
02:51 grid-template-columns（列の指定）
03:27 単位：fr（フラクション）とは？
05:03 grid-template-rows （行の指定）
07:10 grid-template （行と列を一括で指定）
08:39 エリアの指定
09:54 grid-template （行と列とエリアを一括で指定）
10:43 grid-area（エリアとグリッドアイテムを紐づける）
11:54 実際のコードで実践
12:40 Coding： display: grid;
13:06 Coding： grid-template-columns
14:45 Coding： grid-template-rows
16:19 Coding： grid-template
18:00 Coding： grid layoutでページレイアウトを組む
🗂 この動画で使用したファイル 🗂
www.craft.do/s/O6nQxCEACzHFDr
✅ ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ ぜひ『チャンネル登録』をよろしくお願いします🙇♂️
kzread.info?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン？
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
#WEBデザイン #Figma #XD
Пікірлер: 48
gridって教材とかでもよく使われているのですが、どこの学習コンテンツでも全く学ばないため困っていました。 こちらの動画とってもわかりやすかったです！ありがとうございました。
@hirocode
10 ай бұрын
そう言っていただけて作った甲斐があります😭ありがとうございます🙇
分かりやすい！
@hirocode
2 жыл бұрын
嬉しいコメントいただきありがとうございます🙇♂️‼️
ものすごく分かりやすくて、とても助かりました。ありがとうございます！
@hirocode
3 ай бұрын
嬉しいコメントいただきありがとうございます🙇♀️❗️
分かりやすかったです。話す口調やスピードも聞きやすいですね。
@hirocode
Жыл бұрын
嬉しいお言葉いただきありがとうございます😭❗️
今までなんとなく使ってたgridの理解が深まりました。 わかりやしいです！ありがとうございます！
@hirocode
Жыл бұрын
嬉しいです😆ありがとうございます❗️
今までfrの意味が理解できず、とりあえず数字を入れてみて調整してたんですがこれから頭の中でイメージできそうです。とてもわかりやすかったです。
@hirocode
2 жыл бұрын
わかりやすいと言っていただけてとっても嬉しいです😭❗️ありがとうございます🙇♂️
一度もグリッド使ったことがなく。。いつもわかりやすくて、聞きやすい話し方ですね。ありがとうございます！
@hirocode
Жыл бұрын
嬉しいコメントいただきありがとうございます😊‼️
@user-kana21
Жыл бұрын
@@hirocode 仕事をしながら独学中です！心が折れそうになりますが、なりたい自分になれるよう頑張ります！
すご！勉強になります！
@yu-ri782
2 жыл бұрын
ちなみに、このグリッドはテーブル(表)とかの変わりに使うのはどうですかね？ HTMLのタグ的なものとかを考慮した感じだと微妙でしょうか？？
@hirocode
2 жыл бұрын
ありがとうございます😆❗️
@hirocode
2 жыл бұрын
例えば、テーブルのレイアウトにグリッドレイアウトを使用する際には、tableタグやtbodyタグにdisplay: grid;を指定する形が良いと思います❗️
メチャクチャ良い勉強になります。 いろんな使い方教えて頂きたいです。
@hirocode
Жыл бұрын
ありがとうございます😊♪グリッドレイアウトの第２弾作ります❗️
とてもわかりやすかったです😆グリッドレイアウトの便利な使い方、楽しみにしています。gapを使った余白の便利の使い方も、わからない部分があるので、解説してもらえると嬉しいです😊
@hirocode
Жыл бұрын
嬉しいです！ありがとうございます😊♪続編作ります❕
わかりやすいー！ gridの解説は、あまりなかったので助かりました。いつもありがとうございます＾＾
@hirocode
Жыл бұрын
嬉しいですー😭ありがとうございます🙇♂️❗️
いつも勉強させて頂いてます！ もしよければ、ファーストビューを動画背景（レスポンシブ）にするやり方など動画にしてもらえると嬉しいです😂これからも応援してます！
@hirocode
2 жыл бұрын
いつもご覧いただきありがとうございます🙇♂️❗すぐにとはいかないかもですが、ご要望いただいた動画作ってみます😆❗️ありがとうございます🙇♂️🙇♂️🙇♂️❗️❗️
いつも分かりやすく説明していただけて大変助かってます！ display:flexをつかってますが、gridの方が便利になってきてるようなので、変えていきたいなと思ってます。 subgridについて便利な使い方があれば教えていただきたいです。
@hirocode
7 ай бұрын
ありがとうございます😆❗️今度subgridの動画上げます❗️❗️
グリッドレイアウトについてとてもわかりやすく教えてくださりありがとうございます。 ところで、bodyタグに対してmin-height:100vhにするだけでなく、display:grid;も指定するのは、どのように理解したらよいでしょうか。教えていただけたら幸いです。
@hirocode
11 ай бұрын
コメントいただきありがとうございます😊 body直下の.gridは高さを持たないため、bodyタグにdisplay: grid;を指定しないと最低高が中のコンテンツに依存してしまいます！.gridを空の状態かつ背景色をつけて、bodyのdisplay: grid;をあり・なしにしてみると違いがわかると思います❗️
@mnekosan
11 ай бұрын
@@hirocode 実際にbodyのdisplay:grid;をあり、なしにしてみて確認できました。早速教えてくださって本当にありがとうございます。
bootstrapのgridシステムを普段から使っている者なのですが、このdisplay:grid;との使い分けはどのようにするのが普通なのでしょうか？
@hirocode
2 жыл бұрын
コメントいただきありがとうございます😊♪ レイアウト組むにも色んなやり方があると思います。 今回出てきたレイアウト例で言うと、flexboxやcalcなどでも実装可能なので、選択肢をいくつも持っていた上で、一番使いやすいものを選択するで良いと思います😆❗️
神動画で笑った
@hirocode
3 ай бұрын
ありがとうございます🙇❗️
関係ないですが、VS Codeでカーソルが伸縮してアニメーションして見えるの、面白いですね！拡張機能ですか？
@hirocode
Жыл бұрын
確かVSCodeのsettings.jsonに直がきで設定してたと思います❗️❗️必要あれば調べてみます😊！
@KentaroxKondo
Жыл бұрын
@@hirocode すごいアイデアですね！カーソル位置を見失わなくなるので、良いなと思いました😋
14:40 「次にカラムのところ消して」って所どうやったんですか？
@hirocode
Жыл бұрын
command + / のショートカットキーで選択箇所がコメントアウトされます❗
@ssnishiyama
Жыл бұрын
@@hirocode ありがとうございます！！
21:10 CSSのgrid要素内で指定しているgrid-templateプロパティについて 一括指定で幅と高さをそれぞれ指定していますが、ある子要素の部分だけは分割せず幅全体を使って配置したい(Excelでいうセルの結合みたいな感じの)ときは、動画のように"head head"と指定すれば他の幅の割合が240px : 1frでも、headの幅だけは1frになってくれるのでしょうか？ それとも、幅の割合は240px : 1frのままで"head"に指定した要素が240pxの要素と1frの要素にそれぞれ表示される感じになるのでしょうか？
@hirocode
Жыл бұрын
コメントいただきありがとうございます😊♪ エクセルの結合と同じイメージです！ 列の幅が240pxと1fr幅の2列あるとして、 head headの行では、その２列が結合されている感じです。 なので、2列分の横幅を持つエリアができる形です😆❗️
初心者です。グリッドレイアウト＝レスポンシブデザインなんでしょうか？レスポンシブには、グリッドレイアウトは絶対なんでしょうか？このレベルの質問ですいません。
@hirocode
Жыл бұрын
いえいえ、コメントいただきありがとうございます😊♪ グリッドレイアウトは画面を格子状に分割してブロック状にした上で、ブロックに合わせて（または組み合わせて）要素を配置していくといったデザイン手法です。 この動画ではCSSのグリッドレイアウトのこと示していて、CSSで上記グリッドレイアウトの機能を持つのがdisplay: grid;の指定にあたります。 なので、CSSのグリッドレイアウト= display: grid;という解釈です！ また、レスポンシブデザインについてはまた別の意味で、サイトを表示するデバイス（PC,スマホなど）に応じて要素の配置やサイズを柔軟に変化させる手法になります。 例えば、ウェブサイト上にPCで見ると横幅600pxで表示される画像があるとして、これをスマホで閲覧した際には横幅300pxで表示される、これだけでもレスポンシブデザインと言えます😆❗️
@TBRmove
Жыл бұрын
コーディングも早いし、コメント返しも早い。恐れ入ります。と言うことはレスポンシブデザインの中にグリッドレイアウトを取り入れるって感じですかね。もうちょっと一通り見てから、またコメントします。手当たり次第見ていたら、頭の中ぐちゃぐちゃになってきました。ありがとうございます。
@hirocode
Жыл бұрын
認識あってます❕不明点あればいつでもコメントください😆❕