CSS で文字を上書きする方法についての考察

最終更新日:2015-03-30

ここでは、CSS を使って文字を上書きする方法について考察したいと思います。

以下の CSS を使うと、

ショートコード「recipe」の「時間:」のところを「目安調理時間:」に差し替えることができます。

2015-03-27 at 14.32

comemoarrow

2015-03-27 at 14.10

ie9 (IETester で模擬)

2015-03-27 at 14.12

ie11

2015-03-27 at 14.14

mac の Google Chrome

2015-03-27 at 14.14

mac の Safari

2015-03-27 at 14.12

mac の Firefox

Clipboard

iPad 3

Clipboard

i pod touch 5

 

以下、論点を列記します。

ie8 では下側にずれてしまう

「:note(.hogehoge)」の部分を削除して、ie8 でも適用させるようにすると、以下のように差し替え部分が下側にずれてしまいます。

2015-03-27 at 14.10

ie8 (IETester で模擬)

ie8 以前で適用させないようにする方法として「:not(.hogehoge)」を使用

ネット上だと、ie8 で適用させないハックとして「\9」を追記する方法が提示されていますが、WordPress.com の場合、スタイルシートエディターで保存をかけるときに「\」が削除されてしまい、うまくいきません。

そこで、ここでは ie8 では「:not()」を含む命令自体が無効になることを利用して、「:not(.hogehoge)」を ie8 ハック替わりに使ってみました。なお、CSS の文法上は正しくない方法だと思うので、一般ユーザーに広めるような方法ではない・汎用性は低い方法かな、と思います。

before・after でのフォントサイズの指定は「px」が無難か?

before、after でフォントサイズを指定する場合、rem は ie8 未対応、em だと 0px が (おそらく) 承継されるので、フォントサイズの指定は「px」等でやっておくのが無難ではないかと個人的には考えます。 1

「font-size: 0px;」を使うと、とりあえず文字を消去できた

私の記憶が正しければ、ie (インターネット・エクスプローラ) の古いバージョンだと「font-size: 0px;」 だといろいろと不具合が発生していましたが、少なくとも今回の実験で試してみた限りにおいては、ie8 以上だとフォントサイズを 0 にすることで文字を消去できるようです。

「visibility:hidden」、「color:transparent」等を使っても消去することは可能ですが、別途、表示幅の調整が必要になるので、個人的には「font-size」を使ったほうがスマートかなと思います。

また、「z-index」で上からかぶせる方法もありますが、設定がちょっとややこしく、立体的に物事を捉えることが苦手な人にとっては理解し難く、汎用性が低い方法ではないかと個人的には考えています。


  1. 私自身は「rem」はほぼ全く使っていないのですが、記事「レスポンシブWebデザインでよく使うpx→remのサイズ表 | コックピット|2013-02-13」によると、iPhone 等にも対応させるためのレスポンシブデザイン設計をする場合、「rem」を使ったほうがいいそうです。 例えば、WordPress のデフォルトテーマ「Twenty Fifteen」でも「rem」が使われています。 

2件のコメント

  1. 詠み人シーラカンス · · 返信

    ie8だと、差し替え以降のベースラインが下がっちゃうんですか?

    いいね: 1人

    1. うまくいっていると思っていましたが、ベースラインが下がっていますね。今、気づきました。

      いいね

katsuhiro fuchinoue にコメントする コメントをキャンセル

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。