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使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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