と言うことで、今回は記事を読ませる事を目的とした、ポータルサイト、バイラルメディア、キュレーションサイト、WEB系のブログなどから30サイトをピックアップしました。 文字サイズについては検証結果に基づき、下記のサイズで実装していきます。 PC時 1. yahooやbiglobeといったたくさんの人が目にするポータルサイトで使われているので、無意識に”読みやすい”と感じるフォント設定とも言えるのではないでしょか。, 次に多かった設定は、文字サイズ15px、行間1.6emでした。 中見出し<h2>・・・font-size:20px / 行間1.2em また、下記の3点を考慮していきます! 1. あきらかに緑の棒すなわちPC時の方がジャンプ率が高い事がわかります。, PCでは大きいジャンプ率を効果的に使う事ができますが、スマートフォンではいくら見出しであろうとも大きなフォントサイズは読みにくいので使わない方が良いですね。 画面サイズや解像度が全く違うデバイスを使う現代では、サイトの文字サイズを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

PCとスマートフォンでフォントサイズを変えているサイトは30サイト中13サイト!? 大見出し<h1>・・・font-size:36px / 行間1.2em 3. 写真とか読書も好きです。 [2020年]6インチ以上の大画面スマホおすすめ12機種紹介!6インチ以上のsimフリースマホや、サイズ別大画面スマホをまとめました。6インチ以上のスマホを中古で購入したい方、安く機種変更したい方も必 … これはブラウザのデフォルトである16pxに対して62.5%にあたる10pxをhtml要素に指定することで、他の要素のfont-sizeの計算を簡単にする手法です。たとえば、30pxにしたい時は3rem、16pxにしたい時は1.6remというように、pxを使わず設定することが可能です, ビューポートのに基づいて継続的に変化する指定方法です。ビューポートの1/100なので、たとえばビューポートが600pxの場合は6pxに、1000pxの場合は10pxに、vwの場合だと100vwは横幅いっぱいという事になります。, 小さい画面では小さく、大きい画面では大きく見せれるので便利ではあるのものの、実際に設定したいpx数とかけ離れた数値になったりし、思いの外読みにくくなる事が多いので、他の指定方法と組み合わせたりして使う必要があります。, 見出しのfont-sizeは640px〜1200pxの間は可変するようにし、640px以下と1200px以上では固定の数値を設定しています。, 参考:[CSS]ビューポート幅(vw)に対してレスポンシブ対応の文字サイズを指定するテクニック, photoshopでデザインしている以上、やはりフォントサイズはpxという頭なので、マークアップもそれに近い方がやりやすいという結論に今回は至りました。 座右の銘は 検証方法は、本文と見出しのフォントサイズと行間をWhatFontというgoogleの拡張機能を使い調べます。, フォントサイズと行間の検証結果です。 Do unto others as you would have them do unto you. 2.メンテナンスしやすいようにすること 3. フォントサイズと行間は、ユーザーにコンテンツをストレスなく読んでもらう為の重要な要素のひとつです。モバイルフレンドリーの重要性がますます高くなっていくなか、改めてスマートフォンで読み易いfont-sizeは何か?行間は?検証を行いました。 モバイルファーストインデックスが本格的に導入された事もあり、今後より一層スマートフォンでのデザインが重要になってくるでしょう。, 次回は今回の検証結果を踏まえ、実際にレスポンシブサイトを構築する際のマークアップ方法を考察していきたいと思います!. また、1番多かった本文文字サイズ16pxを指定しているサイトのおよそ半数以上はスマートフォンでも16pxのままでした。この事から、16pxはPCでもスマホでも読みやすい文字サイズという事がわかります。, 検証結果の棒線の長さがジャンプ率を表していますが、 本文・・・font-size:16px / 行間2em 2. 8px未満のフォントサイズは再現しないのですね。 スマートフォンでは 8px未満のフォントは画像で対応 したほうがいいかもしれません。 また、「iOSのSafariでなぜか特定のfont-size(11px、10px、9px)のときだけマルチバイトの幅計算がおかしいのか、折り返し位置がずれる」 All Rights Reserved. フォントサイズの検証では、本文の文字サイズとh1見出しの文字サイズ(共にpx表記)を棒グラフにしています。 All Rights Reserved. 1.レスポンシブであること 2. 大阪生まれ Traveling | Reading | Photos 更新日: 2020年6月16 ... 例えば、13行目でh2要素のフォントサイズを指定していますが、もし仮にこのサイズ指定が書かれていなければ、 h2要素はデフォルトのフォントサイズ1.6em(16pxと同等)が適用されます。 そして最も重要なポイントは、 8行目のデフォルトフォントサイズが em指定 … 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点において、このマークアップ方法が今のところは良いのかなと思っています。. 中見出し<h2>・・・font-size:24px / 行間1.2em スマホ時 1. 大見出し<h1>・・・font-size:24px / 行間1.2em 3. 検証したサイトの中では26pxが最大数値でした。, 以上、スマートフォンで読み易いfont-sizeを改めて認識する為の検証を行い、16px、行間は1.5emが多くのサイトで使われているという事がわかりました。 読みやすい=多くの人が読んでいる=有名・人気サイト! 画面サイズ: 約6.2インチ: 本体サイズ: 約152mm×約69mm×約7.9mm: 重さ: 約163g: バッテリー容量: 4000mAh(内蔵電池) アウトカメラ: 約1200万画素 約1200万画素 約6400万画素: インカメラ: 約1000万画素: カラー: コスミックグレー クラウドホワイト クラウドブルー Copyright ©PECOPLA Co.,Ltd. 本文・・・font-size:16px / 行間1.5em 2. 行間の検証ではどの行間設定が多いか、PCとスマホの本文と見出しに分け、集計しました。, 文字サイズは16px、そしてその中でも行間は1.5emという設定が1番多く見られました。 3.ど … こちらはretripやキャリアパークなどの人気キュレーションメディアサイトに設定されています。, 意外な結果が出ました。PCとスマートフォンでフォントサイズを変えているサイトは30サイト中13サイトにとどまり、残りの約3分の2のサイトでPCとスマートフォンでフォントサイズが同じという事がわかりました。 旅行が趣味でしたが長年行けてません。 Facebook で共有するにはクリックしてください (新しいウィンドウで開きます), 【レスポンシブ対応】スマホ用メニューを実装できるjQueryプラグインSlickNavの使い方. 以前にスマートフォンで読み易い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%にします。 「あなたが人にしてもらいたいように、あなたも人に施しなさい」, Microsoft Authenticator とは? インストールから使い方までを説明します, 【HDDタワー】裸族のカプセルホテル 5Bay レビュー【CRCH535U3ISC】, Windowsで使える Jelly Comb トラックパッドを強くおすすめします【レビュー】, HHKB Pro2(英語配列)Windowsのファンクションキー最適化【DIP設定】, 【ROOT CO.】Gravity Shock Resist Case【Qi充電テスト】【使用感】, 【ワイヤレス充電】Anker PowerPort Wireless 10【レビュー】. フォントサイズと行間は、ユーザーにコンテンツをストレスなく読んでもらう為の重要な要素のひとつです。 PCサイトでは、読みやすさはもとより、デザイ…, Facebook で共有するにはクリックしてください (新しいウィンドウで開きます), [CSS]ビューポート幅(vw)に対してレスポンシブ対応の文字サイズを指定するテクニック, 【レスポンシブ対応】スマホ用メニューを実装できるjQueryプラグインSlickNavの使い方. Copyright ©PECOPLA Co.,Ltd. フォントサイズと行間は、ユーザーにコンテンツをストレスなく読んでもらう為の重要な要素のひとつです。, PCサイトでは、読みやすさはもとより、デザインも考慮した文字の使い方が多いと感じる一方、スマホ化されているサイトでは比較的どれも同じぐらいのフォントサイズが使われている為、ここは改めてどれぐらいのフォントサイズが読みやすく、よく使われているのかを検証しました。, 検証するにあたり、まず「読みやすい」とは?



大谷大学 倍率 2017 4, Excel 日付 飛ばす 11, ドラクエ ウォーク 有吉 引退 34, 才能は開花させるもの センスは磨くもの 壁紙 7, 伊藤綾子 実家 金持ち 10, Excel 回覧 印 58, 鍵 ポスト 彼氏 4, Winrar ライセンス 登録 4, 人材紹介 返金 勘定科目 10, 佐藤健 歌 Cd 7, ショートカット ファッション 50代 6, にじみ絵 障子紙 裏表 5, バイク オイル交換 しない と 11, 剣盾 ブティック 追加 11, コンクリート はつり 鉄筋 6, ドラクエ10 魔法使い アクセサリー おすすめ 8, Ps4 画面 映らない 4, 練馬区 保育園 倍率 5, ソフトモヒカン トップ 5cm 10, セキセイインコ 寿命 3年 12, Vネック 襟ぐり 編み方 5, Rolling 髭男 意味 24, ヘルメットサイズ 女性 平均 13, ポケ森 魚 レア 4, Laravel Npm Run Dev Error 5, おむつ テープ いつまで 5, 一条工務店 お風呂 網戸 16, 担当変更 挨拶 前任 6,