CSSでよく使う基本スタイルまとめ！初心者でも安心のテキスト・背景・枠線の使い方

CSSでよく使う基本スタイルまとめ（テキスト・背景・枠線）

先生と生徒の会話形式で理解しよう

生徒

「CSSって何をするために使うんですか？HTMLとは違うんですか？」

先生

「CSSは、ホームページの文字の色や背景、枠線などを装飾するための言語です。HTMLがページの中身を作るのに対して、CSSは見た目を整える役割をします。」

生徒

「文字の色や背景って具体的にはどうやって指定するんですか？」

先生

「それでは、CSSでよく使う基本スタイルについて、テキスト・背景・枠線の順に見ていきましょう！」

1. CSSでテキスト（文字）のスタイルを指定する

CSSを使うことで、文字の色や大きさ、太さなどを自由に設定することができます。例えば、見出しの文字だけ赤くしたい、本文のフォントを読みやすいものにしたい、などのデザインを簡単に実現できます。

ここでは、color（文字の色）とfont-size（文字の大きさ）、font-weight（文字の太さ）の基本的な使い方を紹介します。


<style>
h1 {
    color: red;
    font-size: 32px;
    font-weight: bold;
}
</style>

<h1>これは赤い見出しです</h1>

ブラウザ表示

2. 背景色を設定して見た目をカラフルに！

CSSでは、要素の背景に色を付けることもできます。背景色の指定にはbackground-colorを使います。文字の色と組み合わせると、より見やすいデザインにすることができます。

たとえば、目立たせたい部分に黄色の背景を付けると注意を引くことができます。


<style>
p {
    background-color: yellow;
    color: black;
    padding: 10px;
}
</style>

<p>この文章は背景が黄色です</p>

ブラウザ表示

3. 枠線（ボーダー）を使って要素を囲む

枠線を付けたいときにはborderを使います。例えば、写真や文章の周りに枠をつけて強調することができます。

枠線には色、太さ、線の種類（実線・点線など）を指定できます。


<style>
div {
    border: 2px solid blue;
    padding: 15px;
    width: 300px;
}
</style>

<div>青い枠線がついたボックスです</div>

ブラウザ表示

4. よく使うCSSの色の指定方法とは？

CSSでは、色の指定方法にいくつかの種類があります。よく使われるのは次の3つです。

色の名前（例：red, blue, greenなど）
16進数（シックスティーンしんすう）（例：#ff0000 は赤）
RGB形式（例：rgb(255,0,0) も赤）

最初のうちは、色の名前を使うのが簡単でおすすめです。

5. CSSをHTMLに適用する3つの方法

CSSをHTMLに反映させる方法は、主に3つあります。

インラインCSS：HTMLタグの中に直接書く方法
内部スタイルシート：<style>タグを使ってHTML内に書く方法
外部スタイルシート：別ファイルにCSSをまとめる方法

初心者のうちは、内部スタイルシートから始めるのが理解しやすいです。

6. CSSを使うとどんなデザインができる？

CSSを使うと、以下のようなさまざまなデザインが可能になります。

文字の色を変えて読みやすくする
背景に色を付けて印象を変える
枠線をつけてボックス風に装飾
フォントの種類やサイズの変更
ボタンやリンクの見た目を変更

これらを組み合わせることで、自分だけのオリジナルなホームページを作ることができます。

7. CSSの記述ルールを覚えよう

CSSは、「どこに」「何を」「どうするか」を指定して書きます。基本の形は次のようになります。

セレクタ：どのHTMLタグに対して適用するか（例：h1やpなど）
プロパティ：変えたい項目（例：colorやbackground-colorなど）
値：プロパティに対して指定する具体的な設定（例：redやblueなど）

例：「h1タグの文字色を赤にする」場合のコード：


<style>
h1 {
    color: red;
}
</style>

ブラウザ表示

まとめ

CSSの基本スタイルである文字装飾、背景色、枠線の設定は、ホームページ全体の印象を大きく変える非常に大切な要素です。今回の記事で紹介したように、テキストの色や大きさを変えるだけでも読みやすさが向上し、背景色を付けることで視線を誘導したり、重要な情報を強調することができます。また、枠線を使うことで要素にメリハリが生まれ、情報を整理して伝えやすくなる点も大きな魅力です。これらの基本プロパティは、Web制作を学ぶうえで必ず触れる部分であり、初心者が最初に理解しておくとその後の学習がとてもスムーズになります。

CSSには色指定の方法や、HTMLへの適用方法など、用途に応じてさまざまな書き方があります。内部スタイルシートで学び始め、慣れてきたら外部ファイルに分ける事で整理しやすくなるという流れは、多くの制作者が通る自然なステップです。さらに、プロパティと値の組み合わせによって自由なデザインができるようになるため、色、背景、枠線といった基本のスタイルをしっかり使いこなせるようになると、ホームページ全体の完成度がぐっと高まります。

例えば、以下のように文字色・背景色・枠線を組み合わせると、単純な文章でも見やすさや印象が大きく向上します。特に読み物が多いページでは、強調部分を背景や枠線で示してあげることで、閲覧者がストレスなく読めるページへと変化します。


<style>
h2 {
    color: navy;
    background-color: #e8f0ff;
    padding: 12px;
    border-left: 4px solid navy;
}
p.box-note {
    border: 2px dashed #3a7bd5;
    padding: 14px;
    background-color: #f7fbff;
    color: #333;
}
</style>

<h2>基本スタイルを組み合わせた見やすいデザイン</h2>
<p class="box-note">CSSの色や背景、枠線を活用することで読みやすいページが簡単に作れます。</p>

ブラウザ表示

このように、CSSの基本スタイルはWebデザインに欠かせない“土台”のような役割を持っています。ひとつひとつのプロパティは小さく見えても、組み合わせることでページ全体の魅力が大きく変わり、ホームページの品質を左右する重要なポイントになります。初心者のうちは、色指定・背景指定・枠線という基本的な装飾からじっくり慣れていくと良いでしょう。繰り返し使ううちに、自分なりのデザイン感覚や好みも育っていき、より魅力のあるページづくりへつながっていきます。

また、CSSを書く際には「どの要素に」「どんな効果を」「どんな値で適用するか」という三つの観点で考えると理解しやすくなります。セレクタ・プロパティ・値という基本の仕組みが分かると、どんな種類のデザインにも応用が利くようになり、より柔軟にページを作り込めるようになります。今回の内容を踏まえながら、自分で色を変えたり背景を調整したり枠線を付け替えたりしながら、CSSの感覚を養っていくと良いでしょう。

先生と生徒の振り返り会話

生徒：「先生、CSSの基本スタイルってこんなに使い道があるんですね。文字の色だけじゃなくて、背景や枠線でも見やすさが全然違うと感じました！」

先生：「そうだね。文章や画像をただ並べるだけではなく、CSSで少し工夫するだけでページ全体が読みやすくなるんだよ。」

生徒：「枠線を付けるだけで重要なポイントが分かりやすくなりました。デザインって難しそうに思っていましたが、基本を押さえるだけでも十分効果がありますね。」

先生：「まさにその通りだよ。まずは色や背景といった基本プロパティを使いこなして、徐々に応用へ進むといい流れになるよ。」

生徒：「今後はHTMLとCSSを組み合わせて、自分でも読みやすいホームページを作ってみたいです！」

先生：「うん、その意欲が大事だね。色の指定方法や装飾の仕組みを覚えていけば、自然と自分だけのデザインが作れるようになるよ。」