大見出し<h1>・・・font-size:36px / 行間1.2em 3. 写真とか読書も好きです。 Do unto others as you would have them do unto you. 以前にスマートフォンで読み易いfont-sizeを検証した結果、本文のフォントサイズはPC時でもスマホ時でも同じの場合が多いという事、PC時は文字のジャンプ率が高いが、スマホ時では低くなるという事などがわかりました。, 今回はこの結果を踏まえて、実際にレスポンシブサイトを構築する際にfont-sizeはどうマークアップすれば良いかを考察していきたいと思います!, 一般的な指定単位で、16pxと書けば16pxというように、絶対値での指定方法です。, さまざまな画面サイズに対応させるレスポンシブのコーディングにおいてpxは、ブレイクポイントの度に調整していかなければならないなど、簡単にメンテナンスができないというデメリットがあり、今回は慎重に考えていくべき単位になります。, 親になる要素が16pxであれば、1em=16px。2em=32pxということになります。, emは親要素のfont-sizeが基準ですが、remはhtmlのfont-sizeが基準となる相対値の単位です。, remを使う場合にはよくhtml要素のfont-sizeを62.5%にします。 [2020年]6インチ以上の大画面スマホおすすめ12機種紹介!6インチ以上のsimフリースマホや、サイズ別大画面スマホをまとめました。6インチ以上のスマホを中古で購入したい方、安く機種変更したい方も必 … モバイルファーストインデックスが本格的に導入された事もあり、今後より一層スマートフォンでのデザインが重要になってくるでしょう。, 次回は今回の検証結果を踏まえ、実際にレスポンシブサイトを構築する際のマークアップ方法を考察していきたいと思います!. All Rights Reserved. こちらはretripやキャリアパークなどの人気キュレーションメディアサイトに設定されています。, 意外な結果が出ました。PCとスマートフォンでフォントサイズを変えているサイトは30サイト中13サイトにとどまり、残りの約3分の2のサイトでPCとスマートフォンでフォントサイズが同じという事がわかりました。 Traveling | Reading | Photos 大見出し<h1>・・・font-size:24px / 行間1.2em 3. フォントサイズと行間は、ユーザーにコンテンツをストレスなく読んでもらう為の重要な要素のひとつです。, PCサイトでは、読みやすさはもとより、デザインも考慮した文字の使い方が多いと感じる一方、スマホ化されているサイトでは比較的どれも同じぐらいのフォントサイズが使われている為、ここは改めてどれぐらいのフォントサイズが読みやすく、よく使われているのかを検証しました。, 検証するにあたり、まず「読みやすい」とは? 本文・・・font-size:16px / 行間2em 2. 「あなたが人にしてもらいたいように、あなたも人に施しなさい」, Microsoft Authenticator とは? インストールから使い方までを説明します, 【HDDタワー】裸族のカプセルホテル 5Bay レビュー【CRCH535U3ISC】, Windowsで使える Jelly Comb トラックパッドを強くおすすめします【レビュー】, HHKB Pro2(英語配列)Windowsのファンクションキー最適化【DIP設定】, 【ROOT CO.】Gravity Shock Resist Case【Qi充電テスト】【使用感】, 【ワイヤレス充電】Anker PowerPort Wireless 10【レビュー】. hrml要素にfont-size:62.5%を設定し、ベースのサイズを10pxとします。こうすることで1rem=10pxなり、例えば32pxで指定したい時は3.2remと書きます。マークアップはもちろんメンテナンスもスムーズに行えるかと思います。, calc()とvwの合わせ技で、ブレイクポイントごとに細かく記述する手間はなく、最低数値と最大数値だけ決めれば良いのでわかりやすいです。, vwを使うと、思いの外小さすぎたり大きすぎたりといった事になってしまうところを、calc()で制御し、常に読み易いfont-sizeを表示できます。, vw、rem、calc()は現段階でモダンブラウザ以外ではサポートがちょっと微妙です。vwとcalc()はIE8やAndroid4.4未満は完全に対応していないようなので、 近似値の指定でフォールバックする必要があります。, calc()の計算が手間だと思ったのですが、超簡単超便利なジェネレーターがあるので、そちらを使うことをオススメします!, いかがでしたか?結果、あまり画期的なマークアップ方法は見出せませんでしたが、calcを使う事で最小値から最大値の間を可変させる事が出来、様々なデバイス幅でも”いい感じ”のフォントサイズになるという点と、remに関しては計算の必要はなく視覚的にマークアップできるという2点において、このマークアップ方法が今のところは良いのかなと思っています。. 検証方法は、本文と見出しのフォントサイズと行間をWhatFontというgoogleの拡張機能を使い調べます。, フォントサイズと行間の検証結果です。 旅行が趣味でしたが長年行けてません。 行間の検証ではどの行間設定が多いか、PCとスマホの本文と見出しに分け、集計しました。, 文字サイズは16px、そしてその中でも行間は1.5emという設定が1番多く見られました。 yahooやbiglobeといったたくさんの人が目にするポータルサイトで使われているので、無意識に”読みやすい”と感じるフォント設定とも言えるのではないでしょか。, 次に多かった設定は、文字サイズ15px、行間1.6emでした。 本文・・・font-size:16px / 行間1.5em 2. 検証したサイトの中では26pxが最大数値でした。, 以上、スマートフォンで読み易いfont-sizeを改めて認識する為の検証を行い、16px、行間は1.5emが多くのサイトで使われているという事がわかりました。 画面サイズや解像度が全く違うデバイスを使う現代では、サイトの文字サイズをpxで固定する事はデメリットしかありません。, 全ての要素に対して、デバイスごとに最適な文字サイズを書き直す必要が出てくるからです。, 特に相対的なサイズ指定「rem」を行えば、メディアクエリでルートのサイズを変えるだけで、サイト全体のフォントサイズを一括変更できるのです。, この記事では、そんなレスポンシブサイトに最適なフォントサイズ指定方法を提案していきます。, 16pxに0.625を掛けると10pxとなるので、フォントサイズを「62.5%」と指定しています。, わざわざルートを10pxに設定する理由は、rem指定のときの計算が楽になるからです。, 「font-size: 32px;」をremで書く場合は → 「font-size: 3.2rem;」, 「font-size: 24px;」をremで書く場合は → 「font-size: 2.4rem;」, これによって、bodyの子要素・孫要素に当たるすべての要素に対して、フォントサイズを指定せずとも、デフォルトのフォントサイズを継承させることができます。, 特にフォントサイズの指定がない要素には、自動的にフォントサイズ1.6em(16pxと同等のサイズ)が適用されます。, 例えば、13行目でh2要素のフォントサイズを指定していますが、もし仮にこのサイズ指定が書かれていなければ、, body要素にrem指定すると、chromeブラウザではbodyをルートとして解釈してしまいます。, デバイスごとの文字サイズは、メディアクエリを使ってhtml要素のルートサイズを変えるだけで、html配下の全ての文字サイズを一括変更します。, Bootstrapを使わずに、Bootstrap風のグリッドシステムを実現する方法, 【SASS】メディアクエリをまとめるプラグイン「mqpacker」の使い方【gulp】【PostCSS】, Place of birth:Osaka