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で中央寄せ(縦に)したい場合にどうぞ

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

no image

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

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

no image

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

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

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

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

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

no image

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

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

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

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

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

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

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

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

no image

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

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

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

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

最新記事

チャーさん

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

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

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