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でレスポンシブ


スポンサードサーチ

関連記事

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

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

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

no image

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

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

no image

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

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

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

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

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

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

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

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

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

最新記事

チャーさん

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

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

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