CSS

CSSのGridデザインで使われる用語(Containerとかitemとか ... etc)簡単に紹介

0
0

CSSのGridデザインを勉強していると、Containerとかitemとか色々と出てきます。

 

これは、定められた仕様なのか?というところは最初悩むと思います。

 

ですんで、簡単にまとめたいなと思っていました。

 

 

 

こちらの記事がとても分かりやすいのですが、英語なんで、分かりずらい人がいるかもしれません。

 

ですので、かいつまんでお届けします。

 

CSSのGridデザインで使われる重要な用語解説

 

Gridの概念を理解する前に、用語を理解することが重要です。

 

ここで出てくる用語はどれも概念的には似ているので、

 

グリッドの仕様書で定義されている意味を覚えておかないと、

 

簡単に混同してしまいます。

 

でも、心配しないでください、そんなに数はありません。

 

Grid Container

 

display: gridが適用される要素です。

 

すべてのグリッドアイテムの直接の親となります。

 

この例では、コンテナがグリッドコンテナです。

 

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

 

Grid Item

 

グリッドコンテナの子(つまり直系の子孫)です。

 

ここでは、item要素はグリッドアイテムですが、

 

sub-itemはそうではありません。

 

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

 

Grid Line

 

グリッドの構造を構成する仕切り線。縦方向(コラムグリッドライン)と、

 

横方向(ロウグリッドライン)があり、

 

行または列のどちらか一方に存在します。

 

ここでは、黄色の線が列格子線の例です。

 

 

Grid Cell

 

隣接する2本の行と2本の列のグリッド線の間のスペースです。

 

グリッドのひとつの「単位」であり、

 

ここでは、行のグリッドライン1と2、列のグリッドライン2と3の間にあるグリッドセルを示しています。

 

 

Grid Track

 

隣接する2本のグリッドラインの間のスペース。

 

グリッドの列や行のようなものだと考えればいいでしょう。

 

ここでは、2列目と3列目のグリッド線の間にあるグリッドトラックを紹介します。

 

 

Grid Area

 

4本のグリッドラインで囲まれた総ての空間。グリッドエリアは、任意の数のグリッドセルで構成することができます。ここでは、行グリッド線1と3、列グリッド線1と3の間にあるグリッドエリアを紹介します。

 

Pocket
LinkedIn にシェア

りょすけ
毎月3万人以上のプログラマーが訪れるoff.tokyoで、プログラマーさん向けのアンケートを実施しています、アンケートに無料回答すると、他の人の投票も見ることが出来ます!

学びたいプログラミング言語は何ですか?

 vaaaval@gmail.com



  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-CSS

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.