こんにちは。
今回は最近の案件で学びになった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本を１セットとして繰り返しています。
これもそれぞれの値を変えて見るとどのような仕組みでストライプができているのかがよくわかります。
これの方法を知らずに安易に背景画像の素材をbackground-imageで設定してしまうと、画像サイズによっては読み込みに時間がかかったりとユーザビリティにも影響が出る可能性があります。
ぜひUXの観点でもこの方法をマスターして活用してもたえたらと思います。
では！