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

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

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

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

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

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

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

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

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

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

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

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

no image

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

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

no image

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

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

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

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

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

no image

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

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

no image

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

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

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

最新記事

チャーさん

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

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

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