Размер видео: 1280 X 720853 X 480640 X 360
Показать панель управления
Автовоспроизведение
Автоповтор
ものすごく分かりやすくて、とても助かりました。ありがとうございます！
嬉しいコメントいただきありがとうございます🙇♀️❗️
gridって教材とかでもよく使われているのですが、どこの学習コンテンツでも全く学ばないため困っていました。こちらの動画とってもわかりやすかったです！ありがとうございました。
そう言っていただけて作った甲斐があります😭ありがとうございます🙇
分かりやすかったです。話す口調やスピードも聞きやすいですね。
嬉しいお言葉いただきありがとうございます😭❗️
一度もグリッド使ったことがなく。。いつもわかりやすくて、聞きやすい話し方ですね。ありがとうございます！
嬉しいコメントいただきありがとうございます😊‼️
@@hirocode 仕事をしながら独学中です！心が折れそうになりますが、なりたい自分になれるよう頑張ります！
今までなんとなく使ってたgridの理解が深まりました。わかりやしいです！ありがとうございます！
嬉しいです😆ありがとうございます❗️
メチャクチャ良い勉強になります。いろんな使い方教えて頂きたいです。
ありがとうございます😊♪グリッドレイアウトの第２弾作ります❗️
今までfrの意味が理解できず、とりあえず数字を入れてみて調整してたんですがこれから頭の中でイメージできそうです。とてもわかりやすかったです。
わかりやすいと言っていただけてとっても嬉しいです😭❗️ありがとうございます🙇♂️
分かりやすい！
嬉しいコメントいただきありがとうございます🙇♂️‼️
わかりやすいー！gridの解説は、あまりなかったので助かりました。いつもありがとうございます＾＾
嬉しいですー😭ありがとうございます🙇♂️❗️
とてもわかりやすかったです😆グリッドレイアウトの便利な使い方、楽しみにしています。gapを使った余白の便利の使い方も、わからない部分があるので、解説してもらえると嬉しいです😊
嬉しいです！ありがとうございます😊♪続編作ります❕
いつも分かりやすく説明していただけて大変助かってます！display:flexをつかってますが、gridの方が便利になってきてるようなので、変えていきたいなと思ってます。subgridについて便利な使い方があれば教えていただきたいです。
ありがとうございます😆❗️今度subgridの動画上げます❗️❗️
すご！勉強になります！
ちなみに、このグリッドはテーブル(表)とかの変わりに使うのはどうですかね？HTMLのタグ的なものとかを考慮した感じだと微妙でしょうか？？
ありがとうございます😆❗️
例えば、テーブルのレイアウトにグリッドレイアウトを使用する際には、tableタグやtbodyタグにdisplay: grid;を指定する形が良いと思います❗️
いつも勉強させて頂いてます！もしよければ、ファーストビューを動画背景（レスポンシブ）にするやり方など動画にしてもらえると嬉しいです😂これからも応援してます！
いつもご覧いただきありがとうございます🙇♂️❗すぐにとはいかないかもですが、ご要望いただいた動画作ってみます😆❗️ありがとうございます🙇♂️🙇♂️🙇♂️❗️❗️
グリッドレイアウトについてとてもわかりやすく教えてくださりありがとうございます。ところで、bodyタグに対してmin-height:100vhにするだけでなく、display:grid;も指定するのは、どのように理解したらよいでしょうか。教えていただけたら幸いです。
コメントいただきありがとうございます😊body直下の.gridは高さを持たないため、bodyタグにdisplay: grid;を指定しないと最低高が中のコンテンツに依存してしまいます！.gridを空の状態かつ背景色をつけて、bodyのdisplay: grid;をあり・なしにしてみると違いがわかると思います❗️
@@hirocode 実際にbodyのdisplay:grid;をあり、なしにしてみて確認できました。早速教えてくださって本当にありがとうございます。
関係ないですが、VS Codeでカーソルが伸縮してアニメーションして見えるの、面白いですね！拡張機能ですか？
確かVSCodeのsettings.jsonに直がきで設定してたと思います❗️❗️必要あれば調べてみます😊！
@@hirocode すごいアイデアですね！カーソル位置を見失わなくなるので、良いなと思いました😋
初心者です。グリッドレイアウト＝レスポンシブデザインなんでしょうか？レスポンシブには、グリッドレイアウトは絶対なんでしょうか？このレベルの質問ですいません。
いえいえ、コメントいただきありがとうございます😊♪グリッドレイアウトは画面を格子状に分割してブロック状にした上で、ブロックに合わせて（または組み合わせて）要素を配置していくといったデザイン手法です。この動画ではCSSのグリッドレイアウトのこと示していて、CSSで上記グリッドレイアウトの機能を持つのがdisplay: grid;の指定にあたります。なので、CSSのグリッドレイアウト= display: grid;という解釈です！また、レスポンシブデザインについてはまた別の意味で、サイトを表示するデバイス（PC,スマホなど）に応じて要素の配置やサイズを柔軟に変化させる手法になります。例えば、ウェブサイト上にPCで見ると横幅600pxで表示される画像があるとして、これをスマホで閲覧した際には横幅300pxで表示される、これだけでもレスポンシブデザインと言えます😆❗️
コーディングも早いし、コメント返しも早い。恐れ入ります。と言うことはレスポンシブデザインの中にグリッドレイアウトを取り入れるって感じですかね。もうちょっと一通り見てから、またコメントします。手当たり次第見ていたら、頭の中ぐちゃぐちゃになってきました。ありがとうございます。
認識あってます❕不明点あればいつでもコメントください😆❕
神動画で笑った
ありがとうございます🙇❗️
14:40 「次にカラムのところ消して」って所どうやったんですか？
command + / のショートカットキーで選択箇所がコメントアウトされます❗
@@hirocode ありがとうございます！！
bootstrapのgridシステムを普段から使っている者なのですが、このdisplay:grid;との使い分けはどのようにするのが普通なのでしょうか？
コメントいただきありがとうございます😊♪レイアウト組むにも色んなやり方があると思います。今回出てきたレイアウト例で言うと、flexboxやcalcなどでも実装可能なので、選択肢をいくつも持っていた上で、一番使いやすいものを選択するで良いと思います😆❗️
21:10 CSSのgrid要素内で指定しているgrid-templateプロパティについて一括指定で幅と高さをそれぞれ指定していますが、ある子要素の部分だけは分割せず幅全体を使って配置したい(Excelでいうセルの結合みたいな感じの)ときは、動画のように"head head"と指定すれば他の幅の割合が240px : 1frでも、headの幅だけは1frになってくれるのでしょうか？それとも、幅の割合は240px : 1frのままで"head"に指定した要素が240pxの要素と1frの要素にそれぞれ表示される感じになるのでしょうか？
コメントいただきありがとうございます😊♪エクセルの結合と同じイメージです！列の幅が240pxと1fr幅の2列あるとして、head headの行では、その２列が結合されている感じです。なので、2列分の横幅を持つエリアができる形です😆❗️
ものすごく分かりやすくて、とても助かりました。ありがとうございます！
嬉しいコメントいただきありがとうございます🙇♀️❗️
gridって教材とかでもよく使われているのですが、どこの学習コンテンツでも全く学ばないため困っていました。
こちらの動画とってもわかりやすかったです！ありがとうございました。
そう言っていただけて作った甲斐があります😭ありがとうございます🙇
分かりやすかったです。話す口調やスピードも聞きやすいですね。
嬉しいお言葉いただきありがとうございます😭❗️
一度もグリッド使ったことがなく。。いつもわかりやすくて、聞きやすい話し方ですね。ありがとうございます！
嬉しいコメントいただきありがとうございます😊‼️
@@hirocode
仕事をしながら独学中です！心が折れそうになりますが、なりたい自分になれるよう頑張ります！
今までなんとなく使ってたgridの理解が深まりました。
わかりやしいです！ありがとうございます！
嬉しいです😆ありがとうございます❗️
メチャクチャ良い勉強になります。
いろんな使い方教えて頂きたいです。
ありがとうございます😊♪グリッドレイアウトの第２弾作ります❗️
今までfrの意味が理解できず、とりあえず数字を入れてみて調整してたんですがこれから頭の中でイメージできそうです。とてもわかりやすかったです。
わかりやすいと言っていただけてとっても嬉しいです😭❗️ありがとうございます🙇♂️
分かりやすい！
嬉しいコメントいただきありがとうございます🙇♂️‼️
わかりやすいー！
gridの解説は、あまりなかったので助かりました。いつもありがとうございます＾＾
嬉しいですー😭ありがとうございます🙇♂️❗️
とてもわかりやすかったです😆グリッドレイアウトの便利な使い方、楽しみにしています。gapを使った余白の便利の使い方も、わからない部分があるので、解説してもらえると嬉しいです😊
嬉しいです！ありがとうございます😊♪続編作ります❕
いつも分かりやすく説明していただけて大変助かってます！
display:flexをつかってますが、gridの方が便利になってきてるようなので、変えていきたいなと思ってます。
subgridについて便利な使い方があれば教えていただきたいです。
ありがとうございます😆❗️今度subgridの動画上げます❗️❗️
すご！勉強になります！
ちなみに、このグリッドはテーブル(表)とかの変わりに使うのはどうですかね？
HTMLのタグ的なものとかを考慮した感じだと微妙でしょうか？？
ありがとうございます😆❗️
例えば、テーブルのレイアウトにグリッドレイアウトを使用する際には、tableタグやtbodyタグにdisplay: grid;を指定する形が良いと思います❗️
いつも勉強させて頂いてます！
もしよければ、ファーストビューを動画背景（レスポンシブ）にするやり方など動画にしてもらえると嬉しいです😂これからも応援してます！
いつもご覧いただきありがとうございます🙇♂️❗すぐにとはいかないかもですが、ご要望いただいた動画作ってみます😆❗️ありがとうございます🙇♂️🙇♂️🙇♂️❗️❗️
グリッドレイアウトについてとてもわかりやすく教えてくださりありがとうございます。
ところで、bodyタグに対してmin-height:100vhにするだけでなく、display:grid;も指定するのは、どのように理解したらよいでしょうか。教えていただけたら幸いです。
コメントいただきありがとうございます😊
body直下の.gridは高さを持たないため、bodyタグにdisplay: grid;を指定しないと最低高が中のコンテンツに依存してしまいます！.gridを空の状態かつ背景色をつけて、bodyのdisplay: grid;をあり・なしにしてみると違いがわかると思います❗️
@@hirocode 実際にbodyのdisplay:grid;をあり、なしにしてみて確認できました。早速教えてくださって本当にありがとうございます。
関係ないですが、VS Codeでカーソルが伸縮してアニメーションして見えるの、面白いですね！拡張機能ですか？
確かVSCodeのsettings.jsonに直がきで設定してたと思います❗️❗️必要あれば調べてみます😊！
@@hirocode
すごいアイデアですね！カーソル位置を見失わなくなるので、良いなと思いました😋
初心者です。グリッドレイアウト＝レスポンシブデザインなんでしょうか？レスポンシブには、グリッドレイアウトは絶対なんでしょうか？このレベルの質問ですいません。
いえいえ、コメントいただきありがとうございます😊♪
グリッドレイアウトは画面を格子状に分割してブロック状にした上で、ブロックに合わせて（または組み合わせて）要素を配置していくといったデザイン手法です。
この動画ではCSSのグリッドレイアウトのこと示していて、CSSで上記グリッドレイアウトの機能を持つのがdisplay: grid;の指定にあたります。
なので、CSSのグリッドレイアウト= display: grid;という解釈です！
また、レスポンシブデザインについてはまた別の意味で、サイトを表示するデバイス（PC,スマホなど）に応じて要素の配置やサイズを柔軟に変化させる手法になります。
例えば、ウェブサイト上にPCで見ると横幅600pxで表示される画像があるとして、これをスマホで閲覧した際には横幅300pxで表示される、これだけでもレスポンシブデザインと言えます😆❗️
コーディングも早いし、コメント返しも早い。恐れ入ります。と言うことはレスポンシブデザインの中にグリッドレイアウトを取り入れるって感じですかね。もうちょっと一通り見てから、またコメントします。手当たり次第見ていたら、頭の中ぐちゃぐちゃになってきました。ありがとうございます。
認識あってます❕不明点あればいつでもコメントください😆❕
神動画で笑った
ありがとうございます🙇❗️
14:40 「次にカラムのところ消して」って所どうやったんですか？
command + / のショートカットキーで選択箇所がコメントアウトされます❗
@@hirocode ありがとうございます！！
bootstrapのgridシステムを普段から使っている者なのですが、このdisplay:grid;との使い分けはどのようにするのが普通なのでしょうか？
コメントいただきありがとうございます😊♪
レイアウト組むにも色んなやり方があると思います。
今回出てきたレイアウト例で言うと、flexboxやcalcなどでも実装可能なので、選択肢をいくつも持っていた上で、一番使いやすいものを選択するで良いと思います😆❗️
21:10 CSSのgrid要素内で指定しているgrid-templateプロパティについて
一括指定で幅と高さをそれぞれ指定していますが、ある子要素の部分だけは分割せず幅全体を使って配置したい(Excelでいうセルの結合みたいな感じの)ときは、動画のように"head head"と指定すれば他の幅の割合が240px : 1frでも、headの幅だけは1frになってくれるのでしょうか？
それとも、幅の割合は240px : 1frのままで"head"に指定した要素が240pxの要素と1frの要素にそれぞれ表示される感じになるのでしょうか？
コメントいただきありがとうございます😊♪
エクセルの結合と同じイメージです！
列の幅が240pxと1fr幅の2列あるとして、
head headの行では、その２列が結合されている感じです。
なので、2列分の横幅を持つエリアができる形です😆❗️