「hタグ」タイトルタグの文字の大きさフォントサイズ【PCとスマホ切り替え】

カテゴリー:CSS

今回は、当ブログのCSSにスマホ表示時のタイトルタグの「フォントサイズ」をスマホ・タブレットでも見やすいように変更する方法を追加したので、その方法を記載します。ブログサイトを作りながら更新していくのを目指している当ブログですが、デザイン部分をしばらく放置していたので、現在最も気になってたスマホ・タブレット表示時のタイトルタグ「フォントサイズ」を変更しました。

max-widthでPC表示とスマホ表示を切り替え

今回はCSSにmax-widthを追加する方法でPC表示とスマホ表示のフォントサイズを切り替える方法を使用しました。

下記のstyleを自作のCSSに追加します。

@media (max-width: 991px) {
  h1, h2, h3, h4, h5, h6 {
    font-size: 18px;
  }
}

max-width: 991pxの指定で、横幅991px以下のhタグのフォントサイズを18pxにすることができます。

max-widthは「以上」、「以下」で切り替えることができるので便利な方法です。

今回はスマホだけではなくタブレットでのフォントサイズも変更しようと思い991pxで指定しました。

これでフォントサイズがPCとスマホ・タブレットで変更することができました。

max-width: 991px

このブログでは、CSSのフレームワークとしてbootstrap3を使用しているので、bootstrap3のブレイクポイントと合わせるためにmax-width: 991pxに指定しました。

bootstrap3では4個のブレイクポイントが設定されています。

  • ・スマホ表示の767px以下
  • ・タブレット表示の768px以上
  • ・PC表示の992px以上
  • ・さらに大きいPC表示の1200px以上

必要に応じてmax-widthに指定するpxを変更するとより限定的に表示を切り替えることができます。

bootstrap3のhタグの初期フォントサイズ

指初期設定では下記の通り指定されています。

  • ・h1 セミボールド 36px
  • ・h2 セミボールド 30px
  • ・h3 セミボールド 24px
  • ・h4 セミボールド 18px
  • ・h5 セミボールド 14px
  • ・h6 セミボールド 12px

PCからスマホ表示に切り替えてもデフォルトでは変更がないためスマホだとかなり大きいフォントサイズになってタイトルが読みにくくなってしまいます。当ブログもかなり大きいまま1年くらい放置していました。

・フォントサイズ変更前。

hタグフォントサイズ変更前

やはり大きすぎます。

スマホ表示の時も本文を16pxに設定しているので、タイトルタグは18pxくらいが丁度良い感じですよね。そもそも、スマホの文字のジャンプ率は0%でも良いかもしれないので、いずれにしろ24pxは大きすぎます。

・フォントサイズ変更後。

hタグフォントサイズ変更後

だいぶ見やすくなりました。ブログを運営するにあたり読みやすさはかなり優先順位が高いとわかっていたのですが…もっと早く対応しておくべきでした。


タグ

関連する投稿

ドラクエ好きな社会保険労務士有資格者・ファイナンシャルプランナー技能士検定2級正会員が運営をしています。当ブログではDQMSLを中心にWordPress・HTML・CSS・JS・PHPなどのTips備忘記録や資格関連の情報、その他雑記を発信して行きます。