kakureblog

未経験からエンジニアになれた経験、エンジニア転職のヒントやプログラミングのTipsを届けます🤟

コーディング

【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の観点でもこの方法をマスターして活用してもたえたらと思います。

では!

-コーディング
-, , ,

執筆者:

関連記事

sass

SCSSの基礎

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

プログラミングを独学で始めて3年間の成長ログ【現役フロントエンドエンジニアの振り返り】

プログラミングを独学からスタートし約3年間が過ぎたのでその成長ログを書こうと思います。

【初心者→中上級者になる】Progateをやり終えた後にオススメ2選のUdemy

プログラミングを独学からスタートし約3年間が過ぎたのでその成長ログを書こうと思います。

CSS

【CSS】outlineの特徴まとめ 〜borderとの違いまで〜

outlineとborderの違いについて書きました。今まではborderしか使っていなかったのですが、outlineの特徴を知れば、コーディングでできることの幅が広がります。脱初心者を目指して。

RubyとRailsとRuby on Railsの関係は?

Rubyなの?Railsなの?Ruby on Railsなの? それぞれバラバラなの?の様にまだ整理ができてない方は是非読んで見てください。

me

Taka

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