WEB開発講座 個別編２ 「gridレイアウト」徹底理解
使用するファイルです。すべてを適当なフォルダに以下のように納めるといいです。
webstudy_grid
(*.html)
css
(*.css)
1.flexboxレイアウトとgridレイアウトの相違点
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css"> <title>Document</title> </head> <body> <div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
* { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; width: 500px; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } |
２グリッドデザインの基礎
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="./css/grid01.css"> <title>CSS Grid starting point</title> </head> <body> <h1>Simple grid example</h1> <div class="container"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> <div>Seven</div> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.container { } body { width: 90%; max-width: 900px; margin: 2em auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207 232 220); border: 2px solid rgb(79 185 227); } |
３．グリッドレイアウト
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="./css/grid02.css"> <title>CSS Grid - line-based placement starting point</title> </head> <body> <div class="container"> <header>This is my lovely blog</header> <article> <h1>My article</h1> <p> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> <p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> </article> <aside> <h2>Other things</h2> <p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. </p> </aside> <footer>Contact me@mysite.com</footer> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
body { width: 90%; max-width: 900px; margin: 2em auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; } .container { display: grid; grid-template-areas: "header header" "sidebar content" "footer footer"; grid-template-columns: 1fr 3fr; gap:20px; } header{ grid-area: header; } article{ grid-area: content; } aside{ grid-area: sidebar; } footer{ grid-area: footer; } header, footer { border-radius: 5px; padding: 10px; background-color: rgb(207 232 220); border: 2px solid rgb(79 185 227); } aside { border-right: 1px solid #999; } |
４．グリッドの中にもグリッド
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="./css/grid03.css"> <title>CSS Grid - line-based placement starting point</title> </head> <div class="container"> <header>This is my lovely blog</header> <div class="articles"> <article> <h1>Darmok and Jalad had a picnic at Tanagra</h1> <p> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> <button>Read more</button> </article> <article> <h1>Temba held his arms wide</h1> <p> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et ... </p> <button>Read more</button> </article> <article> <h1>Gilgamesh, a king, at Uruk</h1> <p> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta ... </p> <button>Read more</button> </article> </div> <aside> <h2>Other things</h2> <p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. </p> <button>Read more</button> </aside> <footer>Contact me@example.com</footer> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
body { width: 90%; max-width: 900px; margin: 2em auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; } header, footer { border-radius: 5px; padding: 10px; background-color: rgb(207 232 220); border: 2px solid rgb(79 185 227); } header { grid-area: header; } aside { border-right: 1px solid #999; grid-area: sidebar; padding-right: 10px; font-size: 0.8em; } footer { grid-area: footer; } .container { display: grid; grid-template-areas: "header header" "sidebar content" "footer footer"; grid-template-columns: 1fr 3fr; gap: 20px; } .articles { display: grid; grid-template-rows: 2fr 1fr 1fr; gap: inherit; } article { padding: 10px; border: 2px solid rgb(79 185 227); border-radius: 5px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="./css/grid04.css"> <title>CSS Grid - line-based placement starting point</title> </head> <body> <div class="container"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div id="subgrid"> <div>Five</div> <div>Six</div> <div>Seven</div> <div>Eight</div> </div> <div>Nine</div> <div>Ten</div> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
body { width: 90%; max-width: 900px; margin: 2em auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; } .container div { border-radius: 5px; padding: 10px; background-color: rgb(207 232 220); border: 2px solid rgb(79 185 227); } .container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(1, 1fr); gap: 10px; } #subgrid { grid-column: 1 / 4; grid-row: 2 / 4; display: grid; gap: inherit; grid-template-columns: subgrid; grid-template-rows: 2fr 1fr; } |
５レイアウトテンプレート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="./css/grid05.css"> <title>CSS Grid - line-based placement starting point</title> </head> <body> <div class="container"> <header>This is my lovely blog</header> <article> <h1>My article</h1> <p> Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> <p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> </article> <aside> <h2>Other things</h2> <p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. </p> </aside> <footer>Contact me@example.com</footer> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
.container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; } header { grid-column: 1 / 13; grid-row: 1; } article { grid-column: 4 / 13; grid-row: 2; } aside { grid-column: 1 / 4; grid-row: 2; } footer { grid-column: 1 / 13; grid-row: 3; } body { width: 90%; max-width: 900px; margin: 2em auto; font: 0.9em/1.2 Arial, Helvetica, sans-serif; } header, footer { border-radius: 5px; padding: 10px; background-color: rgb(207 232 220); border: 2px solid rgb(79 185 227); } aside { border-right: 1px solid #999; padding-right: 10px; } |
以上
