CSS/GridLayout をテンプレートにして作成

開始行:
*CSS｜GridLayout ~ CSS Grid Layout（グリッドレイアウト）は、格子状の配置・結... ブラウザの対応状況：https://caniuse.com/#search=Grid%20La... ~ **はじめに ***Grid Layout の仕様 親要素（コンテナ）に display: grid; と書くだけで、子要素... -HTML <div id="container"> <nav>メニュー</nav> <article>記事</article> <aside>サイドバー</aside> </div> -CSS #container { display: grid; grid-gap: 10px; grid-template-columns: 1fr 3fr 1fr; } ~ ***用語の理解 -コンテナ グリッド全体を囲む要素です。以下の指定で コンテナ になり... display: grid; または display: inline-grid; -アイテム コンテナの子要素。コンテナの直接の子要素はすべてアイテム... -トラック グリッドの行および列（ラインとラインの間） -ライン グリッドを分ける垂直および水平の線。グリッドの上下左右そ... -セル 文字通りグリッドの最小単位 -エリア 複数のセル結合（エリアは命名可能、アイテムを配置できます。 ~ ~ **実装手順 ***1. コンテナ要素に display:grid; を指定 #container { display: grid; } ~ ***2. コンテナ内で各トラックの大きさを指定 ・grid-template-rows: 行のトラック高を半角スペースで区切... ・grid-template-columns: 列のトラック幅を半角スペースで区... #container { display: grid; grid-template-rows: 100px 200px; grid-template-columns: 1fr 3fr 1fr; } ~ ***3-1. アイテムの配置を指定　事例１：ラインの番号で指定... |　|CENTER:#item|　| |　|　|　| //・grid-row: アイテムが占める行のライン番号をスラッシュ... //・grid-column: アイテムが占める列のライン番号をスラッシ... 例えば、2行ｘ3列（2トラック x 3トラック）のグリッドレイア... #item { grid-row: 1 / 2; grid-column: 2 / 3; } 要素がセル相当の場合は、スラッシュの後ろは省略できます。 #item { grid-row: 1; grid-column: 2; } ~ ***3-2. アイテムの配置を指定　事例２：結合したセルをライ... |　|　|CENTER:#item| |　|　|~| 同様の 2行ｘ3列のグリッドレイアウトで、上図のような場所に... #item { grid-row: 1 / 3; grid-column: 3 / 4; } 右（下）のラインの番号の代わりに、結合する数を記述する方... その場合スラッシュのあとに / span 結合数 を記述します。 #item { grid-row: 1 / span 2; grid-column: 3 / span 1; } ~ ***3-3. アイテムの配置を指定　事例３：エリアに名前を付け... |CENTER:A|CENTER:B| |~|CENTER:C| 非常に直感的に見える方法です。以下のプロパティーを使いま... -''grid-template-areas''：エリアを作ってそれぞれに名前を... 　＞ コンテナのスタイルとして記述 -''grid-area''：当該アイテム が使うエリアの名前を指定する 　＞ アイテムのスタイルとして記述 上図のような構成にしたい場合、CSSは見たままのかたちで名前... #container { grid-template-areas: "AreaA AreaB" "AreaA AreaC"; } ダブルクォーテーションで囲まれた1行が、グリッドの1行を意... あとは、アイテムに grid-area を記述すればOKです。 #itemA { grid-area: areaA; } ~ ***3-4. アイテムの配置を指定　事例４：エリアに名前を付け... 上の事例の展開バージョンです。 grid-template-areasの記述... #container { grid-template-areas: " header header header " " nav contents aside " " ..... footer ..... "; } ~ その他、仕様の詳細については以下を参照ください。 --[[CSS グリッドレイアウト（MDN）>https://developer.mozil... --[[グリッドレイアウトの基本概念（MDN）>https://developer... ~ ~ ***事例１　写真とコメントをセットで並べる |CENTER:写真１|CENTER:コメント１| |CENTER:写真２|CENTER:コメント２| |CENTER:写真３|CENTER:コメント３| -index.html <div id="container"> <div id="p1"><img src="sample01.jpg"></div> <div id="c1">コメント１</div> <div id="p2"><img src="sample02.jpg"></div> <div id="c2">コメント２</p></div> </div> -style.css #container { display: grid; grid-template-columns: 500px 300px } #p1 { grid-row: 1; grid-column: 1; } #c1 { grid-row: 1; grid-column: 2; } #p2 { grid-row: 2; grid-column: 1; } #c2 { grid-row: 2; grid-column: 2; } &aname(sample); ~ ***事例２ ページレイアウト全体に GridLayoutを適用した例 -DEMO：https://koichi-inoue.github.io/GridLayout01/ -CODE：https://github.com/koichi-inoue/GridLayout01/ ~ ~

終了行:
*CSS｜GridLayout ~ CSS Grid Layout（グリッドレイアウト）は、格子状の配置・結... ブラウザの対応状況：https://caniuse.com/#search=Grid%20La... ~ **はじめに ***Grid Layout の仕様 親要素（コンテナ）に display: grid; と書くだけで、子要素... -HTML <div id="container"> <nav>メニュー</nav> <article>記事</article> <aside>サイドバー</aside> </div> -CSS #container { display: grid; grid-gap: 10px; grid-template-columns: 1fr 3fr 1fr; } ~ ***用語の理解 -コンテナ グリッド全体を囲む要素です。以下の指定で コンテナ になり... display: grid; または display: inline-grid; -アイテム コンテナの子要素。コンテナの直接の子要素はすべてアイテム... -トラック グリッドの行および列（ラインとラインの間） -ライン グリッドを分ける垂直および水平の線。グリッドの上下左右そ... -セル 文字通りグリッドの最小単位 -エリア 複数のセル結合（エリアは命名可能、アイテムを配置できます。 ~ ~ **実装手順 ***1. コンテナ要素に display:grid; を指定 #container { display: grid; } ~ ***2. コンテナ内で各トラックの大きさを指定 ・grid-template-rows: 行のトラック高を半角スペースで区切... ・grid-template-columns: 列のトラック幅を半角スペースで区... #container { display: grid; grid-template-rows: 100px 200px; grid-template-columns: 1fr 3fr 1fr; } ~ ***3-1. アイテムの配置を指定　事例１：ラインの番号で指定... |　|CENTER:#item|　| |　|　|　| //・grid-row: アイテムが占める行のライン番号をスラッシュ... //・grid-column: アイテムが占める列のライン番号をスラッシ... 例えば、2行ｘ3列（2トラック x 3トラック）のグリッドレイア... #item { grid-row: 1 / 2; grid-column: 2 / 3; } 要素がセル相当の場合は、スラッシュの後ろは省略できます。 #item { grid-row: 1; grid-column: 2; } ~ ***3-2. アイテムの配置を指定　事例２：結合したセルをライ... |　|　|CENTER:#item| |　|　|~| 同様の 2行ｘ3列のグリッドレイアウトで、上図のような場所に... #item { grid-row: 1 / 3; grid-column: 3 / 4; } 右（下）のラインの番号の代わりに、結合する数を記述する方... その場合スラッシュのあとに / span 結合数 を記述します。 #item { grid-row: 1 / span 2; grid-column: 3 / span 1; } ~ ***3-3. アイテムの配置を指定　事例３：エリアに名前を付け... |CENTER:A|CENTER:B| |~|CENTER:C| 非常に直感的に見える方法です。以下のプロパティーを使いま... -''grid-template-areas''：エリアを作ってそれぞれに名前を... 　＞ コンテナのスタイルとして記述 -''grid-area''：当該アイテム が使うエリアの名前を指定する 　＞ アイテムのスタイルとして記述 上図のような構成にしたい場合、CSSは見たままのかたちで名前... #container { grid-template-areas: "AreaA AreaB" "AreaA AreaC"; } ダブルクォーテーションで囲まれた1行が、グリッドの1行を意... あとは、アイテムに grid-area を記述すればOKです。 #itemA { grid-area: areaA; } ~ ***3-4. アイテムの配置を指定　事例４：エリアに名前を付け... 上の事例の展開バージョンです。 grid-template-areasの記述... #container { grid-template-areas: " header header header " " nav contents aside " " ..... footer ..... "; } ~ その他、仕様の詳細については以下を参照ください。 --[[CSS グリッドレイアウト（MDN）>https://developer.mozil... --[[グリッドレイアウトの基本概念（MDN）>https://developer... ~ ~ ***事例１　写真とコメントをセットで並べる |CENTER:写真１|CENTER:コメント１| |CENTER:写真２|CENTER:コメント２| |CENTER:写真３|CENTER:コメント３| -index.html <div id="container"> <div id="p1"><img src="sample01.jpg"></div> <div id="c1">コメント１</div> <div id="p2"><img src="sample02.jpg"></div> <div id="c2">コメント２</p></div> </div> -style.css #container { display: grid; grid-template-columns: 500px 300px } #p1 { grid-row: 1; grid-column: 1; } #c1 { grid-row: 1; grid-column: 2; } #p2 { grid-row: 2; grid-column: 1; } #c2 { grid-row: 2; grid-column: 2; } &aname(sample); ~ ***事例２ ページレイアウト全体に GridLayoutを適用した例 -DEMO：https://koichi-inoue.github.io/GridLayout01/ -CODE：https://github.com/koichi-inoue/GridLayout01/ ~ ~

ページ名: