iPentec.com  /  Doc  /  CSS

目次

CSSで縞模様 / ストライプを描画する - CSS

CSSで縞模様 / ストライプを描画するコードを紹介します。

シンプルなストライプ

CSSでシンプルなストライプ模様を描画します。
Stripe01.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Stripe01.css" />
</head>
<body>
  <div class="StripeFrame">
    Test
  </div>
</body>
</html>
Stripe01.css
.StripeFrame {
  width: 360px;
  height: 180px;
  background: linear-gradient(0deg, rgba(255,176,166,1) 0%, rgba(255,176,166,1) 25%, rgba(231,113,97,1) 25%, rgba(231,113,97,1) 25%,
    rgba(231,113,97,1) 50%, rgba(255,176,166,1) 50%, rgba(255,176,166,1) 75%, rgba(231,113,97,1) 75%, rgba(231,113,97,11) 100%);
}

解説

background プロパティで背景色を指定ます。linear-gradient でグラデーションを描画しますが、 パラメーターを設定することでグラデーションではなく縞模様の効果を描画できます。

グラデーションのロジック

2色の線形グラデーションを例にします。カラーA(濃い青)からカラーB(水色)にグラデーションし、再度カラーA(濃い青)にグラデーションするグラデーションパターンです。


カラーA(濃い青)とカラーB(水色)の分岐点を追加し、それぞれの分岐点を近づけます。


分岐点が非常に近づくとグラデーションがなくなり、分岐点で色が変わる状態になります。


同様にグラデーションの分岐点を作成し、近づけて配置するとグラデーションではなく、縞模様の描画結果になります。



この時の分岐点の設定は以下になります。
位置(%)カラー
0% カラーA
25% カラーA
25% カラーB
50% カラーB
50% カラーA
75% カラーA
75% カラーB
00% カラーB

CSSで表現すると次の通りです。
background: linear-gradient
 (0deg, 
 rgba(255,176,166,1) 0%,
 rgba(255,176,166,1) 25%,
 rgba(231,113,97,1) 25%,
 rgba(231,113,97,1) 25%,
 rgba(231,113,97,1) 50%,
 rgba(255,176,166,1) 50%,
 rgba(255,176,166,1) 75%,
 rgba(231,113,97,1) 75%,
 rgba(231,113,97,11) 100%);

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。縞模様が描画できています。

斜めのストライプ

斜めのストライプを描画する場合は、linear-gradient の最初のパラメーターに回転角を設定します。
.StripeFrame {
  width: 360px;
  height: 180px;
  background: linear-gradient(-45deg, rgba(255,176,166,1) 0%, rgba(255,176,166,1) 25%, rgba(231,113,97,1) 25%, rgba(231,113,97,1) 25%,
    rgba(231,113,97,1) 50%, rgba(255,176,166,1) 50%, rgba(255,176,166,1) 75%, rgba(231,113,97,1) 75%, rgba(231,113,97,11) 100%);
}
上記のCSSに変更した結果は下図となります。斜めのストライプが描画されます。

ストライプの間隔を変更する : background-size を利用する

先に紹介したグラデーション設定は、カラーA、カラーB、カラーA、カラーBのストライプの2回の繰り返しの描画となっています。 ストライプの間隔を狭くして、ストライプを細かく表現したい場合があります。
ストライプの間隔を変更する場合は、background-size プロパティを利用します。
Stripe03.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Stripe03.css" />
</head>
<body>
  <div class="StripeFrame">
    Test
  </div>
</body>
</html>
Stripe03.css
.StripeFrame {
  width: 360px;
  height: 180px;
  background: linear-gradient(-45deg, #c3ff9f 0%, #c3ff9f 25%, #73b749 25%, #73b749 25%, #73b749 50%, #c3ff9f 50%, #c3ff9f 75%, #73b749 75%, #73b749 100%);
  background-size: 32px 32px;
}
background-size: 32px 32px; を指定して、サイズを縮小することでストライプの間隔を調整しています。
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。

ストライプの間隔を変更する : repeating-linear-gradient を利用する

ストライプの角度が45度の場合は、先に紹介した、background-size プロパティを利用する方法がありますが、45度以外の任意の角度で描画したい場合は、 background-size プロパティでは制御が難しいため、repeating-linear-gradient を利用します。
repeating-linear-gradientを利用する場合は、カラーの後の値を%ではなく、ピクセル数で指定します。最後のグラデーションの描画が終わると、 最初のカラーに戻り、繰り返しグラデーションが描画される動作になります。

Stripe05.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Stripe05.css" />
</head>
<body>
  <div class="StripeFrame">
    Test
  </div>
</body>
</html>
Stripe05.css
.StripeFrame {
  width: 360px;
  height: 180px;
  background: repeating-linear-gradient(-27deg, #588ecb 0, #588ecb 20px, #3276c2 20px, #3276c2 20px, #3276c2 40px, #588ecb 40px, #588ecb 60px, #3276c2 60px, #3276c2 80px);
}

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

透明度を変更してストライプを描画する

枠の上に透明度を変更したストライプを描画することで、ストライプの模様を描画する方法もあります。

コード

下記HTML, CSSファイルを作成します。
Stripe04.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Stripe04.css" />
</head>
<body>
  <div class="StripeBase">
    <div class="Content">
      Test
    </div>
    <div class="StripeFrame">
    </div>
  </div>
</body>
</html>
Stripe04.css
.StripeBase {
  width: 360px;
  height: 180px;
  background-color: #42a2ff;
  position: relative;
}

.StripeFrame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 180%;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.25) 25%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 25%,
    rgba(255,255,255,0) 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,rgba(255,255,255,0) 75%,rgba(255,255,255,0) 100%);
  background-size: 64px 64px;
}

.Content {
  position: absolute;
  top: 0;
  left: 0;
}

解説

StripeBase Content StripeFrame の3つのdiv枠を用意します。3つのdiv枠を同じ位置に重ねて表現します。StripeBaseクラスのdiv枠は背景色を設定します。
Contentクラスのdivwカウは、枠内に表示するコンテンツを表示します。今回の場合は、"Test"の文字列を表示しています。 StripeFrameクラスで縞模様を表現します。縞模様は白色の縞模様ですが、透明度が0%と25%でストライプする設定にしており、背景色の色が淡くなり縞模様として見えるようになります。
なお、複数のdiv枠を同じ位置に表示するため、一番下のStripeBaseの枠は position: relative; を指定しています。また、上に重なるレイヤーは position: absolute; を指定して top: 0; left: 0; を指定しています。position: relative での子要素の座標値による表示位置の動作については、こちらの記事を参照して下さい。

表示結果

上記のHTMLファイルをWebブラウザで表示すると下図のページが表示されます。透明度を変化させる方法でもストライプが描画できていることが確認できます。

著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

掲載日: 2022-05-18
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.