「傍点（ぼうてん）」をCSSを使って文字を装飾する : ういすぷの記録帳

「傍点（ぼうてん）」は文字の上や横に強調（注意）させるために○や●を付けたりする装飾（点）を言います。
これが、CSSでやれる様になっていたのでメモします。

Firefoxは対応していましたが、他は「ベンダープレフィックス」を付けて下さい。またIEはダメでした。


ベンダーフレックスは次の通りです。
＞Firefox
-moz

＞Google Chrome , Safari
-webkit

＞Opera
-o

＞Internet Explorer
-ms


サンプル













傍点の色を変更
こちらも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 [任意の文字（１文字）]</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貼付けソースを作る「ぺたたぐ」を作ってみた。