6ステップで完成!CSS3でお洒落な「千鳥格子」を作る方法

「千鳥格子」は千鳥が連なって飛んでいるような格子柄で、2013年秋冬ファッションの流行の柄のひとつとなっています。大変複雑に見えるこの柄ですが、実装次第でCSSのみで表現することが可能です。今回は、今流行の千鳥格子をCSSで作ってみたいと思います。

千鳥格子

事前準備

今回の千鳥格子の実装は、先日投稿した『8ステップで完成!CSS3で「斜めのストライプ」を作る方法』の応用編となりますので、事前にご確認ください。

千鳥格子は一見複雑に見えますが、分解してみると、意外とシンプルで以下の4つの柄(色が交互に異なる正方形とストライプ)からできていることがわかります。この4つの柄の固まりを繰り返し並べられているだけです。なので、同様にCSSでの実装でも、この4つの柄を指定要素に対して表現すればよいということになります。


それでは、早速説明に入りますが、前準備として以下のようにdiv要素を作っておきます。このdiv要素に対してCSSを指定していきます。

<div id="div2310"></div>

それから千鳥格子を作成する上で必要なCSSは、「linear-gradient()関数」「background-sizeプロパティ」「background-positionプロパティ」となります。こちらも併せて事前にご確認ください。

右上/左下の正方形の実装

まず、右上/左下にある正方形を実装していきます。一見簡単そうに見えますが、意外とややこしいことをする必要があるので、順を追って説明していきます。


STEP 1 千鳥格子を表示する領域を作る

まず千鳥格子を表示させる領域を確保します。ここでは幅100px、高さ100pxの領域を作り、黒い枠で囲っています。そしてさらにbackground-sizeプロパティを使って幅20px、高さ20pxの小さな正方形で領域を25分割させています。

<style>
#div2310 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  /* 幅20px、高さ20pxの正方形で領域を分割 */
  background-size: 20px 20px;
}
</style>

ブラウザでの表示結果は以下のようになります。

STEP 2 正方形を作るための三角形を作る

ステップ1で作った領域に正方形を作っていきますが、一発で正方形を作れないので、まず三角形を作っていきます。右上と左下それぞれlinear-gradient()関数を使って三角形を作ります。左下から右上にかけて斜めのグラデーションを作り、境界をはっきりさせるようにグラデーションをなくしていきます。後ほどストライプを表示させる領域は透明にしておきます。

<style>
#div2310 {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  background-size: 20px 20px;

  /* 左下から斜め45度上にかけてlinear-gradient()関数でグラデーションを指定
    0%〜25%まで黒、25%〜75%まで透明、75%〜100%まで茶とする */
  background-image:
    linear-gradient(
      45deg,
      #000 0%, #000 25%,
      transparent 25%, transparent 75%,
      #C89975 75%, #C89975 100%
    );
}
</style>

ブラウザでの表示結果は以下のようになります。

STEP 3 正方形を作るための三角形を作る その2

ステップ2で作った三角形の逆側の三角形を、ステップ2と同じくlinear-gradient()関数を使って作ります。右上から左下にかけて斜めのグラデーションを作ります。

<style>
#div2310 {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  background-size: 20px 20px;

  background-image:
    linear-gradient(
      45deg,
      #000 0%, #000 25%,
      transparent 25%, transparent 75%,
      #C89975 75%, #C89975 100%
    ),

  /* STEP2で指定したlinear-gradient()関数の後ろにカンマでつなぎ、
    右上から斜め-135度下にかけてlinear-gradient()関数でグラデーションを指定。
    0%〜25%まで黒、25%〜75%まで透明、75%〜100%まで茶とする */
    linear-gradient(
      -135deg,
      #000 0%, #000 25%,
      transparent 25%, transparent 75%,
      #C89975 75%, #C89975 100%
    );
}
</style>

ブラウザでの表示結果は以下のようになります。ステップ3で作った三角形は、ステップ2で作った三角形のちょうど真下に隠れています。(background-imageプロパティに複数の値を指定した場合、上の値から優先的に表示されるため)

ちなみに、ステップ2で作った三角形の指定を外すと以下のような表示になっています。

STEP 4 重なった三角形をずらして正方形を完成させる

ステップ2で作った三角形と、ステップ3で作った三角形は重なってしまっているので、ステップ3で作った三角形をずらして表示させます。幅20px、高さ20pxの領域に対して、ステップ3で作った三角形をbackground-positionプロパティを使って横10px、縦10pxの地点から表示させるようにします

<style>
#div2310 {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  background-size: 20px 20px;

  background-image:
    linear-gradient(
      45deg,
      #000 0%, #000 25%,
      transparent 25%, transparent 75%,
      #C89975 75%, #C89975 100%
    ),
    linear-gradient(
      -135deg,
      #000 0%, #000 25%,
      transparent 25%, transparent 75%,
      #C89975 75%, #C89975 100%
    );

  /* background-imageプロパティで複数の値を指定している場合は、
    background-positionプロパティも同じく複数指定
    2番目の値(ステップ3の三角形)を
    横10px、縦10pxの地点から表示させるように指定 */
  background-position: 0 0, 10px 10px;
}
</style>

ブラウザでの表示結果は以下のようになります。ステップ2とステップ3で作った三角形が合体して正方形になりました。

左上/右下のストライプの実装

次に、左上/右下にあるストライプを実装します。


STEP 5 領域全体にストライプを実装する

ステップ1で作った領域に対して、linear-gradient()関数でグラデーションをかけます。後でステップ2〜4で作った正方形を上に重ねるので、左上/右下とか気にせず領域全体にストライプを作っていきます

<style>
#div2310 {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  background-size: 20px 20px;

  /* 左上から右下にかけてlinear-gradient()関数でグラデーションを指定。
    0%〜12.5%まで茶、12.5%〜25%まで黒、25%〜37.5%まで茶、
    37.5%〜62.5%まで黒
    62.5%〜75%まで茶、75%〜87.5%まで黒、87.5%〜100まで黒とする */
  background-image:
    linear-gradient(
      135deg,
      #C89975 0%, #C89975 12.5%,
      #000 12.5%, #000 25%,
      #C89975 25%, #C89975 37.5%,
      #000 37.5%, #000 62.5%,
      #C89975 62.5%, #C89975 75%,
      #000 75%, #000 87.5%,
      #C89975 87.5%, #C89975 100%
    );
}
</style>

ブラウザでの表示結果は以下のようになります。

正方形とストライプを合わせて「千鳥格子」完成

ステップ2〜4で作った正方形と、ステップ5で作ったストライプを合体させて「千鳥格子」を完成させます。

STEP 6 正方形とストライプを重ね合わせる

これまで作って来た正方形もストライプもbackground-imageプロパティの値となっているので、正方形を作ったlinear-gradient()関数の後にカンマでストライプを作ったlinear-gradient()関数を繋ぎます。先にも述べたように、background-imageプロパティに複数の値を指定した場合、上の値から優先的に表示されるので、正方形の下にストライプが表示されるようになります。

<style>
#div2310 {
  width: 300px;
  height: 300px;
  background-size: 20px 20px;

  background-image:
    linear-gradient(
      45deg,
      #000 0%, #000 25%,
      transparent 25%, transparent 75%,
      #C89975 75%, #C89975 100%
    ),
    linear-gradient(
      -135deg,
      #000 0%, #000 25%,
      transparent 25%, transparent 75%,
      #C89975 75%, #C89975 100%
    ),
    linear-gradient(
      135deg,
      #000 0%, #C89975 12.5%,
      #000 12.5%, #000 25%,
      #C89975 25%, #C89975 37.5%,
      #000 37.5%, #000 62.5%,
      #C89975 62.5%, #C89975 75%,
      #000 75%, #000 87.5%,
      #C89975 87.5%, #C89975 100%
    );

  background-position: 0 0, 10px 10px, 0 0;
}
</style>

ブラウザでの表示結果は以下のようになります。これで「千鳥格子」の完成です。あとは各ブラウザでの表示対策として適宜ベンダープレフィックスなどをつけて対応してみてください。それからlinear-gradient()関数内のグラデーションの角度や色を変えることで、千鳥格子の向きや色なども好きなように変えることができます。


以上のように「千鳥格子」を作ってきましたが、一見複雑に見える柄でも分解してシンプルにすることで、CSSでも十分に表現することが可能となります。世の中にはたくさんの柄があるので、いろいろトライしてみるのも面白いと思います。

コメント一覧

  • 必須

コメント