Размер видео: 1280 X 720853 X 480640 X 360
Показать панель управления
Автовоспроизведение
Автоповтор
調べても使い方がわからなかったサブグリッドを、よくある例で解説いただきすごくわかりやすかったです。ありがとうございます❗️
こちらこそ嬉しいコメントいただきありがとうございます😭❗️
そもそもgridがこんなに便利だったの知りませんでしたーauto-fitとminmaxの組み合わせもヤバいです！今週後半からカード型のメニュー作る予定なので早速取り入れさせていただきます。いつも本当にありがとうございます！！
コメントありがとうございます❗️カード型リストとグリッドレイアウトの相性抜群なのでぜひ使ってみてください😆❗️
便利だとは知りつつも、なんとなく敬遠していたsubgridですが、この動画のおかげでばっちり理解できました。ありがとうございます！一点質問がありまして、この動画の趣旨とは異なるのですが、6:56あたりで、imgタグに対してwidth: 100%だけではなく、max-width: 100%も記述していたかと思います。width: 100%だけで指定が済んでいるのでは？と直感的に思ったのですが、あえてmax-widthも指定した方が良い理由などがあるのでしょうか。imgタグについては、divで囲ってあげないとサイズ調整がうまくいかない場合（？）があったりで、正直扱い方がよくわからない部分があります・・・
確かに！！！😅おっしゃる通りです🙇❗️imgタグにmax-width: 100%; の指定は、画像が大きく表示されないように普段はreset.cssとか基本のスタイルで当てています。今回無意識で書いてましたが、width: 100%;指定してるので不要です🙇
@@hirocode そうだったのですね！確認&返信いただきありがとうございます！今日早速、サブグリッドを使ったコーディングをしてみました。以下のようなカードを複数並べたレイアウトなのですが、li一つ一つを更にaタグで覆っているので、subgridの中にさらにsubgridの入れ子を作らなければ、中身の高さを統一することができませんでした・・・（ulを使いたい→子はliじゃないといけない→カード全体をリンクにもしたい→こうなりました笑）僕のやり方がおかしいような気もするのですが、subgridの要素の中に更にsubgridを指定して、祖先要素のgridを継承するようなやり方って実際するのでしょうか😅 何だか強引すぎるような・・・そもそもulとliを使うのを辞めるべきなのかな・・・2023.12.19記事タイトルタグ1タグ2この記事を読む（↑このliが複数並ぶ・・・）
最後のカードをたくさん敷き詰めた実演の際に、cardsのgapを大きくすると、cardのsubgridのgapを0に指定しても相殺されずに、card内のコンテンツ同士の間に隙間ができてしまうのですが、これを回避する方法はありませんか？
試しにやってみましたがそうなりますね😱❗️僕もその点解決できなかったです💦 とりあえずの対応としてはcard下に余白設ける形になりますかね🤔
@@hirocode subgridを使う際によく頭を抱えてしまう問題でした😅 いくら調べても解決策に辿り着けなかったので、モヤモヤしています笑 card自体にmargin-bottomを指定して、（自動折り返しで何枚になるか分からない）最終行のcardの余分なマージンは、cardsや次にくる要素のネガティブマージンとかで埋め合わせるのが一旦は良いのかもしれないですね。これに気づけただけでも嬉しいです。ありがとうございます！！🙌
SASSなど、色々とcssの種類がある中で、どの言語を覚えたら全て触れますか？
scss記法覚えておけば大丈夫だと思います😆❗️
これって、画像の大きさが縦長のやつがあるとしたらバラバラになりますか？
バラバラになります！なので、中のimgタグに対してaspect-ratio: 4 / 3; object-fit: cover; みたいに指定すると同じ大きさになります😆❗️
@@hirocode ありがとうございます！この解決策がどうしてもわからなかったです！
subgridの親に指定してあるgap値が大きいと相殺できない現象なんとかならないものか、、、行の高さが無駄に広がってしまう😭
このバグ？なんなんでしょうね...
なんで、無料でここまでのコンテンツを公開してくださるのですか！！！素晴らしいです！
そう言っていただけて嬉しいです😭❗️ありがとうございます🙇❗️
@@hirocode こちらこそありがとうございます！職業訓練を終えて今就職したばかりなので、これから色んな場面で活かさせていただきますね！m(_ _)m
autoHeighJs使わなくていいのか
jsやjquery使わずにcssで実装できる範囲が徐々に増えてますね😊❗️
![FNAF vs TF2 - Episode 2 [SFM]](http://i.ytimg.com/vi/z5b3V2-VLb0/mqdefault.jpg)
調べても使い方がわからなかったサブグリッドを、よくある例で解説いただきすごくわかりやすかったです。ありがとうございます❗️
こちらこそ嬉しいコメントいただきありがとうございます😭❗️
そもそもgridがこんなに便利だったの知りませんでしたー
auto-fitとminmaxの組み合わせもヤバいです！
今週後半からカード型のメニュー作る予定なので早速取り入れさせていただきます。
いつも本当にありがとうございます！！
コメントありがとうございます❗️カード型リストとグリッドレイアウトの相性抜群なのでぜひ使ってみてください😆❗️
便利だとは知りつつも、なんとなく敬遠していたsubgridですが、この動画のおかげでばっちり理解できました。ありがとうございます！
一点質問がありまして、この動画の趣旨とは異なるのですが、6:56あたりで、imgタグに対してwidth: 100%だけではなく、max-width: 100%も記述していたかと思います。
width: 100%だけで指定が済んでいるのでは？と直感的に思ったのですが、あえてmax-widthも指定した方が良い理由などがあるのでしょうか。
imgタグについては、divで囲ってあげないとサイズ調整がうまくいかない場合（？）があったりで、正直扱い方がよくわからない部分があります・・・
確かに！！！😅
おっしゃる通りです🙇❗️
imgタグにmax-width: 100%; の指定は、画像が大きく表示されないように普段はreset.cssとか基本のスタイルで当てています。
今回無意識で書いてましたが、width: 100%;指定してるので不要です🙇
@@hirocode そうだったのですね！確認&返信いただきありがとうございます！
今日早速、サブグリッドを使ったコーディングをしてみました。
以下のようなカードを複数並べたレイアウトなのですが、li一つ一つを更にaタグで覆っているので、subgridの中にさらにsubgridの入れ子を作らなければ、中身の高さを統一することができませんでした・・・（ulを使いたい→子はliじゃないといけない→カード全体をリンクにもしたい→こうなりました笑）
僕のやり方がおかしいような気もするのですが、subgridの要素の中に更にsubgridを指定して、祖先要素のgridを継承するようなやり方って実際するのでしょうか😅 何だか強引すぎるような・・・そもそもulとliを使うのを辞めるべきなのかな・・・
2023.12.19
記事タイトル
タグ1
タグ2
この記事を読む
（↑このliが複数並ぶ・・・）
最後のカードをたくさん敷き詰めた実演の際に、cardsのgapを大きくすると、cardのsubgridのgapを0に指定しても相殺されずに、card内のコンテンツ同士の間に隙間ができてしまうのですが、これを回避する方法はありませんか？
試しにやってみましたがそうなりますね😱❗️僕もその点解決できなかったです💦 とりあえずの対応としてはcard下に余白設ける形になりますかね🤔
@@hirocode
subgridを使う際によく頭を抱えてしまう問題でした😅 いくら調べても解決策に辿り着けなかったので、モヤモヤしています笑
card自体にmargin-bottomを指定して、（自動折り返しで何枚になるか分からない）最終行のcardの余分なマージンは、cardsや次にくる要素のネガティブマージンとかで埋め合わせるのが一旦は良いのかもしれないですね。これに気づけただけでも嬉しいです。ありがとうございます！！🙌
SASSなど、色々とcssの種類がある中で、どの言語を覚えたら全て触れますか？
scss記法覚えておけば大丈夫だと思います😆❗️
これって、画像の大きさが縦長のやつがあるとしたらバラバラになりますか？
バラバラになります！なので、中のimgタグに対してaspect-ratio: 4 / 3; object-fit: cover; みたいに指定すると同じ大きさになります😆❗️
@@hirocode ありがとうございます！
この解決策がどうしてもわからなかったです！
subgridの親に指定してあるgap値が大きいと相殺できない現象なんとかならないものか、、、
行の高さが無駄に広がってしまう😭
このバグ？なんなんでしょうね...
なんで、無料でここまでのコンテンツを公開してくださるのですか！！！素晴らしいです！
そう言っていただけて嬉しいです😭❗️ありがとうございます🙇❗️
@@hirocode こちらこそありがとうございます！職業訓練を終えて今就職したばかりなので、これから色んな場面で活かさせていただきますね！m(_ _)m
autoHeighJs使わなくていいのか
jsやjquery使わずにcssで実装できる範囲が徐々に増えてますね😊❗️