css cssでレスポンシブ

cssスマホ時のフォントサイズはこのサイズが良さげ

投稿日:

Pocket

 

うも、チャーさんです。

 

あなたはcssのスマホのフォントサイズを、

どれぐらいにすればいいか、

と疑問に思っていませんか?

 

 

この記事では、迷ったらこのフォントサイズにすれば、

スマホサイズでは収まりがいいサイズを、

書いています。

 

なのでスマホの時にcssでフォントサイズを、

いくつにすればいいか興味がある人は、

このまま下にスクロールして読んでみてください。

 

スポンサードサーチ

スマホ時のフォントサイズはこれぐらいで

 

で、結論から言って、

スマホ時のフォントサイズですが、

16pxぐらいが収まりがききやすいです。

 

というのも、

実際にフォントサイズを変えて、

テキストをみてみると、

 

割と16pxあたりが、

収まりがいいからです。

 

フォントサイズを比較してみる

 

これは比較の具体例になりますが、

フォントサイズを変えて、

それぞれのテキストサイズで画像を並べてみます。

 

こちらは14px

フォントサイズ14px

こちらは16px

フォントサイズ16px

 

こちらは18px

 

 

さすがに18pxまでくると、

スマホサイズには大きい感じですね。

(見出しに使う分には良いと思います)

 

と、それぞれスマホサイズでテキストのフォントサイズを

変えて、上記の画像のように比較してみましたが、

おそらく一般的な感覚だと、

 

16pxあたりが一番

収まりがきくサイズでしょう。

(人によっては14pxもありでしょう)

 

ということで、cssのスマホのフォントサイズは、

特に目的がなかったり、迷ったら、

16pxでやっておけば良いんじゃないですかね。

 

するとデザインの見た目的に収まりが良いです。

 

 

とはいえ、あなた自身がサイトを運営していて

自由にフォントサイズを決めれるなら、

あなたがいいなと思うサイズにしてもいいかもしれません。

 

そうすれば精神的に楽しいですからね。

 

フォントサイズをブラウザをみながら確認したい場合

 

で、ついでですが、あなたが実際にスマホサイズでの、

フォントサイズを試してみたい場合は、

デベロッパーツールを使いましょう。

 

デベロッパーツールを使って、

スマホサイズに画面を縮小して、

その上でフォントサイズをブラウザ上で変更しましょう。

 

 

(デベロッパーツールではブラウザ上で、

フォントサイズを変更できて、それが即座に、

テキストのサイズに反映されます。)

 

なのでその機能を使って、実際にあなたの目で、

みながら良い感じのフォントサイズを探すのも、

手ですね。

 

 

ちなみにデベロッパーツールで、

スマホサイズにする方法がわからない場合は、

こちらの記事にやり方書いてるのでどうぞ。

 

レスポンシブデザインを3秒で確認できる方法「各サイズ」

 

 

スポンサードサーチ

まとめ

 

ということで、まとめに入ります。

 

cssでスマホサイズの時のフォントサイズは、

いくらがいいだろう?ですが、

16pxがいいかなと思います。

 

また、自分で探る場合は、

デベロッパーツールでどうぞ。

 

 

ということで、スマホサイズのフォントサイズに

ついてでした。

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

-css, cssでレスポンシブ


スポンサードサーチ

関連記事

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

cssで上下左右に中央寄せする簡単で便利な方法

どうも、チャーさんです。   あなたはcssで上下左右、両方とも 中央寄せしたいと思っていませんか?   左右ならtext-alignやmargin:autoで できるけど上下って …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。