70149


[grid-template - CSS: カスケーディングスタイルシート |
MDN](https://developer.mozilla.org/ja/docs/Web/CSS/grid-template)
に下記のコードがありました。

>
[code]

>     #page {
>       display: grid;
>       width: 100%;
>       height: 200px;
>       grid-template: [header-left] "head head" 30px [header-right]
>                      [main-left]   "nav  main" 1fr  [main-right]
>                      [footer-left] "nav  foot" 30px [footer-right]
>                      / 120px 1fr;
>     }
>  
[/code]

にある、`[header-left]`や`[footer-right]`の意味はなんなんでしょうか？どういう用途でつかっているのでしょうか？  
おそらく上記リンク先に解説が書いているのかもしれませんが、構文に慣れておらず、どのあたりに解説記事が書かれているのかわかりませんでした。


CC BY-SA 4.0
2020-09-04T11:27:04.813
70139
2020-09-05T03:45:34.973
2020-09-05T03:45:34.973
32986
9008
question
html css
CSSグリッドの角括弧で囲まれた部分の意味と使い方はどのようなものなのでしょうか？


同 MDN のページには、 `grid-template` プロパティの構文について以下のように書かれており、角括弧とその内容は **[grid
ライン](https://developer.mozilla.org/ja/docs/Glossary/Grid_lines)の識別子**であることがわかります[[1]](https://developer.mozilla.org/ja/docs/Web/CSS/grid-
template#Formal_syntax)。このような記法について、 MDN
の[名前付きグリッド線を使用したレイアウト](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)という記事にて詳細が記述されています。

> ### 正式な構文[[1]](https://developer.mozilla.org/ja/docs/Web/CSS/grid-
> template#Formal_syntax)
[code]

>     none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-
> names>? <string> > <track-size>? <line-names>? ]+ [ / <explicit-track-list>
> ]?
>     where
>     <line-names> = '[' <custom-ident>* ']'
>  
[/code]


CC BY-SA 4.0
2020-09-05T02:22:27.823
70149
2020-09-05T02:22:27.823
32986
70139
answer