【CSS・背景】これが本当の波線マーカー！
どうも！LSSです！！
やっと出来ました！これが本当の波線マーカー！
以前、公開した記事の波線マーカー
…多分、多くの方が「いや、波線ってそうじゃないだろ！」っていう言葉を飲み込んだのではないでしょうか？ｗ
（ こういうやつでした⛵ ）
あの時点の知識では、あれが精一杯でした^^;
色々やってて辿り着いた、今回の波線マーカー
波線っていったら、本来はこうですよねｗｗｗ ⛵
欲を言えば…これはまっすぐな斜め線を交互に配置しているので、曲線であるべき「完全なる波線」ではないですが、まぁ許容範囲かなとｗ
コード
<span style="background-image: linear-gradient(135deg,transparent 30%,lightblue 50%,transparent 70%), linear-gradient(225deg,transparent 30%,lightblue 50%,transparent 70%); background-size: 16px 8px; background-position: 0px 80%,8px 80%; background-repeat: repeat-x;">これが本当の波線マーカー！</span>
コード解説
まず、分かりやすいように改行入れますね。
<span style="
background-image:
linear-gradient(135deg,transparent 30%,lightblue 50%,transparent 70%)
, linear-gradient(225deg,transparent 30%,lightblue 50%,transparent 70%)
;
background-size: 16px 8px;
background-position: 0px 80%,8px 80%;
background-repeat: repeat-x;
">これが本当の波線マーカー！</span>
background-image:
linear-gradient(135deg,transparent 30%,lightblue 50%,transparent 70%)
, linear-gradient(225deg,transparent 30%,lightblue 50%,transparent 70%)
;
linear-gradientを２つ、使用しています。
135degのほうが、右上がりの線、225degの方が右下がりの線です。
linear-gradientの中で指定しているうち、
lightblue 50%
が、線の幅のうちの中心部分となり、それを挟んでいる
transparent 30% と transparent 70%
が、線の幅を「挟んでいる部分」となります。
これは50%を中心に対象である事が望ましく、30%と70%はどちらも50%から20%差があるという対象になっています。
この差を小さく…例えば40%と60%にすると線が細くなります。
background-size: 16px 8px;
background-position: 0px 80%,8px 80%;
background-repeat: repeat-x;
background-size: 16px 8px;
が「上がって下がる、波１つ」分のサイズを指定しています。（幅と高さ）
ここは「2:1」の比率になるように指定する必要があります。
background-position: 0px 80%,8px 80%;
の80%の部分は、波線を引いた文字に対する高さを調整する部分で、大きくすると下に、小さくすると上に、波線の位置が移動します。
また、8pxの部分はbackground-sizeで指定した「2：1」の比率のうち「1」の方の数値に合わせておく必要があります。
background-repeat: repeat-x;
の指定によって、横方向に波が繰り返されます。
改変調整ポイントまとめ
<span style="
background-image:
linear-gradient(135deg,transparent 30%,lightblue 50%,transparent 70%)
, linear-gradient(225deg,transparent 30%,lightblue 50%,transparent 70%)
;
background-size: 16px 8px;
background-position: 0px 80%,8px 80%;
background-repeat: repeat-x;
">これが本当の波線マーカー！</span>
…今回、指定の決め事が色々うるさいですが…^^;
30%と70%が波線の太さに関わる部分で、50%との差が同じになるように調整。
（差が小さいほど線が細くなります）
lightblueが波線の色を指定している部分。
16px 8px は2：1の比率を保つ必要がありますが、波のサイズを指定している部分。
うち8pxの方は次の行でも合わせておくこと。
80%が波線を引く文字に対する波の高さで、大きくすると下、小さくすると上の位置にかぶります。
追記！区切り線としての利用
コメント欄に、
というコメントをいただきました！
↑こういう、区切り線としての利用でしたら、
<div style="background-image: linear-gradient(135deg,transparent 30%,lightblue 50%,transparent 70%), linear-gradient(225deg,transparent 30%,lightblue 50%,transparent 70%); background-size: 16px 8px; background-position: 0px 80%,8px 80%; background-repeat: repeat-x;"></div>
↑こんな感じのコードでいけますね^^
マーカーよりこっちの利用の方が良さそうな気もしてきましたｗｗｗ
余談：実はマーカーじゃなくて下線なら凄く簡単ｗ
こんな感じに下線でいいならとても簡単です。
コード
<span style="text-decoration: underline wavy lightblue;">こんな感じに下線でいいならとても簡単です。</span>
下線として波線を引くなら、もともとCSSに用意されてるんですねｗｗｗ
下線とマーカーの違い…文字と重なるか重ならないか。
ですが、重ねようとすると結構面倒なコードになりました^^;;;
ただ、下線のほうはあまり変化を加えられないのに対し、今回の背景版だと「さらに凝った波線」にアレンジできる余地があるかもですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
質問！これ。文字無しでコードだけ書いたら波線だけが出ますか？罫線みたいに引くことは可能ですか？可能なら、マーカーも同じ原理ですよね。自分で試さないで聞いてしまう。