Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS・背景】これが本当の波線マーカー!

 どうも!LSSです!!

 

 やっと出来ました!これが本当の波線マーカー!

 

 

以前、公開した記事の波線マーカー

 

…多分、多くの方が「いや、波線ってそうじゃないだろ!」っていう言葉を飲み込んだのではないでしょうか?w 

 ( こういうやつでした⛵ ) 

 

 あの時点の知識では、あれが精一杯でした^^;

 

 

色々やってて辿り着いた、今回の波線マーカー

 波線っていったら、本来はこうですよねwww ⛵    

 

 欲を言えば…これはまっすぐな斜め線を交互に配置しているので、曲線であるべき「完全なる波線」ではないですが、まぁ許容範囲かなとw

 

 

コード

<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を2つ、使用しています。

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; 

が「上がって下がる、波1つ」分のサイズを指定しています。(幅と高さ)
ここは「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%が波線を引く文字に対する波の高さで、大きくすると下、小さくすると上の位置にかぶります。

 

 

追記!区切り線としての利用

コメント欄に、

 

 421miyako (id:m421miyako)

質問!これ。文字無しでコードだけ書いたら波線だけが出ますか?罫線みたいに引くことは可能ですか?可能なら、マーカーも同じ原理ですよね。自分で試さないで聞いてしまう。

というコメントをいただきました!
 
 

 

↑こういう、区切り線としての利用でしたら、

<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>

 ↑こんな感じのコードでいけますね^^

 マーカーよりこっちの利用の方が良さそうな気もしてきましたwww

 

 

余談:実はマーカーじゃなくて下線なら凄く簡単w

こんな感じに下線でいいならとても簡単です。

 

コード

<span style="text-decoration: underline wavy lightblue;">こんな感じに下線でいいならとても簡単です。</span>

 

下線として波線を引くなら、もともとCSSに用意されてるんですねwww

 

下線とマーカーの違い…文字と重なるか重ならないか。

ですが、重ねようとすると結構面倒なコードになりました^^;;;

 

ただ、下線のほうはあまり変化を加えられないのに対し、今回の背景版だと「さらに凝った波線」にアレンジできる余地があるかもですね^^

 

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^