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

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

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

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

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

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

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

最新記事

チャーさん

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

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

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