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

「傍点(ぼうてん)」をCSSを使って文字を装飾する
「傍点(ぼうてん)」は文字の上や横に強調(注意)させるために○や●を付けたりする装飾(点)を言います。
これが、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貼付けソースを作る「ぺたたぐ」を作ってみた。


2017.02.12

コメント投稿フォーム