cman.jp > WEBページ作成TOP > CSSリファレンス
WEBページ作成
広告
text-emphasis,text-emphasis-color,text-emphasis-style 「圏点の色、形を指定」
圏点の色、形（塗りつぶしと種類）を指定します。
- 「text-emphasis」は、圏点の色、塗りつぶしと種類ををまとめて指定します。省略した値は、それぞれの初期値が設定されます。
- 「text-emphasis-color」は、圏点の色を指定します。
- 「text-emphasis-style」は、圏点の塗りつぶしと種類を指定します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全要素 | する |
広告
text-emphasis,text-emphasis-color,text-emphasis-style の指定方法
| 構文 | |
|---|---|
|
text-emphasis : text-emphasis-color || text-emphasis-style; text-emphasis-color : 圏点の色; text-emphasis-style : none | [[filled | open] || [triangle | circle | double-circle | triangle | sesame]] | 文字列 ; |
|
| プロパティ/設定値 | 意味 |
| text-emphasis: text-emphasis-color text-emphasis-style; | 圏点の色、塗りつぶしと種類をスペースで区切って、任意の順で指定。 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
| text-emphasis-color: 圏点の色; |
色をコードやネームで指定。 「色の見本」参照。 見本以外の色は、「色を作成」で、作成。 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
| text-emphasis-style: none; | 圏点なし |
| text-emphasis-style: filled; |
塗りつぶす 初期値（filled、openのどちらも指定ない場合、filledとなる。） |
| text-emphasis-style: open; | 中抜き（塗りつぶさない） |
| text-emphasis-style: triangle; | 小さな円。塗りつぶしは「•」、中抜きは、「◦」 |
| text-emphasis-style: circle; |
大きな円。塗りつぶしは「●」、中抜きは、「○」 横書きの初期値（横書きで種類の指定がない場合、circleとなる） |
| text-emphasis-style: double-circle; | 二重丸。塗りつぶしは「◉」、中抜きは、「◎」 |
| text-emphasis-style: triangle; | 三角。塗りつぶしは「▲」、中抜きは、「△」 |
| text-emphasis-style: sesame; |
ゴマ。塗りつぶしは「﹅」、中抜きは、「﹆」 縦書きの初期値（縦書きで種類の指定がない場合、sesameとなる） |
| text-emphasis-style: 文字列; |
圏点として使用する文字を1文字指定 ２文字以上指定した場合、切り捨てまたは無効となる |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
※ 未対応のブラウザの場合、ベンダープレフィックスが必要です。
text-emphasis,text-emphasis-color,text-emphasis-style のサンプル
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
.css-blue-open-triangle{
text-emphasis : blue open triangle;
}
.css-color-blue{
text-emphasis-color : blue;
}
.css-style-open-triangle{
text-emphasis-style : open triangle;
}
.css-double-circle{
text-emphasis : double-circle;
}
.css-style-double-circle{
text-emphasis-style : double-circle;
}
.css-filled{
text-emphasis : filled;
}
.css-style-filled{
text-emphasis-style : filled;
}
.css-q{
text-emphasis : "?";
}
.css-style-q{
text-emphasis-style : "?";
}
</style>
<!-- html -->
<div class="common">
<div class="cssTitle">text-emphasis : blue open triangle</div>
<div>
<span class="css-blue-open-triangle">
圏点の色、形を指定</span>
</div>
<div class="cssTitle">text-emphasis-color : blue text-emphasis-style : open triangle</div>
<div>
<span class="css-color-blue css-style-open-triangle">
圏点の色、形を指定</span>
</div>
<div class="cssTitle">text-emphasis : double-circle</div>
<div>
<span class="css-double-circle">
圏点の色、形を指定</span>
</div>
<div class="cssTitle">text-emphasis-style : double-circle</div>
<div>
<span class="css-style-double-circle">
圏点の色、形を指定</span>
</div>
</div>
text-emphasis : blue open triangle
圏点の色、形を指定
text-emphasis-color : blue
text-emphasis-style : open triangle
text-emphasis-style : open triangle
圏点の色、形を指定
text-emphasis : double-circle
圏点の色、形を指定
text-emphasis-style : double-circle
圏点の色、形を指定
text-emphasis : filled
圏点の色、形を指定
text-emphasis-style : filled
圏点の色、形を指定
text-emphasis : "?"
圏点の色、形を指定
text-emphasis-style : "?"
圏点の色、形を指定
| 関連するCSS(STYLE) | |
|---|---|
| text-align | 横（水平）方向の文字位置 |
| text-decoration | 文字の装飾線の表示 |
| text-emphasis-position | 圏点の位置を指定 |
| text-indent | １行目のインデント |
| text-justify | 両端揃えの調節方法 |
| text-overflow | オーバーフローしたテキストの省略表示 |
| text-shadow | 文字の影付け |
| text-transform | 字形の変換 |
| text-underline-position | 文字下線の位置を指定 |
| text-decoration-line | 文字の装飾線の位置を指定 |
| text-decoration-style | 文字の装飾線の種類を指定 |
| text-decoration-color | 文字の装飾線の色を指定 |
| text-emphasis-color | 圏点の色を指定 |
| text-emphasis-style | 圏点の形を指定 |
広告