CSS3で「ストライプ」を作るならrepeating-linear-gradient関数が便利

以前『8ステップで完成!CSS3で「斜めのストライプ」を作る方法』という記事を書きましたが、CSS3の仕様書を見ると、繰り返し機能を持つ「repeating-linear-gradient()関数」を使うともっと簡単に「ストライプ」を実装できることがわかりました。今回はこの「repeating-linear-gradient()関数」と、同じく放射線状のグラデーションを作るradial-gradient()関数の繰り返し機能を持った「repeating-radial-gradient()関数」を使って「ストライプ」を作る方法を紹介します。

repeating-linear-gradient()関数repeating-radial-gradient()関数は、それぞれlinear-gradient()関数、radial-gradient()関数と同じ引数を取り、同じような動作をしますが、指定されたカラーストップを自動的に繰り返す仕様になっています。詳細はMDNにてご確認ください。ブラウザ対応状況などもこちらで確認できます。

repeating-linear-gradient()関数を使って「ストライプ」を作る

サンプル

repeating-linear-gradient()関数で作ったストライプです。

ソースコード

ソースコードは以下のようになります。background-imageプロパティにrepeating-linear-gradient()関数を指定します。これだけです!

<!-- CSS部分 -->
<style>
#div2348-1 {
    width: 200px;
    height: 200px;
    background-image:
      repeating-linear-gradient (-45deg, white, white 5px, green 5px, green 10px);
}
</style>

<!-- HTML部分 -->
<div id="div2348-1"></div>

解説

ここでのrepeating-linear-gradient()関数の構文は以下のようになっています。

repeating-linear-gradient(ストライプの角度, 色1 始点, 色1 終点, 色2 始点、色2 終点[, 色3 始点, 色3 終点, …])

第1引数にストライプの角度を指定し、その後はストライプを作るボーダーの色とその始点と終点を続けて指定していきます。それぞれの色の始点と終点は、グラデーションの開始位置からの距離を指定します。色は何色でも指定できます。色の指定が終わった所で、再び最初に指定した色からボーダーが繰り返し表示されます。

repeating-radial-gradient()関数を使って「ストライプ」を作る

サンプル

repeating-radial-gradient()関数で作ったストライプです。

ソースコード

ソースコードは以下のようになります。同じくbackground-imageプロパティにrepeating-radial-gradient()関数を指定します。こちらもこれだけです!

<!-- CSS部分 -->
<style>
#div2348-2 {
    width: 200px;
    height: 200px;
    background-image:
      repeating-radial-gradient (white, white 5px, green 5px, green 10px);
}
</style>

<!-- HTML部分 -->
<div id="div2348-2"></div>

解説

ここでのrepeating-radial-gradient()関数の構文は以下のようになっています。

repeating-radial-gradient([グラデーションの開始位置(x座標 y座標)], 色1 始点, 色1 終点, 色2 始点、色2 終点[, 色3 始点, 色3 終点, …])

こちらは第1引数からストライプを作るボーダーの色とその始点と終点を続けて指定していきます。それぞれの色の始点と終点は、グラデーションの始まりからの距離を指定します。色は何色でも指定できます。色の指定が終わった所で、再び最初に指定した色からボーダーが繰り返し表示されます。ちなみに第1引数にグラデーションの開始位置をx座標、y座標で指定することができます(省略も可能。省略した場合は中央から開始されます)。


以前の投稿『8ステップで完成!CSS3で「斜めのストライプ」を作る方法』で紹介したストライプを作る方法では、background-sizeプロパティを併せて使う必要があり、若干わかりにくい部分がありました。繰り返し機能を持つ「repeating-linear-gradient()関数」「repeating-radial-gradient()関数」を使うことで、background-sizeプロパティを使わずに済みます。楽にストライプを実装することができます。ただ細かいストライプを指定したときのブラウザの描画があまり滑らかでないのが気になります。使いどころをよく考えて、適材適所で使っていければってところでしょうか。

コメント一覧

  1. ピンバック: [Pz-HBC][1.2.0]WordPressで「はてなブログカード」を利用するプラグインを更新しました | ぽぽづれ。

     

  • 必須

コメント