「千鳥格子」は千鳥が連なって飛んでいるような格子柄で、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と同じく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でも十分に表現することが可能となります。世の中にはたくさんの柄があるので、いろいろトライしてみるのも面白いと思います。
コメント