CSS グリッドレイアウトとグラデーションでタイル壁を作成

2021.10.01

先日、グリッドレイアウトについて図解を含めて説明する記事を書きました。

CSS グリッドレイアウトを図解・使用方法　応用でL字型・ネスト
CSSのグリッドコンテナーの作成方法。グリッドレイアウトのトラック・グリッド線・セル・間隔（gap）を図解。基本のレイアウトの作成方法と応用してグリッドアイテムをL字型にする方法、ネストする方法も説明。フレックスボックスの違いも説明。
b-moon.net
2021.09.26

折角なので、この機能を活用してタイル壁を作成してみました。

正方形の白いタイルを並べたシンプルな壁

CODEPEN

「Run Pen」をクリックしてください。

See the Pen tile_white_square by blue moon (@blue-moon) on CodePen.

HTMLファイル

<body>
  <div class="container">
    <div class="tile"></div>
　　<!--以降省略、上と同じタグを31個作成し合計32個としています。 -->
  </div>
</body>

同じタグを多数作成するのは面倒だと思います。
Emmetプラグインが備わっているエディターであれば、「div.container>div.tile*32」を入力後TABキーを押して作成してください。

CSSファイル

グリッドレイアウトの機能により、タイル間の間隔（目地）、つまりgapを固定することが可能です。
グリッドアイテムとなる子要素にmarginやpaddingを設定しなくても、等間隔が保てます！

.container {
  margin: 20px auto;
  width: 343px;  /* （タイルの横幅 + タイルの影の幅）× タイルを横に並べる数 */
  height: 172px;  /* （タイルの高さ + タイルの影の高さ）× タイルを縦に並べる数 */
  background: #eaeaea;  /* タイルの目地（隙間）の色、タイルの影より明るめ */
  display: grid;  /* グリッドレイアウト作成 */
  grid-template-columns: repeat(8, 40px);  /* 40px幅の列トラックを8個作成 */
  grid-template-rows: repeat(4, 40px);  /* 40px高さの行トラックを4個作成 */
  gap: 3px;  /* タイルの目地（隙間）の横幅と高さをまとめて指定  */
}

.tile {
  background: linear-gradient(to bottom right, #fafdff 0%, #fbfbfb 25%, #fff 50%, #fbfbfb 70%, #e8ece9 100%);
  box-shadow:  1px 2px 2px #444;
}

タイルのグラデーション

左上から右下にかけて（to bottom right）、
最初（0％）は#fafdff（スノーホワイト）から始まり、25％の地点で#fbfbfb（やや灰色い無彩色）、50％の地点で#fff（白）、70％の地点で#fbfbfbを経て、最終地点で#e8ece9（フロスティグレイ）になるようにグラデーションします。
正方形の右上から左下への対角線（50％の地点）に向けて白くグラデーションすることで、少し艶を出してみました。

1枚のタイルを2分割のグラデーションにし、交互に異なるパターンを並べ幾何学模様に

CODEPEN

See the Pen tile_white&gray_square by blue moon (@blue-moon) on CodePen.

HTMLファイル

先述のファイルと異なる点は子要素（タイル）の数です。
一行を奇数個の子要素としたいため、9列 × 4行 ＝ 36個作成しています。

CSSファイル

.container {
  margin: 20px auto;
  width: 369px;
  height: 164px;
  background: #bbb;
  display: grid;
  grid-template-columns: repeat(9, 40px);  /* 幾何学模様にしたいため奇数個の列トラック作成 */
  grid-template-rows: repeat(4, 40px);
  gap: 1px;  /* 幾何学模様が活きるように、間隔は狭く */
}

.tile:nth-child(odd){ /* 偶数番目のタイル */
  background:linear-gradient(135deg, #d8e1e7 0%, #f2f6f8 49%, #e0eff9 51%, #b5c6d0 100%);
}

.tile:nth-child(even){ /* 奇数番目のタイル */
  background:linear-gradient(225deg, #d8e1e7 0%, #f2f6f8 49%, #e0eff9 51%, #b5c6d0 100%);
}

補足説明

偶数番目のタイルのグラデーションは、左上から右下にかけて（135degは時計の針の12時の地点から135度、つまり前述の to bottom right と同じ意味）、
最初（0％）は#d8e1e7（やや灰色い青紫系の色）から始まり、49％の地点で#f2f6f8（やや灰色い青系の色）、51％の地点で#e0eff9（やや灰色い青紫系の色 、#d8e1e7より彩度は高め）を経て、最終地点で#b5c6d0（やや灰色い青系の色）になるようにグラデーションしています。

そして奇数番目のグラデーションは、偶数番目のグラデーションの方向だけを右上から左下（225deg）にかけて、と変更しています。

2列目も偶数番目から始まってしまうと、目的の幾何学模様にはなりません。
これが、1行の子要素の数を奇数にした理由です。

タイル間の間隔（目地）、つまりgapは、幾何学模様が映えるように敢えて狭くしています。
0にすると、また違った印象になります。

1枚のタイルを扇形グラデーションで四角錐のような凹凸に

CODEPEN

See the Pen tile_blue_square by blue moon (@blue-moon) on CodePen.

HTMLファイル

最初の例（白いタイル）と同じものです。
子要素（タイル）の数は32個です。

CSSファイル

.container {
  margin: 20px auto;
  width: 343px;
  max-height: 300px;
  display: grid;
  grid-template-columns: repeat(8, 40px);
  grid-template-rows: repeat(auto-fill, 40px);  /* トラック数はmax-heightの値の範囲内で自動追加 */
}

.tile {  /* 扇形グラデーションで一つのタイルを4色に色分け */
  background: conic-gradient(#ccf 45deg, #66f 45deg 135deg, #33f 135deg 225deg, #99f 225deg 315deg, #ccf 315deg);
}

auto-fill

grid-template-rowsプロパティのauto-fillは、その要素に指定した高さ（幅）の範囲内で、自動調整してくれる機能です。
今回は、タイルの間隔はなしで影もつけていないため、自動調整にしました。

auto-fillの詳細は、下記ページに説明があります。
MDN CSS：カスケーディングスタイルシート
似たようなものに、auto-fitがありますので、用途に合わせて選択して下さい。

この2つの違いについて、解説しようとすると新たに記事が一つできそうなので、割愛いたします。
そのうち、検証画像ができたら、記事にしてみたいと思います。
今のところは、とても大雑把ではありますが、auto-fillの場合はサイズ調整（伸縮）されるのは親要素、auto-fitの場合はサイズ調整されるのは子要素と、筆者は覚えておくことにしています。

グラデーション

タイルを四角錐に見せるため、扇型状グラデーションのconic-gradient()関数を使用しています。
といっても、色の開始点及び色の停止点を指定することにより、隣接の色は明確に分かれグラデーションにはなりません。

時計の12時の地点が0degとなり、開始点となります。最初から45degまでは#ccf（とても淡い青紫系の色 長春花色）、45degから135degまでは#66f（軽い青紫系の色）、135degから225degまでは#33f（明るい青紫系の色）、225degから315degまでは#99f（淡い青紫系の色）、そして最後、315degから360degまでは再び#ccfへと色を変更しています。

conic-gradient() 扇型状グラデーション については、下記でも紹介しています。

テキスト文字を斜め分割で色を変更、複数分割で色を変更・グラデーション、放射状に色を変更・グラデーションする方法
conic-gradient()（扇形）、radial-gradient()（放射）によって、テキスト文字をグラデーションする方法について説明します。背景をグラデーションにしテキストで切り抜きます。
b-moon.net
2021.09.19

タイルをレンガを積んだように半分ずつずらして並べる

このタイルの並べ方では、グリッドレイアウトが特徴が活きてきます。
なぜなら、子要素毎に開始位置と終了位置を指定可能となり、上下の行のタイルの配列をずらすことが可能となるためです。

因みに、このように半分ずつずらすタイルの並べ方は、馬踏み目地（レンガ目地）と言います。

CODEPEN

See the Pen tile_bleu_rectangle by blue moon (@blue-moon) on CodePen.

HTMLファイル

<body>
  <div class="container">
    <!-- 奇数行目4枚のタイル、偶数行目5枚のタイル、計9枚分のタイルのクラスを作成-->
    <div class="tile tile1"></div>
    <div class="tile tile2"></div>
    <div class="tile tile3"></div>
    <div class="tile tile4"></div>
    <div class="tile tile5"></div>
    <div class="tile tile6"></div>
    <div class="tile tile7"></div>
    <div class="tile tile8"></div>
    <div class="tile tile9"></div>
　　<!-- 以降、省略　<div class="tile tile1"></div> ～ <div class="tile tile9"></div> を3回作成 -->
  </div>
</body>

Emmet機能が備わっているのであれば、「div.container>(div.tile.tile$*9)*4」入力後、tabキーで作成してください。

2行のタイルを9枚で構成し、それぞれ開始位置と停止位置を変更するため、それぞれ異なるクラスを追加しています。

CSSファイル

.container {
  margin: 20px auto;
  width: 350px;  /* 影の幅も含める */
  height: 351px;  /* 影の高さも含める */
  background: #dfdfdf;
  display: grid;
  grid-template-columns: repeat(9, 40px);  /* 奇数個分の列トラックを作成 */
  grid-auto-rows: 40px;  /* 自動で行トラックを作成 */
  gap: 4px;  /* 間隔はタイルの影より大きく */
}

.tile {
  box-shadow: 1px 2px 2px #000326;
}

.tile1, .tile1:nth-child(10n) {  /* 1番目、後は10番目毎に */
  grid-column-start: 1;  /* 奇数行目の最初は、グリッド線1番目から3番目まで、2つの列トラックにわたって配置 */
  grid-column-end: 3;
}

.tile2, .tile2:nth-child(10n) {
  grid-column-start: 3;
  grid-column-end: 5;
}

.tile3, .tile3:nth-child(10n) {
  grid-column-start: 5;
  grid-column-end: 7;
}

.tile4, .tile4:nth-child(10n) {
  grid-column-start: 7;
  grid-column-end: 9;
}

.tile5, .tile5:nth-child(10n) {
  grid-column-start: 1;  /* 偶数行目の最初は、グリッド線1番目から2番目までの1つの列トラックのみ */
  grid-column-end: 2;
}

.tile6, .tile6:nth-child(10n) {
  grid-column-start: 2;
  grid-column-end: 4;
}

.tile7, .tile7:nth-child(10n) {
  grid-column-start: 4;
  grid-column-end: 6;
}

.tile8, .tile8:nth-child(10n) {
  grid-column-start: 6;
  grid-column-end: 8;
}

.tile9, .tile9:nth-child(10n) {
  grid-column-start: 8;  /* 偶数行目の最後は、グリッド線8番目から9番目までの1つの列トラックのみ */
  grid-column-end: 9;
}

.tile:nth-child(1), .tile:nth-child(3n+1) { /* 1番目、後は3の倍数に1を足した数番目 */
  background: linear-gradient(135deg, #a2b6df 0%, #0c3483 100%);
}

.tile:nth-child(2), .tile:nth-child(3n+2) {
  background: linear-gradient(135deg, #e7f0fd 0%, #146acc 100%);
}

.tile:nth-child(3), .tile:nth-child(3n+3) {
  background: linear-gradient(135deg, #e7f0fd 0%, #93beed 100%);
}
/* ここまでで3パターンのタイルの色の繰り返し完成 */

.tile:nth-child(6n+1) {  /* 6の倍数に1を足した数番目 */
  background: linear-gradient(135deg, #fff 0%, #79b5f2 100%);
}

.tile:nth-child(8n+1) {  /* 8の倍数に1を足した数番目 */
  background: linear-gradient(135deg, #a2b6df 0%, #0c3483 100%);
}

補足説明

3パターンの繰り返しでは単調になるため、.tile:nth-child(6n+1)と.tile:nth-child(8n+1)で、タイルの色を上書きし、全体的にランダムなタイル色の配置としてみました。

タイトルとURLをコピーしました