CSS - text-emphasis-style

• トップ
• CSSリファレンス
• text-emphasis-style

概要

説明

テキストの上部に注意すべき箇所であることを示す圏点(けんてん)を表示します。text-emphasis で他のプロパティとまとめて指定することができます。

使用例

.te { font-size: 20pt; }
.none { text-emphasis-style: none; }
.filled { text-emphasis-style: filled; }
.open { text-emphasis-style: open; }
.string { text-emphasis-style: 'x'; }
.filled-dot { text-emphasis-style: filled dot; }
.filled-circle { text-emphasis-style: filled circle; }
.filled-double-circle { text-emphasis-style: filled double-circle; }
.filled-triangle { text-emphasis-style: filled triangle; }
.filled-sesame { text-emphasis-style: filled sesame; }
.open-dot { text-emphasis-style: open dot; }
.open-circle { text-emphasis-style: open circle; }
.open-double-circle { text-emphasis-style: open double-circle; }
.open-triangle { text-emphasis-style: open triangle; }
.open-sesame { text-emphasis-style: open sesame; }

<div>
  <span class="te none">いろは</span>
  <span class="te filled">いろは</span>
  <span class="te open">いろは</span>
  <span class="te string">いろは</span>
</div>
<div>
  <span class="te filled-dot">いろは</span>
  <span class="te filled-circle">いろは</span>
  <span class="te filled-double-circle">いろは</span>
  <span class="te filled-triangle">いろは</span>
  <span class="te filled-sesame">いろは</span>
</div>
<div>
  <span class="te open-dot">いろは</span>
  <span class="te open-circle">いろは</span>
  <span class="te open-double-circle">いろは</span>
  <span class="te open-triangle">いろは</span>
  <span class="te open-sesame">いろは</span>
</div>

関連項目

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/text-emphasis-style
• https://drafts.csswg.org/css-text-decor/#text-emphasis-style-property