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でフォントサイズを

変えたい場合このまま下にスクロールし

読んでみてください。

 

スポンサードサーチ

cssの書き方:フォントサイズ編

 

フォントのサイズを変えたい場合は、

font-size:  ここに数字px;

とcssを書きましょう。

 

というのも、font-size:というcssは

文字の大きさをコントロールする

cssでして、

 

これを使うとフォントサイズを変更できます。

 

 

例えば、以下の画像のように、

フォントサイズを指定すると、

 

cssの書き方フォントサイズを変える

文字の大きさ(フォントサイズ)が

変わりましたね。

 

このように、フォントサイズは、

font-size:数字px;を使う事で

変更可能です。

 

 

フォントサイズの種類

 

ちなみに知っとくと便利ですが、

font-sizeでは指定の仕方に種類があります。

 

例えば、

font-size:数字px;

font-size:数字vw;

 

などというのがあります。

 

pxの場合

 

もう紹介しましたがフォントサイズを、

pxで指定した場合、

フォントサイズは固定です。

 

画面の幅が大きくなろうが小さくなろうが、

変わりません。

(pcでもスマホでも文字サイズが固定される)

 

vwの場合

 

でもう1つ紹介したvwの方は、

画面サイズによってフォントサイズが変わります。

 

平たくいうと、画面の幅が大きくなれば

文字も大きくなり、画面の幅が小さくなれば、

フォントサイズが小さくなります。

 

 

例を出すなら、pc画面用の文字サイズと、

スマホ画面用の文字サイズを勝手に調整してくれる

というものです。

 

時代はレスポンシブなので、

知っておくと便利です。

 

vwに関しては、

以下の記事に書いてるので、

興味があるなら読んでください。

 

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

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

フォントサイズを変えたい場合は、

font-size:  px;というcssを使いましょう。

 

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

 

チャーさん

-css, cssの書き方


スポンサードサーチ

関連記事

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

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

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

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

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

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

no image

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

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

no image

cssで画像を丸くする方法「15秒以内にできます」

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

no image

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

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

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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