ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/10
NEW
『Go言語入門 制御構造編』をリリースしました
2024/09/05
NEW
【週刊ドットインストール】 レッスン制作の進捗、256timesのエディター更新、メンタリングの現場から
PREMIUM
詳解CSS グリッドレイアウト編
格子状のレイアウトに要素を配置することができる、CSSのグリッドレイアウトについて学んでいきます。
0%
このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
動画レッスン一覧
(16)
質問と回答
(59)
#01 グリッドレイアウトを使ってみよう
(01:02)
無料公開中
概要
利用例
未完了
#02 学習の準備を整えよう
(02:08)
無料公開中
index.html
styles.css
未完了
#03 要素を配置してみよう
(01:42)
無料公開中
要素の配置
未完了
#04 グリッドを設定してみよう
(03:00)
無料公開中
grid-template-columns
grid-template-rows
fr(action)
未完了
#05 gapで余白を設定しよう
(01:13)
gap
未完了
#06 repeat()、auto-fillを使ってみよう
(01:38)
repeat()
auto-fill
未完了
#07 minmax()、auto-fitを使ってみよう
(01:43)
minmax()
auto-fit
未完了
#08 grid-auto-rowsを使ってみよう
(01:22)
grid-auto-rows
未完了
#09 好きな位置に要素を配置してみよう
(01:51)
grid-column
grid-row
範囲の指定方法
未完了
#10 grid-column、grid-rowを使おう
(01:51)
grid-column
grid-row
範囲の指定方法
未完了
#11 グリッドラインに名前をつけよう
(02:38)
グリッドラインの名前の付け方
未完了
#12 grid-auto-flowを使ってみよう
(02:55)
grid-auto-flow
grid-auto-column
dense
未完了
#13 配置する領域を直感的に指定しよう
(01:40)
grid-template-areas
grid-area
未完了
#14 grid-template-areasを使ってみよう
(02:16)
grid-template-areas
grid-area
未完了
#15 要素を揃えるプロパティを見ていこう
(02:53)
justify-content
align-content
justify-items
align-items
justify-self
align-self
未完了
#16 グリッドや要素を揃えてみよう
(02:39)
justify-content
align-content
justify-items
align-items
justify-self
align-self
未完了
#01 グリッドレイアウトを使ってみよう
レッスンとは違う表示になりましたが、このまま続けていいのでしょうか?
2022年1月27日
ベンダープレフィックスとはなんですか?
2022年1月27日
caniuseで太枠が出てきません
2022年1月27日
#02 学習の準備を整えよう
VS codeでフォルダの削除するにはどうしたらいいですか?
2022年1月27日
#03 要素を配置してみよう
CSS が適応されません
2022年1月27日
hsl が反映されません
2022年1月27日
コードの書き間違いはないはずですが、ブラウザに反映されません
2022年1月27日
#04 グリッドを設定してみよう
auto-fit と auto-fill の違いを教えてください
2022年9月29日
グリッドを 3 等分するにはどうしたら良いですか?
2022年1月27日
現場でレスポンシブルサイトを作る際に使われることが多い技術はなんですか?
2022年1月27日
div と section の違いを教えて下さい
2022年1月27日
columnsとrowsの意味が分からない
2022年1月27日
auto-fillの挙動がよくわかりません
2022年1月27日
gridが反映されません。
2022年1月27日
#06 repeat()、auto-fillを使ってみよう
grid-template-rows の挙動について教えて下さい
2022年1月27日
#07 minmax()、auto-fitを使ってみよう
repeat(auto-fill,1fr) と書くとレッスンと同じように表示されません
2022年1月27日
box6 が box5 の右側に来るタイミングが理解できません
2022年1月27日
グリッド幅を固定したときの auto-fill と auto-fit の違いがわかりません
2022年1月27日
配置要素がなくなると余白が発生する理由は?
2022年1月27日
1fr ≧ x ≧ 100px なのに隙間ができる理由は?
2022年1月27日
display flexとgridの使い分けは?
2022年1月27日
auto-fillの使いどころを教えて下さい
2022年1月27日
#09 好きな位置に要素を配置してみよう
grid-row 、grid-column でマイナスの値は具体的にどういった場合に使用されますか?
2022年1月27日
#10 grid-column、grid-rowを使おう
grid-column の span の値を 2 から 3 にしたところ、予想とは違う結果になったのですが...
2022年1月27日
grid-columnのspan表記について教えて下さい
2022年1月27日
#11 グリッドラインに名前をつけよう
grid-template-columns と grid-template-rows を box1 ではなく container に書くのはなぜですか?
2022年6月9日
グリッドラインに名前をつけるメリットはありますか?
2022年1月27日
repeat()を使用した場合にもグリッドラインに名前をつけられますか?
2022年1月27日
グリッドラインを表示することはできますか?
2022年1月27日
#12 grid-auto-flowを使ってみよう
コードでは 4 行と指定しているのに、ブラウザには 2 行分しか表示されません
2022年4月4日
grid-template-columns を repeat(auto-fill, 100px); と指定しても良いのでしょうか?
2022年1月27日
プロパティの値をまとめて指定する場合と 2 つに分けて指定する場合で表示が変わってしまいます
2022年1月27日
columnとcolumnsの使い分けには決まりがあるのでしょうか
2022年1月27日
divはなぜ横方向いっぱいに広がるのですか?
2022年1月27日
denseで余白を埋める処理がよくわかりません
2022年1月27日
「grid-auto-columns: 100px;」が何をしているかわかりません
2022年1月27日
グリッドの外ではその部分に関しては親要素の設定値に従う、ということでしょうか
2022年1月27日
#13 配置する領域を直感的に指定しよう
最初の赤色のボックスの作り方が違っているような気がします
2022年1月27日
#14 grid-template-areasを使ってみよう
なぜ grid-template-areas でルールに従っていない部分があると BOX の領域外に出るのですか?
2022年2月10日
コードをコピーしても正しく表示されません
2022年1月27日
grid-template-area で思うように表示できません
2022年1月27日
一部の領域を「 . 」で消すと他の領域が横長になって右側に移動するのはどうしてですか?
2022年1月27日
grid-template-aresの挙動について教えて下さい
2022年1月27日
grid-template-areasで「1」を使ったらうまくいきませんでした
2022年1月27日
「g」と「b」を消したらおかしくなりました
2022年1月27日
飛び石のように配置するとはどういう意味ですか?
2022年1月27日
「.」の使い方がよくわかりません
2022年1月27日
#15 要素を揃えるプロパティを見ていこう
flex- は入れても入れなくてもいいのですか?
2022年1月27日
列と行と縦横に関して混乱しています
2022年1月27日
#16 グリッドや要素を揃えてみよう
align-self の flex-start と start の違いはなんですか?
2022年6月22日
grid に罫線をつけることはできますか?
2022年1月27日
justify-content: center; と align-content: center; を設定した時になぜ動画のような位置にくるのですか?
2022年1月27日
グリッドレイアウトを使ったサイトがあれば教えてください
2022年1月27日
justify-contents と alingn-contetns は両方必要ですか?
2022年1月27日
なぜ > が必要なのですか?
2022年1月27日
グリッドの領域に色を付けたい場合はどうしたらいいですか?
2022年1月27日
各要素内のテキストを上下中央揃えにすることは可能ですか?
2022年1月27日
justify-self と justify-items の違いがわかりません
2022年1月27日
各box間で間隔があくのはなぜですか?
2022年1月27日
リリース情報(note)
記事はありません。
詳細情報
最終更新日
2020年1月16日
バージョン情報
Chrome 79.0 / Visual Studio Code 1.41.1