Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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を動画で学習したいならこの記事をどうぞ

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

no image

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

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

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

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

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

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

最新記事

チャーさん

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

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

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