今回の記事で紹介するプロパティは、IEやfirefoxでは利用できません。
語句を強調するため、文字の脇または上下に付ける点を圏点(傍点)といい、この圏点のスタイルや表示する位置を指定するプロパティを今回書いていきます。
text-emphasis-styleプロパティ
圏点の種類と、塗り潰すかどうかを指定します。「none」と「文字列」以外は、「種類」と「塗りつぶし」を表すキーワードを、任意の順番で並べ、半角スペースで区切り指定します。塗りつぶしの指定を省略したときは「filled」、種類の指定を省略したときは、横書きであれば「circle」、縦書きなら「sesame」を指定したものとして扱われます。
設定値 | 説明 |
---|---|
none | 圏点を表示しない |
種類 | |
設定値 | 説明 |
dot | 点 |
circle | 円 |
double-circle | 2重丸 |
triangle | 三角 |
sesame | ゴマ |
塗りつぶし | |
設定値 | 説明 |
fill | 塗りつぶす |
open | 塗り潰さない |
文字列 | |
設定値 | 説明 |
任意の1文字 | 圏点に利用したい1文字を指定する。 |
text-emphasis-colorプロパティ
圏点の色を指定する。
text-emphasisプロパティ
text-emphasis-style,text-emphasis-colorに必要な値を一括指定する。必要な値を任意の順番に並べて、半角スペースで区切って指定する。値を省略すると初期値が指定されたものとして扱われます。
text-emphasis-positionプロパティ
圏点を表示する位置を指定する。横書きでの位置と、縦書きでの位置を、半角スペースで区切って指定する。初期値は「over right」です。
縦書きでの位置 | |
設定値 | 説明 |
---|---|
over | 文字の上 |
under | 文字の下 |
横書きでの位置 | |
設定値 | 説明 |
left | 文字の左 |
right | 文字の右 |
「left」「right」に対応しているブラウザであるの??
サンプルコードの実行結果はこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>圏点を指定してみる</title> <style> .k1{ -webkit-text-emphasis-style:circle filled; text-emphasis-style:circle filled; -webkit-text-emphasis-color:skyblue; text-emphasis-color:skyblue; } .k2{ -webkit-text-emphasis:triangle filled red; text-emphasis:triangle filled red; -webkit-text-emphasis-position:under; text-emphasis-position:under; } .k3{ -webkit-text-emphasis-style:"´"; text-emphasis-style:"´"; -webkit-text-emphasis-color:#00ff00; text-emphasis-color:#00ff00; } .k4{ -webkit-text-emphasis:black filled double-circle; text-emphasis:black filled double-circle; } .vWrite{ -ms-writing-mode:tb-rl; -webkit-writing-mode:vertical-rl; writing-mode:vertical-rl; } </style> </head> <body> <p>文1:圏点をCSSを<span class="k1">利用して表示</span>してみる。</p> <p>文2:圏点をCSSを<span class="k2">利用して表示</span>してみる。</p> <p>文3:圏点をCSSを<span class="k3">利用して表示</span>してみる。</p> <p class="vWrite" style="height:180px;">文4:圏点をCSSを<span class="k4">利用して表示</span>してみる。</p> </body> </html> |