「傍点(ぼうてん)」をCSSを使って文字を装飾する
2017.02.12

「傍点(ぼうてん)」は文字の上や横に強調(注意)させるために○や●を付けたりする装飾(点)を言います。
これが、CSSでやれる様になっていたのでメモします。
Firefoxは対応していましたが、他は「ベンダープレフィックス」を付けて下さい。またIEはダメでした。
ベンダーフレックスは次の通りです。
>Firefox
-moz
>Google Chrome , Safari
-webkit
>Opera
-o
>Internet Explorer
-ms
サンプル
dot filled [小さい ●]
dot open [小さい ○]
circle filled [大きい ●]
circle open [大きい ○]
double-circle filled [◎の中黒]
double-circle open [◎]
triangle filled [▲]
triangle open [△]
sesame filled [ゴマ]
sesame open [白ゴマ]
text [任意の文字(1文字)]
傍点の色を変更
こちらもfirefox意外はベンダーフレックスが必要です。
例>
-webkit-text-emphasis-color:#ff0000;
サンプルHTMLソース
<div class="dot_filled">dot filled [小さい ●]</div>
<div class="dot_open">dot open [小さい ○]</div>
<div class="circle_filled">circle filled [大きい ●]</div>
<div class="circle_open">circle open [大きい ○]</div>
<div class="double-circle_filled">double-circle filled [◎の中黒]</div>
<div class="double-circle_open">double-circle open [◎]</div>
<div class="triangle_filled">triangle filled [▲]</div>
<div class="triangle_open">triangle open [△]</div>
<div class="sesame_filled">sesame filled [ゴマ]</div>
<div class="sesame_open">sesame open [白ゴマ]</div>
<div class="text">text [任意の文字(1文字)]</div>
サンプルCSSソース
.bouten {
letter-spacing:0.1em;
text-emphasis-color:#ff0000;
font-size:140%;
background-color:#fafafa;
}
.dot_filled {
text-emphasis-style:dot filled;
-webkit-text-emphasis-style:dot filled;
}
.dot_open {
text-emphasis-style:dot open;
-webkit-text-emphasis-style:dot open;
}
.circle_filled {
text-emphasis-style:circle filled;
-webkit-text-emphasis-style:circle filled;
}
.circle_open {
text-emphasis-style:circle open;
-webkit-text-emphasis-style:circle open;
}
.double-circle_filled {
text-emphasis-style:double-circle filled;
-webkit-text-emphasis-style:double-circle filled;
}
.double-circle_open {
text-emphasis-style:double-circle open;
-webkit-text-emphasis-style:double-circle open;
}
.triangle_filled {
text-emphasis-style:triangle filled;
-webkit-text-emphasis-style:triangle filled;
}
.triangle_open {
text-emphasis-style:triangle open;
-webkit-text-emphasis-style:triangle open;
}
.sesame_filled {
text-emphasis-style:sesame filled;
-webkit-text-emphasis-style:sesame filled;
}
.sesame_open {
text-emphasis-style:sesame open;
-webkit-text-emphasis-style:sesame open;
}
.text {
text-emphasis-style:"@";
-webkit-text-emphasis-style:"@";
}
傍点もやっと使える様になったといったところでしょうか。
まだまだ完璧とは言えませんが、一つの表現としてどうでしょうか。
□ 関連記事
・
「RTFree」用バッチ作成機 をアップデートしました。
・
Yahooショッピングで取得出来る画像サイズ指定メモ
・
全角英数字を半角英数字に変換する「全角→半角」サービス
・
半角英数字を全角英数字に変換する「半角→全角」サービス
・
Twitter で取得できる画像サイズの指定メモ
・
CSSで文字や画像を点滅させる。点滅メーカー
・
ランダムな英数字の文字列を生成する「パスワードメーカー」
・
JavaScript(jQuery)でバーコード作成!
・
横三本線(二本線)のハンバーガーメニューを止めました。
・
「RTFree」用バッチ作成機
・
CSS3で文字や画像を選択させない様にする。
・
テキストデータからJavaScript貼付けソースを作る「ぺたたぐ」を作ってみた。