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

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

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

no image

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

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

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

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

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

no image

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

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

no image

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

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

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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