テンプレート:傍点
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のブラウザバージョンごとの対応状況