テンプレート:傍点
CSSを使用して傍点(圏点)による強調表現を再現するテンプレートです。{{傍点|強調部分}}
とマークアップすると、強調部分と出力されます。
使い方
編集最も簡単な使い方として、{{傍点|強調部分}}
とマークアップすると強調部分と出力されます。デフォルトで黒ゴマ(﹅)傍点が文字上部に振られます。
傍点の形を指定する
編集style
引数で傍点の形を指定できます。黒 (filled
) か白抜き (open
) かの指定の後に、スペースを挟み、ゴマ (sesame
)、点 (dot
)、丸 (circle
)、二重丸 (double-circle
)、三角 (triangle
)のいずれかを指定します。
マークアップ | 出力結果 |
---|---|
ここが{{傍点|style=open circle|強調部分}}です。 |
ここが強調部分です。
|
黒filled |
白抜きopen
| |
---|---|---|
ゴマsesame
|
ここが強調部分です。 | ここが強調部分です。 |
点 dot
|
こここが強調部分です。 | ここが強調部分です。 |
丸circle
|
ここが強調部分です。 | ここが強調部分です。 |
蛇の目・二重丸double-circle
|
ここが強調部分です。 | ここが強調部分です。 |
三角triangle
|
ここが強調部分です。 | ここが強調部分です。 |
任意の文字を傍点に指定する
編集これらのキーワード以外にも、任意の一文字を傍点として使用することができます。傍点に使用したい文字をシングルクォートで囲んで指定します。この場合はfilled
やcircle
などのキーワードは指定しません。
マークアップ | 出力結果 |
---|---|
ここが{{傍点|style='✗'|強調部分}}です。 |
ここが強調部分です。
|
互換性
編集2017年現在、Chrome、Firefox、Safari、Operaの各ブラウザが傍点表示に対応しています。Internet Explorer及びEdgeは未対応です。各ブラウザの詳細な対応状況はCaniuse.comを参照してください。
傍点がもつ強調というセマンティクスを表現するため、また傍点に対応していないブラウザやCSSオフ状態で表示したときに強調部分を区別するため、このテンプレートで出力される文字部分はem
タグで囲み、さらに太字で表示されるようになっています。
その他
編集- {{dot}}でも代用できます。
関連項目
編集- テンプレート:二重線 - 傍線
外部リンク
編集- CSS Text Decoration Module Level 3 - W3C CSSWGによる
text-emphasis-style
の仕様書 - text-emphasis-style - CSS | MDN - Mozillaによる
text-emphasis-style
の技術文書 - Can I use... Support tables for HTML5, CSS3, etc -
text-emphasis-style
のブラウザバージョンごとの対応状況