二重線や三重線も簡単なバリエーション

前記事 に続き、「linear-gradient」コードの柔軟性を生かして二重線・三重線を引くコードを作りました。 以下のコードは「装飾線の幅」「装飾線の間隔」「文字への配置位置」を自在に指定出来るところが特徴です。

 

「background」以下のコードが長くなりますが、擬似要素を使うコードなどでは複数の要素に「position」指定などを使う必要があります。 それに対して、このコードは装飾線のための追加プロパティが1つで済み、シンプルで適用性が高いでしょう。

 

また、このページでは「取り消し線」のコードで説明していますが、二重下線(二重のアンダーライン)は開始位置を変えるだけで実現出来ます。

 

サンプルのHTMLとCSS

HTML

<html><body>
<div id="ContA">
万能の<span>けし</span>線<br>
</div>
</body><html>

 

CSS

#ContA {
    font-family: Meiryo;
    line-height: 1.5;
    margin: 10px;
    padding: 0.2em;
    width: fit-content;
    border: 1px solid #aaa; }

 

CSSは、この後に「span」を修飾するコードを追加します。

 

二重取り消し線 

  (装飾線の開始位置は 0.6em、1px幅、間隔 2px、線色は#f00 赤です)

span {
    background: linear-gradient( transparent 0.6em, #f00 0, #f00 calc(0.6em + 1px), transparent 0, transparent calc(0.6em + 3px), #f00 0, #f00 calc(0.6em + 4px), transparent 0); }

 

 

以下は上のコードを改行して判り易くしたもので、実装は改行を省きます

 

span {
    background: linear-gradient(
    transparent 0.6em,
    #f00 0, #f00 calc(0.6em + 1px),
    transparent 0, transparent calc(0.6em + 3px),
    #f00 0, #f00 calc(0.6em + 4px),
    transparent 0
    ); }

 

  #f00   ▶ 装飾線の色を指定

    0.6em ▶ 1本目装飾線の開始位置を「em値」で指定

  1px     ▶ 1本目装飾線の終了位置、上行に固定幅の1pxを足す「+1px」

  3px     ▶ 2本目装飾線の開始位置、上行に間隔の2pxを足す「+3px」

  4px     ▶ 2本目装飾線の終了位置、上行に固定幅の1pxを足す「+4px」

 

三重取り消し線 

 (装飾線の開始位置は 0.5em、1px幅、間隔 2px、線色は#f00 赤です)

span {
    background: linear-gradient( transparent 0.5em, #f00 0, #f00 calc(0.5em + 1px), transparent 0, transparent calc(0.5em + 3px), #f00 0, #f00 calc(0.5em + 4px), transparent 0, transparent calc(0.5em + 6px), #f00 0, #f00 calc(0.5em + 7px), transparent 0); }

 

 

 

CSS変数を使った万能型

CSS変数を使い、更に消し線を簡単に設定できるコードにしました。 ただし、これは特殊な必要がなければ、冗長なコードで実用性は「?」です。 もしページ上にとても多数の取り消し線があるとしたら、このコードは描画スピードも気になります。

 

このコードは、上記の位置パラメーターがどの様に計算されるかを理解するための見本としての意味が大です。 判り易くするために、プロパティを改行していますが、実際のCSSでは改行は削除します。

 

:root {
    --s: 0.45em;
    --w: 1px;
    --c: 2.5px;
    --col: #f00; }

span {
    background: linear-gradient(
    transparent var(--s),
    var(--col) 0, var(--col) calc(var(--s) + var(--w)),
    transparent 0, transparent calc(var(--s) + var(--w) + var(--c)),
    var(--col) 0, var(--col) calc(var(--s) + var(--w) + var(--c) + var(--w)),
    transparent 0, transparent calc(var(--s) + var(--w) + var(--c) + var(--w) + var(--c)),
    var(--col) 0, var(--col) calc(var(--s) + var(--w) + var(--c) + var(--w) + var(--c) + var(--w)),
    transparent 0
    ); }

 

コードの最初で各CSS変数の値を指定して、この指定値で三重線を描いています。

各変数の意味は、

    --s  ▶ 装飾線の上からの開始位置を「em値」で指定

    --w   ▶ 装飾線の固定幅を「px値」で指定

    --c    ▶ 装飾線の間隔を「px値」で指定

    --col ▶ 装飾線の色を指定

 

このコードの実際の表示は以下です。 良く見ると先の三重取り消し線と開始位置や線の間隔が異なります。