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のborderを初学者でもわかりやすいよう説明します

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

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

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

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

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

最新記事

チャーさん

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

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

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