Q&A
HTMLコードも提示してください。
前提・実現したいこと
HTML、CSSを学習中です。参考サイトを模倣しています。
https://manablog.org/
画面幅768px以上にした際、参考サイトのようなレイアウト(ナビゲーションバー以降)にするため
grid-template-areasを用いてレイアウト変更を試みたいです。
発生している問題・エラーメッセージ
なぜか２列のレイアウトになってしまい、コントロールできない。
該当のソースコード
↓文字数制限により、画像ファイル名、一部文章削除省略しています。
html
1 <main> 2 <div class=container2> 3 <div class=box1> 4 <div class="pic1"> 5 <img src=""> 6 </div> 7 <h1>プログラミング学習の始め方 8 </h1> 9 <div class="readmore"> 10 <a href="">READ MORE</a> 11 </div> 12 </div> 13 <div class=box2> 14 <div class="pic1"> 15 <img src=""> 16 </div> 17 <h1>ブログ型アフィリの完全講義 18 </h1> 19 <div class="readmore"> 20 <a href="">READ MORE</a> 21 </div> 22 </div> 23 <div class=box3> 24 <div class="pic1"> 25 <img src=""> 26 </div> 27 <h1>有料コミュニティを始めます 28 </h1> 29 <div class="readmore"> 30 <a href="">READ MORE</a> 31 </div> 32 </div> 33 <div class=box4> 34 <diV class="time"> 35 <time>2020/08/12</time> 36 </diV> 37 <h2>８時間労働</h2> 38 <p class="category"><a href="" rel="category tag">LIFE</a><a href="" rel="category tag">Work</a></p> 39 <div class="pic2"> 40 <img src=""> 41 </div> 42 <p class="description">収入を増やしたいなら、</p> 43 <div class="readmore"> 44 <a href="">READ MORE</a> 45 </div> 46 </div> 47 <div class=box5> 48 <diV class="time"> 49 <time>2020/08/06</time> 50 </diV> 51 <h2>【事実】サラリーマン</h2> 52 <p class="category"><a href="" rel="category tag">LIFE</a><a href="" rel="category tag">Work</a></p> 53 <div class="pic2"> 54 <img src=""> 55 </div> 56 <p class="description">僕はちょくちょく</p> 57 <div class="readmore"> 58 <a href="">READ MORE</a> 59 </div> 60 </div> 61 <div class=box6> 62 <diV class="time"> 63 <time>2020/08/04</time> 64 </diV> 65 <h2>【現代の魔法】</h2> 66 <p class="category"><a href="" rel="category tag">LIFE</a></p> 67 <div class="pic2"> 68 <img src=""> 69 </div> 70 <p class="description">こんにちは、</p> 71 <div class="readmore"> 72 <a href="">READ MORE</a> 73 </div> 74 </div> 75 <div class=box7> 76 <diV class="time"> 77 <time>2020/07/23</time> 78 </diV> 79 <h2>読書のコツ</h2> 80 <p class="category"><a href="" rel="category tag">BOOKS</a></p> 81 <div class="pic2"> 82 <img src=""> 83 </div> 84 <p class="description">こんにちは、</p> 85 <div class="readmore"> 86 <a href="">READ MORE</a> 87 </div> 88 </div> 89 <div class=box8> 90 <diV class="time"> 91 <time>2020/07/22</time> 92 </diV> 93 <h2>【近況報告】</h2> 94 <p class="category"><a href="" rel="category tag">LIFE</a></p> 95 <div class="pic2"> 96 <img src=""> 97 </div> 98 <p class="description">昨夜に</p> 99 <div class="readmore"> 100 <a href="">READ MORE</a> 101 </div> 102 </div> 103 <div class=box9> 104 <diV class="time"> 105 <time>2020/07/21</time> 106 </diV> 107 <h2>22歳の</h2> 108 <p class="category"><a href="" rel="category tag">LIFE</a><a href="" rel="category tag">Work</a></p> 109 <div class="pic2"> 110 <img src=""> 111 </div> 112 <p class="description">20代なら、</p> 113 <div class="readmore"> 114 <a href="">READ MORE</a> 115 </div> 116 </div> 117 <div class=box10> 118 <diV class="time"> 119 <time>2020/07/20</time> 120 </diV> 121 <h2>日本は、</h2> 122 <p class="category"><a href="" rel="category tag">LIFE</a></p> 123 <div class="pic2"> 124 <img src=""> 125 </div> 126 <p class="description">海外に</p> 127 <div class="readmore"> 128 <a href="">READ MORE</a> 129 </div> 130 </div> 131 <div class=box11> 132 <diV class="time"> 133 <time>2020/07/19</time> 134 </diV> 135 <h2>【禅】</h2> 136 <p class="category"><a href="" rel="category tag">LIFE</a></p> 137 <div class="pic2"> 138 <img src=""> 139 </div> 140 <p class="description">ゲームを</p> 141 <div class="readmore"> 142 <a href="">READ MORE</a> 143 </div> 144 </div> 145 <div class=box12> 146 <diV class="time"> 147 <time>2020/07/17</time> 148 </diV> 149 <h2>仕事を</h2> 150 <p class="category"><a href="" rel="category tag">LIFE</a><a href="" rel="category tag">Work</a></p> 151 <div class="pic2"> 152 <img src=""> 153 </div> 154 <p class="description">うーむ、</p> 155 <div class="readmore"> 156 <a href="">READ MORE</a> 157 </div> 158 </div> 159 <div class=box13> 160 <diV class="time"> 161 <time>2020/07/16</time> 162 </diV> 163 <h2>【注意】</h2> 164 <p class="category"><a href="" rel="category tag">LIFE</a></p> 165 <div class="pic2"> 166 <img src=""> 167 </div> 168 <p class="description">信用で</p> 169 <div class="readmore"> 170 <a href="">READ MORE</a> 171 </div> 172 </div> 173 <div class="next"> 174 <a href="">次のページ</a> 175 </div> 176 <aside> 177 <div class="profile"> 178 <img src="img/ダウンロード (1).png"> 179 <h4>マナブ</h4> 180 <hr> 181 <P>ブログ</P> 182 <div class="detail"> 183 <a href=""> 184 プロフィール詳細 185 <i class="fa fa-angle-right"></i> 186 </a> 187 </div> 188 </div> 189 <div class="form-group"> 190 <form method="get" action="" class="search-form"> 191 <div class="form-group has-feedback"> 192 <input type="text" name="s" id="s" placeholder="Search for..." class="form-control"> 193 <span class="glyphicon glyphicon-search form-control-feedback"> 194 </span> 195 </div> 196 </form> 197 </div> 198 <div class="popular"> 199 <h4>よく読まれている記事</h4> 200 <hr> 201 <div class="pic3"> 202 <img src=""> 203 </div> 204 <a href="">【お知らせ】</a> 205 <div class="pic3"> 206 <img src=""> 207 </div> 208 <div class="archive"> 209 <h4>Archive</h4> 210 <hr> 211 <ul class="archive-list"> 212 <li><a href="">2020年8月</a></li> 213 </aside> 214 <!-- </section> --> 215 </div> 216 </main> 217 <footer> 218 <div class="about-me"> 219 <h4>About me!</h4> 220 <hr> 221 <p> 222 ブログ 223 </p> 224 <div class="about-me-detail"> 225 <a href="">»プロフィール詳細はこちら</a> 226 </div> 227 </div> 228 <div class="portfolio"> 229 <h4>Portfolio</h4> 230 <hr> 231 <ul class="portfolio-list"> 232 <li><a href="">休活BLOG</a></li> 233 </ul> 234 </div> 235 <div class="twitter"> 236 <h4>Twitter</h4> 237 <hr> 238 <a class="twitter-timeline" data-width="500" data-height="600"href="https://twitter.com/kyohei_nakano?ref_src=twsrc%5Etfw">Tweets by kyohei_nakano</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 239 </div> 240 <div class="copyright"> 241 <p>Copyright - <a href="https://manablog.org/">Manabu Bannai</a>, 2019 All Right Reserved.</p> 242 </div> 243 </footer>
css
1@media (min-width:768px){ 2 .container{ 3 width:750px; 4 margin-left: auto; 5 margin-right: auto; 6 } 7 8 .container2{ 9 display: grid; 10 grid-template-columns: 1fr 1fr 1fr; 11 grid-template-rows: repeat(35, 280px); 12 grid-template-areas: 13 "1 2 3" 14 "1 2 3" 15 "4 4 14" 16 "4 4 14" 17 "4 4 15" 18 "5 5 16" 19 "5 5 16" 20 "5 5 16" 21 "6 6 16" 22 "6 6 16" 23 "6 6 17" 24 "7 7 17" 25 "7 7 17" 26 "7 7 17" 27 "8 8 17" 28 "8 8 17" 29 "8 8 17" 30 "9 9 17" 31 "9 9 17" 32 "9 9 17" 33 "10 10 17" 34 "10 10 17" 35 "10 10 17" 36 "11 11 17" 37 "11 11 17" 38 "11 11 ." 39 "12 12 ." 40 "12 12 ." 41 "12 12 ." 42 "13 13 ." 43 "13 13 ." 44 "13 13 ." 45 "18 19 20" 46 "18 19 20" 47 "18 19 20"; 48 } 49 50 .box1{grid-area: 1;} 51 .box2{grid-area: 2;} 52 .box3{grid-area: 3;} 53 .box4{grid-area: 4;} 54 .box5{grid-area: 5;} 55 .box6{grid-area: 6;} 56 .box7{grid-area: 7;} 57 .box8{grid-area: 8;} 58 .box9{grid-area: 9;} 59 .box10{grid-area: 10;} 60 .box11{grid-area: 11;} 61 .box12{grid-area: 12;} 62 .box13{grid-area: 13;} 63 .profile{grid-area: 14;} 64 .form-group{grid-area: 15;} 65 .popular{grid-area: 16;} 66 .archive{grid-area: 17;} 67 .about-me{grid-area: 18;} 68 .portfolio{grid-area: 19;} 69 .twitter{grid-area: 20;} 70 .next{grid-area: 21;} 71}
試したこと
・「grid-template-columns:」「grid-template-rows:」
↑数値を変更すると、記事の高さが変わり挙動の変化が確認できた。
上記を変更しても３列目に配置されず、２列になってしまう。
・grid-template-areas: ←数値を変更しても変化なし
grid-areaの指定誤字なし
・下記のグリッドラインで指定する方法でそれなりに近いレイアウトをつくることはできました。
ただし、<main><aside><footer>で分けて作成した要素（記事、プロフィール、ポートフォリオ等）をレイアウトする際、container2の直下に要素を配置しないと、レイアウトが効かなかったので、<aside><footer>を無効化しています。
ソースの構造がわかりにくくなってしまうのを避ける方法はあるのでしょうか？
css
1 .container2{ 2 display: grid; 3 grid-template-columns: 1fr 1fr 1fr; 4 grid-template-rows: 1fr; 5 } 6 7.box1{ 8 grid-row: 1; 9 grid-column: 1; 10 } 11 12 .box2{ 13 grid-row: 1; 14 grid-column: 2; 15 } 16 17 .box3{ 18 grid-row: 1; 19 grid-column: 3; 20 } 21 22 .box4{ 23 grid-row: 2 / 4; 24 grid-column: 1 / 3; 25 }
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
grid-template-areas に指定するエリア名は数値、あるいは数値で始まる名前はNGです。
例えば、下記のようにアルファベットで始まるものに変更してください。
css
1 grid-template-areas: 2 "a1 a2 a3" 3 "a1 a2 a3" 4 "a4 a4 a14" 5 "a4 a4 a14"
ただしこの場合、<main><aside><footer>で分けて作成した要素（記事、プロフィール、ポートフォリオ等）をレイアウトする際、container2の直下に要素を配置しないと、レイアウトが効かないかったので、<aside><footer>を無効化しています。
グリッドレイアウトは、グリッドコンテナの直下の子要素にしか聞きません。
<aside><footer>を使って模倣先のレイアウトにしたいなら、grid を使うのは不適切です。 レイアウトしたい要素が孫要素になるため。 また、<aside><footer>を使わなくても、メインとサイドのそれぞれの要素の切れ目が同じになるとは限らないので、やはり不適切です。HTML5で追加された要素 header, footer, main, nav, aside で構造を決めて、
それぞれの中身のレイアウトは CSS FlexBox を使うのが適切だと思います（縦1列か横1列しかないので）。
header,footer,main,nav,article,aside,sectionの効果的な使い方
Grid 使うとすれば、header, footer, main, nav, aside のレイアウトを決めるのに使うのがいいでしょう。
投稿2020/08/25 13:39
編集2020/08/25 13:59総合スコア34075
明確なご回答ありがとうございます。
HTML5で追加された要素 header, footer, main, nav, aside で構造を決めて、
それぞれの中身のレイアウトは CSS FlexBox を使う。
↑この方法で修正したいと思います！
あなたの回答
tips
プレビュー
