質問: 今スマホ向けのLPを作っています。 そこで下記のような ![![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/3f4f0ea51ed51e1904f10b0c7dd34a84.png) ものを作りたいと思っています。 二重になっている丸はIllustratorで作りpngにしました。 (この画像は「special_circle.png」です。) そしてこれを表現するためにこのようなコーディングをしました。 ``` タイトル テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ``` そしてcssはこのようにコーディングしました。 ``` .special1{ position: relative; } #allSpecial img{ width: 100%; } .spInner{ position: absolute; width: 90%; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } #allSpecial h2{ text-align: center; margin: 0 auto; padding-top: 40px; color: #EC5D57; border-bottom: 2px solid #EC5D57; width: 60%; } #allSpecial p{ width: 70%; margin: 0 auto; padding-top: 20px; font-size: 90%; color: #EC5D57; } ``` スマホのデバイスによって文字サイズが変化するようにfont-sizeを「%」指定しているのに、、 スマホのデバイスによって文字の大きさが変わりません。 なので例えばiPhone6でいい感じのサイズで作り、iphone5で見てみると赤い丸からテキストがはみ出していたり、iphone6plusで見ると全然丸が埋まっていなかったりします。。 初歩的な部分かもしれませんが、どうか教えていただけると嬉しいです。 よろしくお願い致します。
回答: font-sizeを%指定した場合、その基準となるものは親要素で設定されている文字サイズとなります。 親要素のfont-sizeが16px、子要素のfont-sizeが87.5%であれば14px相当です。 そしてそのサイズは、スクリーン幅とは何の関連もないため、 画像と同じような感覚で画面幅に合わせてデバイステキストの大きさを拡縮することは%指定ではできません。 デバイステキストの大きさを画面サイズに連動する形で変化させたいのであれば、 「vw」という単位を使いましょう。「vw」の基準は「viewport-width」ですので、vwで指定された文字は 画面幅が大きければ大きく、画面幅が小さければ小さく表示されます。 ただし「vw」はまだ使える環境が限られます。 もしどのような環境でもvw指定したのと同じように画面幅に合わせて自動で文字サイズを拡大縮小させたいなら 「FitText」のようなjQueryプラグインを利用するとよいと思います。