１ヶ月くらい、HTMLの書籍を読んで、一通り目を目を通した。
(といっても、まだ、理解できていないが...)
タイトルの通り、ナビゲーションバーをグリッドレイアウトでやってみた。
レイアウト
ソース1
最初に書いたソースは下記の通り。
grid_practice1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>グリッドレイアウト 練習</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<header>
<nav id="nav_bar">
<ul>
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
<li><a href="#">ナビ4</a></li>
<li><a href="#">ナビ5</a></li>
<li><a href="#">ナビ6</a></li>
</ul>
</nav>
</header>
</body>
</html>
base.css
body {
width: 600px;
margin-left: auto;
margin-right: auto;
}
/* ヘッダー */
header {
text-align: center;
}
# nav_bar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
margin: 0;
padding: 0;
}
# nav_bar li {
list-style: none;
margin: 0;
padding: 0;
border: solid 1px;
background: #f3f3f3;
}
# nav_bar a {
text-decoration: none;
margin: 0;
padding: 0;
}
結果1
上記のソースで行けると思っていたが、結果は下のようなレイアウトになった...
cssが適用されていないのかと思ったが、きちんとソースには書いている..
デバッグモードで確認してみた。
すると、下の画像のように右に２つ領域が割り当てられているのを確認できた。
左端に、カーソルを合わせると、下のようになった。
ソース2
上の画像から、nav要素はきちんと適用されているが、ul要素には適用されていない。
ソースを変更してみた。
grid_practice2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>グリッドレイアウト 練習</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<header>
<nav>←元々、ここにidを書いていた
<ul id="nav_bar">←ここにidを移動した
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
<li><a href="#">ナビ4</a></li>
<li><a href="#">ナビ5</a></li>
<li><a href="#">ナビ6</a></li>
</ul>
</nav>
</header>
</body>
</html>
すると、望んだレイアウトになった。
idを書く場所を間違えていた...
グリッドの適用先が間違ってた...
おわりに
なぜ、うまくいかなかったのか？
nav要素に適用すれば、ul要素が自動的に割り当てられると思っていた。
けど、グリッドを適用したのはnavであって、ulではない。
だから、うまくいかなかった。
レイアウトの左上にulが埋め込まれ、そのなかで上から順にli要素が並んだ。
適用先をulに変えることで、li要素が左上から右に割り当てられた。
(この考えであってるはず...)
ここまで読んでくれた上で、自分の考えが間違えていたら、指摘してくれるとありがたいです。