お問い合わせはコチラから

CSS リストの数字にtext-shadowが効かない!簡単に対処できます。

サイト運営

li要素の先頭を数字(<ol>)にして、li要素にtext-shadowをあてた時の話です。

この記事では、『リスト要素(ol)の数字にtext-shadowが効かない』場合の対処方法についてまとめています。

実機でリスト要素の数字にtext-shadowが効かない

PCでは先頭の数字も含めてtext-shadowが効きました。検証ツールなどでレスポンシブで確認したところSPでも問題ありません。

しかし、スマホの実機で確認したところ、iOSではリスト要素の先頭の数字だけ、text-shadowが効かないように見えました。

解決策:olを使わず自前で番号を振る

ol⇒ulに変更して、li要素に疑似要素で連番を振るようにします。こうすることでtext-shadowが数字部分にも適用されます。

li {
  list-style-type: none;
  counter-increment: number;
}

li::before{
  content: counter(number) ".";
  margin-right: 5px;
  color: red;
  text-shadow: 1px 1px 2px black;
}

まとめ

検証ツールで問題ないのに、iOSの実機で問題が起きるパタンは結構あります。今回もそのような事例の一つです。

もし、リスト要素を連番にして、数値部分にtext-shadowが効かなかったらこの記事を思い出してください。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました