コーディング

【CSS】repeating-linear-gradient 背景に格子・ストライプを表現する

投稿日:2020年9月26日 更新日:

こんにちは。

今回は最近の案件で学びになったCSSでの表現方法を紹介したいと思います。

まずこの画像を見てください。

ポイントは背景に敷かれている格子状の線です。

デザインが上がってきたときに「おー、、この背景どうコーディングしようかな?」ってなりました。

行き着いたのが「back-ground-image: repeating-linear-gradient();」でした。
これを使うと格子デザインを再現することができます。


実際の実装はこちらです。

<div class="container">
    <h1>テキストテキスト</h1>
    <p>TEXTTEXTTEXTTEXT</p>
</div>

<style>
.container{
	padding: 50px 30px;
	background-image: repeating-linear-gradient(to bottom, #cacaca, #cacaca 1px, transparent 0, transparent 64px), repeating-linear-gradient(to right,#cacaca, #cacaca 1px, transparent 0, transparent 64px);
}
h1{
	font-size: 40px;
	color: #000;
}
p{
	font-size: 20px;
	color: #000;
}
</style>

実装結果が下記となります。


解説します。
一番ベーシックな記述は、
background-image: repeating-linear-gradient(方向, 開始カラー, 終了カラー)

しかし今回は格子状なので縦方向と横方向で二つの線の設定が必要なため、連続して記述しています。

下記のような状態です。
background-image: repeating-linear-gradient(方向, 開始カラー,グラデーションカラーと幅, 終了カラー,グラデーションカラーと幅),repeating-linear-gradient(方向, 開始カラー,グラデーションカラーと幅, 終了カラー,グラデーションカラーと幅)

まず前半部分の横線の説明

background-image: repeating-linear-gradient(to bottom, #cacaca, #cacaca 1px, transparent 0, transparent 64px)

第1引数:to bottom →下方向へリピート
第2引数:#cacaca →開始カラーの指定(コンテンツの一番上に位置し横に走る線の色指定)
第3引数:#cacaca 1px →くり返す線の色と太さ
第4引数:transparent 0 →終了カラーの指定
第5引数:transparent 64px →終了カラーの太さ


つづいて後半の縦線の説明

repeating-linear-gradient(to right,#cacaca, #cacaca 1px, transparent 0, transparent 64px);

第1引数:to right →右方向へリピート
第2引数以降は横線の設定と同じ


見たところ複雑なのですが、「見るより慣れろ」です。
repeating-linear-gradientを使っているので本来はグラデーションを表現するためにあるものです。
第3引数、第4引数の色や数値を変えるとどの様な流れで横線が繰り返されているかすぐわります。

ストライプも実装可能です

この使い方の理解ができればストライプもCSSだけで実現できます。

<div class="container">
    <h1>テキストテキスト</h1>
    <p>TEXTTEXTTEXTTEXT</p>
</div>

<style>
.container{
	padding: 50px 30px;
	background-image: repeating-linear-gradient(90deg, white, white 5px, yellow 5px,  yellow 10px);
}
h1{
	font-size: 40px;
	color: #000;
}
p{
	font-size: 20px;
	color: #000;
}
</style>

実装結果は下記。

解説します。
background-image: repeating-linear-gradient(90deg, white, white 5px, yellow 5px, yellow 10px)

第1引数:90deg →角度の指定も可
第2引数:white →開始カラーの指定
第3引数:white 5px →くり返す線の色と太さ
第4引数:yellow 5px →終了カラーとスタート位置の指定
第5引数:yellow 10px →終了カラーと終了位置の指定

第2引数、第3引数でスタートの0pxから5pxまでを白色線の太さ、第4引数、第5引数で5pxから10pxまでを黄色線の太さと決めています。

この0から10pxまでの白黄の2本を1セットとして繰り返しています。



これもそれぞれの値を変えて見るとどのような仕組みでストライプができているのかがよくわかります。

これの方法を知らずに安易に背景画像の素材をbackground-imageで設定してしまうと、画像サイズによっては読み込みに時間がかかったりとユーザビリティにも影響が出る可能性があります。

ぜひUXの観点でもこの方法をマスターして活用してもたえたらと思います。

では!

-コーディング
-, , ,

執筆者:

関連記事

CSS

【CSS】子要素を親要素内で上下左右中央寄せさせる方法

子要素を親要素の上下左右中央に持ってくる方法を書きました。
様々な方法があるのですが、個人的には今回紹介する方法がベストではないかと思います。参考になれば幸いです。

勉強

プログラミング初心者の独学の方法、おすすめ教材

完全初心者からWebチーム内で戦えるようになった方法について書きます。

sass

SCSSの基礎

SCSSの基本をまとめてみました。CSSで書くよりかなりスピードアップしますし、記述場所も明確でわかりやすくなります。

CSS

【CSS】文字を下線(アンダーライン)で目立たせる。コピペOK。

CSSでテキストにアンダーラインを引く方法をいくつか紹介します。普通の下線、太線、マーカー風の下線まで表現できる実装をまとめました。ブログやLP制作で、ユーザーの目線を奪うことは重要です。それにはテキストを際立たせる必要になる時があります。そんな時の為にアンダーラインの理解を深めましょう。

CSS

【CSS】 複数、子孫、子、隣接…忘れがちなセレクタをまとめました。<前編>

「*」「+」「>」「,」これらについて書きます。セレクターを自由に使える様になると、コーディングスピード、可読性、更新性がアップします。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。