グリッドの作成

グリッドの作成方法についての説明です。

CSSに「display: grid」を指定した上で、作成するレイアウトに応じて下記の要素を指定します。

grid-template-rows:縦方向の長さを指定します。
grid-template-columns:横方向の長さを指定します。

長さは、「px」や「%」などの単位を付けた数値を半角スペース区切りで記述します。

《例1》

CSS

.grid1 {
display: grid;
grid-template-rows: 30% 40% 30%;
}

.grid1 div {
margin: 4px;
background-color: skyblue;
}

HTML

<div class="grid1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

《表示結果1》

1
2
3

《例2》

CSS

.grid2 {
display: grid;
grid-template-rows: 30% 40% 30%;
grid-template-columns: 40% 30% 30%;
}

.grid2 div {
margin: 4px;
background-color: skyblue;
}

HTML

<div class="grid2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>

《表示結果2》

1
2
3
4
5
6
7
8
9
▲ページの先頭へ
グリッドと似たようなレイアウトとして、「display: block」でリンク部分の周りをブロック状にしてボタンを作成することができます。

《例》

CSS

.button {
display: block;
text-decoration: none;
color: white;
background-color: yellowgreen;
padding: 20px;
text-align: center;
width: 150px;
}

HTML

<a class="button" href="#">ボタン</a>

《表示結果》

ボタン
上記の例ではボタンの幅を150pxに指定していますが、「display: block」の部分を「display: inline-block」に変えて「width」の指定を解除すると、テキストの長さに合わせたサイズに自動調整されます。
.button {
display: inline-block;
text-decoration: none;
color: white;
background-color: yellowgreen;
padding: 20px;
text-align: center;
}

《表示結果》

テキスト

テキストテキストテキストテキスト

▲ページの先頭へ

>>CSS講座メニューへ戻る

【広告】自宅で仕事ができる!クラウドソーシング「ランサーズ」