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

レスポンシブでフォントサイズを可変にする方法「手間いらず」

投稿日:

Pocket

うもチャーさんです。

 

あなたはレスポンシブで、

フォントサイズを可変にする方法を

探していますか?

 

この記事では、フォントサイズをレスポンシブで

自動調整できる方法を書いています。

 

 

なので、あなたがこの記事を読めば、

フォントサイズをレスポンシブにできるように

なるでしょう。

 

なのでフォントサイズを可変にしたい場合は、

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

 

 

スポンサードサーチ

レスポンシブでフォントサイズを可変にするには

 

はい、ということでまず結論です。

フォントサイズをレスポンシブに、

可変させたいならvwを使いましょう。

 

書く時はこのように書きます。

例 font-size:10vw;

 

 

でこのvwはfont-sizeに指定してやると、

画面の幅のサイズに応じて、自動で

フォントサイズを調整してくれます。

 

つまりvwを使ってフォントサイズを指定すれば、

画面サイズが大きい時は、文字サイズが自動で

大きくなり、

 

画面サイズが小さくなった時は、文字サイズが

自動で小さくなります。

 

 

とはいえ、これは見た方がイメージつかめるので、

画像を用意してみました。

 

まず画面サイズが1000pxの時(macです)

フォントサイズvw

この時はフォントサイズが100pxになってますね。

 

で、画面サイズを小さくして、

670pxの画面幅の時、

 

フォントサイズvw

画像に表示されてる通り、

フォントサイズが67pxになってます。

 

 

このようにvwを使えば、

フォントサイズを画面幅に応じて、

自動的に調整することが可能です。

 

なので、ブレイクポイントを使わなくても、

フォントサイズをレスポンシブにすることができ、

結構楽です。

 

 

ブレイクポイントだと、フォントサイズをそれぞれの

サイズごとにcss書かないといけないので、

手間が少し増えます。

 

ですが、vwだと自動調整されるので、

手間がかからないのです。

 

vwの書き方とフォントサイズ計算方法

 

で、このvwですが、

書き方は、

 

例 font-size:10vw;

のように書きます。

 

で、この数値の部分ですが、

ここは%だと思ってもらうと良いです。

 

 

例えば今10vwとなってますが、

この場合画面サイズの10%分の数値がフォントサイズに、

なるという意味です。

 

つまり画面幅が1000pxだと、

10%つまり10分の1なので、

画面幅が1000pxの時にフォントサイズが100pxになります。

 

 

別の例を出します。

例えばfont-size:5vw;と書いたとします。

 

その場合、1000pxの画面幅では、

5%なので50pxのフォントサイズになります。

 

このようにvwに指定する数値は、

%で考えてもらえば、フォントサイズが

計算できます。

 

 

ちなみに数値は整数だけでなく、

少数も使えまして、

font-size:5.3vw;みたいなのも書けます。

 

なので、フォントサイズがいくつになるか、

計算する時は、vwに指定する数値を%に直して、

画面幅 X % にするとフォントサイズが計算可能です。

 

注意点

 

さてこんなレスポンシブが楽なvwですが、

一つだけ注意があります。

 

それは画面幅が超ちっさい時でも、

vwが適用されて、フォントサイズが超ちっさくなります。

 

 

例えば、320pxの画面幅(iphoneの一番小さいやつ)

とかで3vwとか指定すると、約10pxぐらいまで

小さくなってしまいます。

 

すると読みづらくなってしまう問題が発生します。

 

なので、vwを大きくするか、

小さい画面サイズの時だけはブレイクポイントで

指定する、みたいな感じにして対処するのが良いです。

 

 

とはいえレスポンシブにかなり楽なので、

フォントサイズを可変にさせたい部分には

使うと良いでしょう。

 

 

スポンサードサーチ

まとめ

 

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

 

フォントサイズをレスポンシブで可変にするには、

font-size:vw;を使うと良いです。

 

これにすると画面幅に応じてフォントサイズが

自動調整されるので、手間いらずです。

 

 

さてということで早速あなた自身でも

試してみましょう。

 

試すとあなたのweb制作スキルが上昇しますよ。

 

ということで、まずはフォントサイズを

変えたい部分のcssを開いて、

そこにfont-size:数字vw;と書いてみましょう。

 

 

で数字の部分はとりあえず5あたりを入れて、

5vwにしてみましょう。

 

でデカすぎたり小さすぎたりした場合は、

数値を変えて、調整してみましょう。

 

で決まったら画面幅を大きくしたり、

小さくしたりして可変を楽しんでみましょう。

 

 

ということで、フォントサイズをレスポンシブで、

可変にする方法の記事でした。

 

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

 

チャーさん

 

-css, cssでレスポンシブ

スポンサードサーチ

関連記事

no image

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

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

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

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

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

no image

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

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

no image

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

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

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

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

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

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

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

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

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

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

no image

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

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

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

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

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

最新記事

チャーさん

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

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

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