きり丸の技術日記

技術検証したり、資格等をここに残していきます。

トップ > CSS > CSSで文字の上に強調のドットを付与したい

CSSで文字の上に強調のドットを付与したい

CSS 技術

CSSで文字の上に強調のドットを付与したかったので、それを設定した時のメモ。

ゴール

  • 特定の文字の上にのみドットを付与して強調する

文言はiZooのテーマソングから。

f:id:nainaistar:20210904212021p:plain

環境

  • Windows
    • Chrome
  • iPhone
    • Chrome

対応

次のCSSを設定すると、文字の上にドットを付与できます。

padding-top: .7em; // 文字とドットの距離
background-position: top left -2px; // ドットの位置微調整
background-repeat: repeat-x; // ドットをどの方向に設定するか
background-size: 1em 1em; // 繰り返す頻度
background-image: radial-gradient(orange 20%, transparent 30%); // ドットの大きさと色

なお、ドットを繰り返す回数を指定することはできないようです。親の要素にdisplay: flexを指定することで、必要な大きさのブロック要素になりますので、特定の文字の上にのみドットを表示できます。

また、ドットがある分、ドットがない文字との高さの位置が合わなくなるので、align-items: flex-end;を指定するとよいです。

ドットの大きさを％ではなく、文字の大きさで設定できそうでしたが…。

background-image: radial-gradient(.15em .15em at center center, orange, orange 100%, transparent);

なぜか、iPhoneの実機で確認すると、文字のドットが棒になってしまいました。原因は不明ですが、文字のサイズでは指定はしない方がよいでしょう。

PC:

f:id:nainaistar:20210904212021p:plain

iPhone：

f:id:nainaistar:20210904212054j:plain

ソースコード

<div class="flex">
  <div class="">
    ライオン
  </div>
  <div class="dot">
    いません
  </div>
</div>

.flex{
  display: flex;
  align-items: flex-end;
}

.dot {
  padding-top: .7em;
  background-position: top left -2px;
  background-repeat: repeat-x;
  background-size: 1em 1em;
  background-image: radial-gradient(orange 20%, transparent 30%);
}

終わりに

指摘されるまでドットの挙動がChromeとiPhoneで異なることに気付いていませんでした。Safariが原因かと思ったのですが…。

こういう、機種依存の問題まで含めると、本当にCSSは沼ですね…。

この記事がお役に立ちましたら、各種SNSでのシェアや、今後も情報発信しますのでフォローよろしくお願いします。

参考情報

f:id:nainaistar:20210904212250p:plain