CSSで表現する圏点(IE対応)・蛍光マーカー・手書き風下線

まめわざでは、ブログの編集機能などと同じように、文字の一部のリンク化や強調ができます。
この強調表現で、圏点(傍点・脇点)・蛍光マーカー手書き風下線が使えるようになりました。

利用できる強調表現のサンプル

それぞれの強調表現は縦書きに対応しています。また、文字の大きさに応じて強調表現のサイズも変わるので、それぞれで横・横(大)・縦・縦(大)の4つのサンプルを用意しました。

圏点(傍点・脇点)

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

蛍光マーカー

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

手書き風下線

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

強調表現の使い方(まめわざユーザー向け)

強調表現は、文字をマウスで囲んで右クリックして実行できます。リンクの設置や、文字の色・サイズを変更する際と同じです。

編集中に文字を囲み、右クリックをします。

ご希望の強調表現を選び、「装飾を適用」を押します。
強調1・強調2・文字色・文字サイズはそれぞれ変更ができるので、例えば「太字・下線付・赤字・2.5倍サイズ」を一度に設定することができます。
一方で、強調2に含まれる下線・蛍光ペン・圏点は重複して選択できません。例えば「下線付き圏点」はできません。

注意点

  • 縦書き用の下線・蛍光マーカー・圏点は横書き用とは異なります。
    縦書き・横書きを入替えた際、これらの強調を使っている場合は再設定が必要です。
  • 圏点は全角1文字に1点ずつ表示されます。半角を使うとズレが生じます。また一部のブラウザでは、小さな文字と利用するとズレる場合があります。

(技術的な説明)CSSで表現する圏点

圏点はCSS3で次のように決められています。

text-emphasis: (点の種類) (色);
例)text-emphasis: dot #000;

しかしIEが実装していないので、この方法は利用しない方が無難です。
そこで、radial-gradientとbackground-sizeを併用して点を表現します。

span.kenten {
    padding: 0.3em 0;
    background-repeat: repeat-x;
    background-size: 1em 0.2em;
    background-position: top left;
    background-image: -webkit-gradient(radial,center center,0,center center,1.5,from(#000000),color-stop(0.5,#000000),color-stop(0.9,transparent),to(transparent));
    background-image: -webkit-radial-gradient(center center, 0.1em 0.1em, #000000, #000000 95%, transparent 95%, transparent);
    background-image: radial-gradient(0.1em 0.1em at center center, #000000, #000000 95%, transparent);
} 

-webkit-gradientと-webkit-radial-gradientはクロスブラウザ対策用です。

縦書き

縦書きの場合は、radial-gradientとbackground-sizeをそれぞれ調整し、background-positionを縦書きに適した位置に変更します。

p.tate span.kenten {
    padding: 0 0.3em;
    background-repeat: repeat-y;
    background-size: 0.2em 1em;
    background-position: top right;
    background-image: -webkit-gradient(radial,center center,0,center center,1.5,from(#000000),color-stop(0.5,#000000),color-stop(0.9,transparent),to(transparent));
    background-image: -webkit-radial-gradient(center center, 0.1em 0.1em, #000000, #000000 95%, transparent 95%, transparent);
    background-image: radial-gradient(0.1em 0.1em at center center, #000000, #000000 95%, transparent);
} 

background-imageは横書きと同一です。

(技術的な説明)CSSで表現する蛍光マーカー(蛍光ペン)

蛍光ペンを表現するために次の4つを実装します。

  • テキストの全体ではなく下側の一部だけを塗る
  • 一部を斜めにして手書き感を表現
  • 白い線を入れてカスレを表現
  • 蛍光っぽいパステルカラーを利用

1~3の表現にはlinear-gradientを利用します。

span.highlighter {
    background-size: 100% 1em;
    background-repeat: repeat-x;

    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(253,205,160,0)), color-stop(0.5, rgba(253,205,160,0)), color-stop(0.6, rgba(253,205,160,1)), color-stop(0.98, rgba(253,205,160,1)), to(rgba(253,205,160,0)) );

    background-image:
        -webkit-linear-gradient(top, rgba(253,205,160,0), rgba(253,205,160,0) 63%, rgba(255,255,255,0.6) 64%, rgba(255,255,255,0.6) 67%, rgba(253,205,160,0) 68%),
        -webkit-linear-gradient(top, rgba(253,205,160,0), rgba(253,205,160,0) 55%, rgba(255,255,255,0.5) 56%, rgba(255,255,255,0.5) 60%, rgba(253,205,160,0) 61%),
        -webkit-linear-gradient(271deg, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0)),
        -webkit-linear-gradient(top, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0));

    background-image:
        linear-gradient(to bottom, rgba(253,205,160,0), rgba(253,205,160,0) 63%, rgba(255,255,255,0.6) 64%, rgba(255,255,255,0.6) 67%, rgba(253,205,160,0) 68%),
        linear-gradient(to bottom, rgba(253,205,160,0), rgba(253,205,160,0) 55%, rgba(255,255,255,0.5) 56%, rgba(255,255,255,0.5) 60%, rgba(253,205,160,0) 61%),
        linear-gradient(179deg, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0)),
        linear-gradient(to bottom, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0));
} 

最後のbackground-imageで中身を見てみましょう。
まず、全体に50%あたりからグラデーションをはじめることで、文字の下部だけに色を重ねています。
1番目と2番目のlinear-gradientはカスレを表現する白、3番目と4番目がマーカーの実線です。3番めは角度を1度だけ傾けて手書き感を演出しています。
transparentの代わりにrgbaを使うことで、iOSなど一部Safariでグラデーションが黒くなるのを防いでいます。
-webkit-gradientと-webkit-radial-gradientはクロスブラウザ対策用です。

縦書き

縦書きの場合は、linear-gradient・background-size・background-repeatをそれぞれ縦書き向けに調整しています。

span.highlighter {
    background-size: 1em 100%;
    background-repeat: repeat-y;

    background-image: -webkit-gradient(linear, left bottom, right bottom, from(rgba(253,205,160,0)), color-stop(0.5, rgba(253,205,160,0)), color-stop(0.6, rgba(253,205,160,1)), color-stop(0.98, rgba(253,205,160,1)), to(rgba(253,205,160,0)) );

    background-image:
        -webkit-linear-gradient(right, rgba(253,205,160,0), rgba(253,205,160,0) 63%, rgba(255,255,255,0.6) 64%, rgba(255,255,255,0.6) 67%, rgba(253,205,160,0) 68%),
        -webkit-linear-gradient(right, rgba(253,205,160,0), rgba(253,205,160,0) 55%, rgba(255,255,255,0.5) 56%, rgba(255,255,255,0.5) 60%, rgba(253,205,160,0) 61%),
        -webkit-linear-gradient(179deg, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0)),
        -webkit-linear-gradient(right, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0));

    background-image:
        linear-gradient(to left, rgba(253,205,160,0), rgba(253,205,160,0) 63%, rgba(255,255,255,0.6) 64%, rgba(255,255,255,0.6) 67%, rgba(253,205,160,0) 68%),
        linear-gradient(to left, rgba(253,205,160,0), rgba(253,205,160,0) 55%, rgba(255,255,255,0.5) 56%, rgba(255,255,255,0.5) 60%, rgba(253,205,160,0) 61%),
        linear-gradient(271deg, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0)),
        linear-gradient(to left, rgba(253,205,160,0), rgba(253,205,160,0) 50%, rgba(253,205,160,1) 60%, rgba(253,205,160,1) 99%, rgba(253,205,160,0));
} 

(技術的な説明)CSSで表現する手書き風下線

HTMLには下線が用意されていますが、「下線=リンク=クリック可」という認識が一般化しているため、強調表現として下線を使うのは避けた方が親切です。
そこで、このリンクに使われる下線を使わずに、強調表現らしい下線を用意しました。

span.underline {
    background-repeat: repeat-x;
    background-size: 0.6em 0.2em,1.6em 0.2em,3.4em 0.2em,3.6em 0.2em;
    background-position: right bottom;

    background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(246,89,115,0)), color-stop(0.1, rgba(246,89,115,0.02)), color-stop(0.5, rgba(246,89,115,1)), color-stop(0.98, rgba(246,89,115,0)), to(rgba(246,89,115,0)) );
    background-image:
            -webkit-radial-gradient(center center,0.2em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.1em,rgba(246,89,115,0) 0.2em),
            -webkit-radial-gradient(center center,0.4em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.3em,rgba(246,89,115,0) 0.4em),
            -webkit-radial-gradient(center center,0.7em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.6em,rgba(246,89,115,0) 0.7em),
            -webkit-radial-gradient(center center,7.1em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 7em,rgba(246,89,115,0) 7.1em);
    background-image:
            radial-gradient(0.2em 0.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
            radial-gradient(0.4em 0.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
            radial-gradient(0.7em 0.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
            radial-gradient(7.1em 0.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0));
} 

radial-gradientとbackground-sizeを4パターン展開して様々なサイズの楕円を重ね、手書き風のボコボコ感を表現しています。
transparentの代わりにrgbaを使うことで、iOSなど一部Safariでグラデーションが黒くなるのを防いでいます。
-webkit-gradientと-webkit-radial-gradientはクロスブラウザ対策用です。

縦書き

background-repeat・background-size・background-position・radial-gradientをぞれぞれ縦向きに調整しています。

span.underline {
    background-repeat: repeat-y;
    background-size: 0.2em 0.6em,0.2em 1.6em,0.2em 3.4em,0.2em 3.6em;
    background-position: right bottom;

    background-image:-webkit-gradient(linear, left bottom, right bottom, from(rgba(246,89,115,0)), color-stop(0.1, rgba(246,89,115,0.02)), color-stop(0.5, rgba(246,89,115,1)), color-stop(0.98, rgba(246,89,115,0)), to(rgba(246,89,115,0)) );
    background-image:
            -webkit-radial-gradient(center center,0.1em 0.2em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.1em,rgba(246,89,115,0) 0.2em),
            -webkit-radial-gradient(center center,0.4em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.1em,rgba(246,89,115,0) 0.2em),
            -webkit-radial-gradient(center center,0.1em 0.7em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.1em,rgba(246,89,115,0) 0.2em),
            -webkit-radial-gradient(center center,0.1em 7.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.1em,rgba(246,89,115,0) 0.2em);
    background-image:
            radial-gradient(0.1em 0.2em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
            radial-gradient(0.1em 0.4em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
            radial-gradient(0.1em 0.7em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
            radial-gradient(0.1em 7.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0));
} 

本ページのコードの利用について

本ページのコードはご自由にご利用いただけます。改変も結構です。また、報告は不要です。
rgba()の中身を変えると色を変更できます。色以外のカスタマイズはやや難易度が高めです。
気に入っていただけましたら、ぜひシェアをお願いいたします。

2016/12/20