どうも！LSSです！！
今日は、以前にやった、
に続いて、またしても さじ(id:conasaji)さん出題のお題？に挑戦してみました！
↑上がさじさんがイラレで描かれた画像、下がそれをCSSで模写してみたものです。
（今回、色はツールを使って盗みました。なのに文字の色が違うような^^;;;）
元記事は↓こちら！
コード
<div style="width: 320px; height: 65px; font-size: 29px; color: #ffe9a5; text-align: center; text-shadow: 2px 2px 3px gray; font-weight: bold; background-image: linear-gradient(90deg,#cd9f0e 50%,#70570e 50%),linear-gradient(90deg,#70570e 50%,#cd9f0e 50%); background-size: 80px 20px,80px 20px; background-position: 0% 25px,0% 45px; background-repeat: repeat-x;">小田原城の寄木細工</div>
コード解説
の前に考え方から
格子模様、どうやったら表現できるんだろう？
と、まず、
この一行分について考えてみると、
background-image: linear-gradient(90deg,#cd9f0e 50%,#70570e 50%);
というコードで、こんな風になるの
を、横に繰り返し並べる事でいけそうです。
色を入れ替えると、もう一行分も作れますね。
background-size と background-positionというプロパティ
「そもそもbackground-imageは画像を扱うプロパティであり、linear-gradientはグラデーションのルールを記述する事で画像の代わりとしているもの」
と考えないと、なかなか理解するのが難しかったです^^;
background-sizeは「画像のサイズ」、background-positionは「画像の配置位置」。
今回のコードで、
background-size: 80px 20px,80px 20px;
background-position: 0% 25px,0% 45px;
としていますが、いったん途中にあるカンマ以降を切り捨ててみると、
background-size: 80px 20px;
background-position: 0% 25px;
となります。
background-sizeは「画像のサイズ」なので、backgroun-imageで指定したこれを「ひとつの画像」とみなした時に「横80px、縦20px」のサイズの画像として扱います。
backgroun-positionは「画像の配置位置」で、「0% 25px」と指定する事で「0%（横位置は左端から）、縦位置は上から25pxの位置」に配置する、という指定になります。
（つまり、上25pxはあけておく、という事ですね）
そして、background-repeat: repeat-x;
repeat-xは「横方向に繰り返す」という意味ですが、もっと言うと「横方向には繰り返すが、縦方向には繰り返さない」という意味でもあります。
縦方向に繰り返さない、としておかないと、positionの指定であけたところまで結局繰り返しで描かれてしまい、結構悩まされました^^;;;;;
ここからコード解説！
<div style="
width: 320px; height: 65px;
font-size: 29px;
color: #ffe9a5;
text-align: center;
text-shadow: 2px 2px 3px gray;
font-weight: bold;
background-image:
linear-gradient(90deg,#cd9f0e 50%,#70570e 50%)
, linear-gradient(90deg,#70570e 50%,#cd9f0e 50%);
background-size:
80px 20px
, 80px 20px;
background-position:
0% 25px
, 0% 45px;
background-repeat: repeat-x;
">
小田原城の寄木細工
</div>
意味が分かりやすいように、改行＋字下げを入れました。
width: 320px; height: 65px;
font-size: 29px;
color: #ffe9a5;
text-align: center;
text-shadow: 2px 2px 3px gray;
font-weight: bold;
この部分は今回の主題「格子模様」以外の部分の指定です。
「全体の幅は320px、高さは65px。
文字サイズは29px、
文字色は#ffe9a5。
文字は中央寄せ。
影は文字の右2px、下2pxずらした位置に3px幅でぼかした 灰色（gray）で落とす。
文字の太さは太め（bold）」
という指定になります。
background-image:
linear-gradient(90deg,#cd9f0e 50%,#70570e 50%)
, linear-gradient(90deg,#70570e 50%,#cd9f0e 50%);
背景の画像イメージ（となるグラデ）を２種類、用意します。
カンマで区切る事で、複数種類指定する事ができます。
background-size:
80px 20px
, 80px 20px;
１つめの画像、２つめの画像（といってもlinear-gradientによる仮想イメージですが）のサイズをそれぞれ指定しています。
background-position:
0% 25px
, 0% 45px;
１つめの画像、２つめの画像の描画開始位置（画像の左上角をあてる位置） を指定しています。
横位置はどちらも0%ですが、縦位置を「１つめは上から25px、２つめは上から45px」の位置にずらしています。
画像サイズを「高さ20px」と指定しているので、
上から0px～24pxまでは空き、25px～44pxは１つめの画像用の場所、45px～64pxは２つめの画像用の場所
と割り当てる指定、って事になります。
background-repeat: repeat-x;
で、それを「横に繰り返す（縦には繰り返さない）」とする事で、
こんな風に描画されるCSSの完成です^^
（サイズ感が分かりやすいように枠線つけました）
もうひとつのお題
色と数値をちょこっと変えただけのコード
<div style="width: 320px; height: 65px; font-size: 29px; color: yellow; text-align: center; text-shadow: 1px 1px 2px green; background-image: linear-gradient(90deg,#ff2727 50%,#ffb121 50%),linear-gradient(90deg,#ffb121 50%,#ff2727 50%); background-size: 80px 20px,80px 20px; background-position: 0% 25px,0% 45px; background-repeat: repeat-x;">沖縄のシーサー</div>
やってみて凄く勉強になりました！
今まで「マーカー」って「上から下に向かうlinear-gradient」で基本、作っていましたが、今回「右に向かう」もので作る必要性に迫られました。
「右に向かう」で作るマーカー、っていうだけで十分ひとつの記事ネタになると思いましたが、それをすっとばしたのが今回の記事ですｗ
CSSでマーカー（蛍光ペン、という表現も含め）のやり方の解説サイトは多数ありますが、ほとんどが「上から下のlinear-gradient」パターン（そっちのほうが簡易だからですね）
が、世の中には「右に向かうマーカー」を使用したサイト・ブログも多数見かけますね。
…って思ってたら、そもそもLSSのブログも、h3見出しになっているのは
「右に向かって透明化していく赤いマーカー」
だった！という（はてなブログのテーマそのまま）オチでした^^;;;;;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
