ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

文字の大きさを変える

文字の大きさを変えるスタイル

フォント(文字)の大きさを変えるには、プロパティにfont-sizeを指定します。

.moji {
font-size:値と単位の指定;
}

文字の大きさを指定するにはいくつか方法があり、px、%、キーワード(smallやlarge)などを使うことができます。

ピクセル指定[px]

文字の大きさを表す単位です。pxで指定するには、14pxや32pxなどのように、数値と単位で文字の大きさを指定します。
文字サイズを14pxにしたい場合、font-size:14px;とします。
一般的にはこのpx指定がよく利用されています。

パーセント指定[%]

現在の文字サイズを100%として、変更後の文字サイズを%で指定します。
例えば、現在の文字サイズよりも50%大きいサイズに変更したい場合は、font-size:150%;と指定します。

キーワードによる指定

文字を小さくしたい場合は「small」、大きくしたい場合は「large」など、文字のサイズをキーワードで指定する方法です。
キーワード指定の種類はxx-smallからxx-largeまであります。

記述例

例として、文字の大きさを18pxに指定してみます。18pxに指定するには、font-size:を18pxとします。

[CSSの記述例]
.moji {
font-size:18px;
}
[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>文字の大きさを変える</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<p>通常の文字サイズ</p>

<p class="moji">18pxの文字サイズ</p>

</body>
</html>

[ブラウザでの表示例]
フォントサイズの変更例

なお、<h1>や<h2>など、はじめから文字サイズの大きなタグも、font-sizeを指定することによりサイズの調整が可能です。

覚えておきたいポイント

サイズに気をつけよう

極端に大きくしたり、小さくしたりすると読みにくいだけでなく、検索エンジンから迷惑行為と見なされる場合もあります。
文字サイズを見えないくらいまで小さくして、キーワードを羅列するような行為は絶対に行わないようにしましょう。

ホームページ全体の文字サイズを一括で変更する

ホームページ全体の文字の大きさを、一括で変更する方法もあります。
その場合は、セレクタ名をbodyにする必要があります。

body { ← 必ずセレクタ名をbodyとします。.(ドット)などは必要ありません。
font-size:18px;
}

これで、すべてのページの文字サイズが18pxとなります。
なお、個々に文字の大きさを指定している場合は、それらの設定が優先されます。

このように、font-sizeを使えば文字サイズを様々な大きさに調整することができます。
目立たせたい文章や強調したい文字などを大きくしたり、逆に大きすぎる文字を小さくしてデザインを整えるのに役立ちます。

覚えておきたいポイント

読みやすいサイズに

文字はできるだけ読みやすいサイズに設定しましょう。デザインに凝るあまり、文字が読みづらくなってしまうのはNGです。

フォントの種類を変える
« 前のページへ 文字の色を変える

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。