今回は、当ブログのCSSにスマホ表示時のタイトルタグの「フォントサイズ」をスマホ・タブレットでも見やすいように変更する方法を追加したので、その方法を記載します。ブログサイトを作りながら更新していくのを目指している当ブログですが、デザイン部分をしばらく放置していたので、現在最も気になってたスマホ・タブレット表示時のタイトルタグ「フォントサイズ」を変更しました。
今回はCSSにmax-widthを追加する方法でPC表示とスマホ表示のフォントサイズを切り替える方法を使用しました。 下記のstyleを自作のCSSに追加します。 max-width: 991pxの指定で、横幅991px以下のhタグのフォントサイズを18pxにすることができます。 max-widthは「以上」、「以下」で切り替えることができるので便利な方法です。 今回はスマホだけではなくタブレットでのフォントサイズも変更しようと思い991pxで指定しました。 これでフォントサイズがPCとスマホ・タブレットで変更することができました。 このブログでは、CSSのフレームワークとしてbootstrap3を使用しているので、bootstrap3のブレイクポイントと合わせるためにmax-width: 991pxに指定しました。 bootstrap3では4個のブレイクポイントが設定されています。 必要に応じてmax-widthに指定するpxを変更するとより限定的に表示を切り替えることができます。 指初期設定では下記の通り指定されています。 PCからスマホ表示に切り替えてもデフォルトでは変更がないためスマホだとかなり大きいフォントサイズになってタイトルが読みにくくなってしまいます。当ブログもかなり大きいまま1年くらい放置していました。 ・フォントサイズ変更前。 やはり大きすぎます。
スマホ表示の時も本文を16pxに設定しているので、タイトルタグは18pxくらいが丁度良い感じですよね。そもそも、スマホの文字のジャンプ率は0%でも良いかもしれないので、いずれにしろ24pxは大きすぎます。
・フォントサイズ変更後。 だいぶ見やすくなりました。ブログを運営するにあたり読みやすさはかなり優先順位が高いとわかっていたのですが…もっと早く対応しておくべきでした。max-widthでPC表示とスマホ表示を切り替え
@media (max-width: 991px) {
h1, h2, h3, h4, h5, h6 {
font-size: 18px;
}
}
max-width: 991px
bootstrap3のhタグの初期フォントサイズ
「hタグ」タイトルタグの文字の大きさフォントサイズ【PCとスマホ切り替え】
タグ
関連する投稿
No Image
「CSS」Bootstrap3のnavbarをカスタマイズ!!ulを均等にする方法等【Bootstrap3】
ついに、このブログも投稿数が100を超えてきたので、headerの...
No Image
TwitterのシェアボタンをCSSを利用してオリジナルのデザインにする方法
以前の投稿ではtwitterの公式サイトhttps://publish.twitter....
No Image
LINEで送るボタンをCSSを利用してオリジナルのデザインにする方法
スマホアプリのレビューサイトや、攻略サイトなどはLINEで共...
No Image
「CSS」スタイルシートで使用する色コードの調べ方【デザイン】
Webサイト等を作っていたりする色コードを調べる場面が頻繁に...
No Image
「CSS」スタイルシートで立体のボタンの作り方【デザイン】
divタグにスタイルを当てていってCSSだけで、立体のボタンを...