Webデザインの第一歩！文字と背景を自由にカスタマイズしよう

2025年2月26日

フォントをカスタマイズしよう！サイズ・文字色・背景色を変える基本テクニック

Webページのデザインをおしゃれに、そして見やすくするためには、文字や背景色を調整するのがポイントです！CSSを使えば、フォントサイズや文字の色、背景色を簡単に変えることができます。
この記事では、初心者でもすぐに試せるフォントのカスタマイズ方法を基本から丁寧に解説します！さっそく一緒にやってみましょう

1. フォントサイズを変える方法

文字のサイズを変えるには、CSSの font-size プロパティを使います。たとえば、見出しを大きくしたり、段落の文字を小さくしたりできます。

コード例: フォントサイズの指定

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="test.css" type="text/css"> <!-- CSSの読み込み部分 -->
    <title>フォントサイズの変更</title>
</head>
<body>
    <h1>これは大きな見出しです</h1>
    <p>これは標準的な段落の文字サイズです。</p>
</body>
</html>

h1 {
    font-size: 36px; /* 見出しを大きく */
}
p {
    font-size: 16px; /* 段落を標準サイズに */
}

2. 文字の色を変える方法

文字の色は、CSSの color プロパティで指定します。色は名前（例: red, blue）や16進数（例: #FF0000）で指定することができます。

コード例: 文字色の変更

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="test.css" type="text/css"> <!-- CSSの読み込み部分 -->
    <title>文字色の変更</title>
</head>
<body>
    <h1>青色の見出し</h1>
    <p>この段落はオレンジ色の文字です。</p>
</body>
</html>

h1 {
    color: blue; /* 見出しの文字色を青に */
}
p {
    color: #FF5733; /* 段落の文字色をオレンジに */
}

3. 背景色を変える方法

背景色は、CSSの background-color プロパティで変更できます。要素ごとに背景色を設定できるので、ページ全体や特定の部分だけを色付けすることも可能です。

コード例: 背景色の変更

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="test.css" type="text/css"> <!-- CSSの読み込み部分 -->
    <title>背景色の変更</title>
</head>
<body>
    <h1>背景が黄色の見出し</h1>
    <p>この段落の背景色は薄い灰色です。</p>
</body>
</html>

body {
    background-color: #F0F8FF; /* ページ全体の背景色を淡い青色に */
}
h1 {
    background-color: yellow; /* 見出しの背景色を黄色に */
}
p {
    background-color: lightgray; /* 段落の背景色を薄い灰色に */
}

4. CSSの組み合わせでカスタマイズを楽しもう

フォントサイズ、文字色、背景色を組み合わせれば、さらに自由にデザインを楽しめます！以下はそれらをすべて組み合わせた例です。

コード例: 総合カスタマイズ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="test.css" type="text/css"> <!-- CSSの読み込み部分 -->
    <title>フォントのカスタマイズ</title>
</head>
<body>
    <h1>カスタマイズされた見出し</h1>
    <p>この段落は、文字サイズ、文字色、背景色、行間を調整しています。CSSを使えば、このようなデザインを簡単に作れます！</p>
</body>
</html>

body {
    background-color: #F5F5DC; /* ページ全体の背景色 */
}
h1 {
    font-size: 40px;
    color: white;
    background-color: darkgreen; /* 見出しの背景色 */
    padding: 10px; /* 見出し内の余白 */
}
p {
font-size: 18px;
color: #333;
background-color: #EFEFEF; /* 段落の背景色 */
padding: 10px;
line-height: 1.8; /* 行間を広げる */
}

まとめ

フォントサイズはfont-sizeプロパティで調整可能。
文字の色はcolorプロパティで指定。
背景色はbackground-colorプロパティで変更可能。
これらのCSSプロパティを活用すれば、Webページがぐっと見やすくおしゃれになります！
他にも色々変えたりアニメーションを付けたりもできます。こういうことがしたいなと思ったら検索をかけて調べてみましょう。

初心者講座:目次

comment コメントをキャンセル

: いい感じの位置にリンク先の表示位置を止める方法

リンク先のIDに飛ぶ際にいい感じの位置に表示させたい時ありますよね主にスクロールするとメニューバーが追従してくる感じのサイトとかに使います。 scroll-margin-topを使うことで値を調節し ...

CSS HTML

: クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた

制作理由ワードプレスのクラシックエディタを直接使っているといつも思うことがありましたコード追加ボタンを自由に追加出来たら便利じゃない？この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...

HTML WordPress プラグイン

: CSSで作るコンテンツを縦に展開・収納できるアコーディオンメニュー

コンテンツを縦に展開・収納できるアコーディオンメニューは、動きのあるUIの定番です。 Section 1 DX（デジタルトランスフォーメーション）の実現「デジタルトランスフォーメーション（DX）は、 ...

CSS HTML

: 画像にリボンをつけよう

画像の左端にリボンを付けておしゃかわにしましょう Cat [code lang="js" title="HTMLコード"] <div class="cp_card"> ...

CSS HTML

: 横幅を要素の幅を超えて表示する方法(width)

要素内に横幅いっぱいに表示要素を超えて横幅いっぱいに表示 [css language="CSSコード"] .over-width { margin-left: calc(50% - 50vw); m ...

CSS HTML

段落タグ<p>とは？基本の使い方から注意点まで

初心者必見！marginとpaddingの違いを徹底解説