【初心者のCSS入門】CSS（スタイルシート）とは？書き方と装飾方法まとめ

Q: CSSを書いて保存したのに、ブラウザを更新してもデザインが変わりません。

初心者が必ず直面する問題です。 原因の9割は「ブラウザのキャッシュ」か「単純な記述ミス」のどちらかです。 ブラウザは表示を早くするために、前回読み込んだCSSの古い記憶（キャッシュ）を使い回すことがあります。 まずは「スーパーリロード（Windows: Ctrl+F5 / Mac: Cmd+Shift+R）」を試して最新のCSSを読み込み直してください。 それでもダメな場合は、HTMLの<link>タグのファイル名（パス）が間違っていないか、CSSの行末のセミコロン（;）を書き忘れていないかを確認しましょう。

Q: CSSのプロパティ（colorやmarginなど）はすべて暗記しなければいけませんか？

いいえ、 すべて暗記する必要は全くありません。 現場で活躍しているプロのWebデザイナーやエンジニアであっても、すべてのCSSプロパティを暗記しているわけではありません。 実務で毎日使う2〜3割の基本プロパティ（文字色、余白、フォントサイズなど）は自然と手が覚えますが、それ以外は「CSS 角を丸くする」のようにその都度Googleで検索して使っています。 「こんなことができるんだ」という引き出しだけを頭の中に作っておき、あとは辞書を引きながら書くスタイルで全く問題ありません。

2026年3月3日2026年6月13日

CSSの様々な単位（px、em、rem、%、vw、vh）を使用したフォントサイズの表示例。

いつまで無駄なデザインに時間を費やしますか？自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、「CSS（スタイルシート）とは何か」を理解し、基本的な書き方からシンプルな装飾まで学べます。

また、CSSを理解するにはHTMLといったマークアップ言語を理解する必要があります。

HTMLの基本構造を理解した上でCSSを学ぶと理解が深まるため、以下の「【初心者のHTML入門】基本構造の書き方とタグの使い方【タグ一覧表あり】」を一読ください。

【初心者のHTML入門】基本構造の書き方とタグの使い方【タグ一覧表あり】

もう無駄なレイアウトに凝るのやめたら？最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

CSSとは

CSSは、Webページにおけるデザインやレイアウトを調整するコンピュータ言語です。

CSSは「カスケードスタイルシート」と呼びます。

CSSについて

WebページはCSSがないと未完成
CSSでできること

WebページはCSSがないと未完成

CSSを使わずHTMLのみでWebページを作成すると、文字と画像だけが上部から下部まで並んだ単調ページになります。

HTMLで作られたWebページに対して、「デザイン」や「レイアウト」を決めるのがCSSです。

CSSにより文字や背景の色を変えたり、カラフルな線を引いたり、余白を調整したりと見栄えをきれいにすることができます。

本サイトのTOPページを例に見ていきます。

HTMLのみのWebページ

CSSを適用したWebページ

上記のCSSあり・なしを比較すると明確に分かりますが、HTMLのみだとデザインやレイアウトが崩れているのが分かります。

CSSでできること

ここでは、改めてCSSにできることの概要に触れておきます。

以下のような段落タグである<p>タグに対して装飾を行います。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <style>
    .p-design {
      color: red;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p>これは例文１です。</p>
  <p class="p-design">これは例文２です。</p>
</body>
</html>

CSSでは、色や大きさを変えるなど様々なデザイン設定が可能です。

フォントサイズやフォントカラーなどフォント関連のWebデザインを知りたい人は、以下の記事を一読ください。

【HTML/CSS】コピペで完了！おしゃれな文字装飾デザイン一覧

CSSはどこに書く？

上記のように、CSSはどのようにHTMLへ適用させられるか確認していきましょう。

CSSの書き方は3パターンです。

CSSはどこに書く？

HTMLファイルに<style>タグを書き込む
HTMLタグに直接書き込む（インライン）
CSSファイルを外部から読み込む

それぞれメリット・デメリットがあり、使い分けていく必要があります。

HTMLファイルに<style>タグを書き込む

まずはデスクトップなど任意の場所にフォルダを作成してください。

ここでは、デスクトップに「sample」フォルダを作成し、フォルダ内に「sample.html」を作成しています。

以下のように、VSCodeを起動し任意のフォルダを開いてください。

また、VSCodeにてsample.htmlを開けたら以下のHTMLコードを張り付けてください。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <style>
    .p-design {
      color: red;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p>これは例文１です。</p>
  <p class="p-design">これは例文２です。</p>
</body>
</html>

次に、コードを張り付けれたら保存します。

保存が完了したら、左側のファイルにカーソルを合わせ、ブラウザへドラッグ＆ドロップしてください。

HTMLあるいはCSSを変更した場合は、ファイルを上書き保存しブラウザを再読み込みすると最新ファイルが読み込まれて変更箇所が適用されます。

HTMLタグに直接書き込む（インライン）

次に、HTMLタグに直接書き込む方法になります。（インラインにCSSを書くと言ったりします。）

先ほどのコードを直接書き込む方法に切り替えています。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <p>これは例文１です。</p>
  <p class="p-design" style="color: red; font-size: 30px;">これは例文２です。</p>
</body>
</html>

こちらも同様にCSSが適用されます。

タグの中にCSSを書く際は、<タグ名 style="CSSをここに書く">という形になります。

style=""はstyle属性と呼ばれます。

CSSファイルを外部から読み込む

次に、外部ファイルのCSSを読み込む方法になります。

つまり、CSSファイルを別で作成しHTMLファイルから読み込むことになります。

作成したCSSファイルは外部スタイルシート（外部CSS）と呼ばれ、Webサイトを作る時に最も一般的な方法です。

STEP

テキストエディターを開く

ここでは、sample.htmlとstyle.cssを作成しています。

STEP

文字化け回避のためのコードを書く

CSSファイルの最初は<@charset "UTF-8";>を書きます。

コードの文字化けを防ぐためです。

これより前にCSSを書くのはNGです。

STEP

CSSファイルを書く・保存

style.cssにCSSコードを書き込んでいきます。

CSSコードを書き込んだら保存しましょう。

STEP

HTMLファイルを開く・保存

CSSを読み込みたいHTMLファイルを開きます。

外部CSSの読み込みは<link rel="stylesheet" href="ファイル名.css">というコードを使います。

コードをheadタグの中に書きます。

以下は、作成したHTML＆CSSコードになります。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>これはh1見出しです。</h1>
  <p class="p-one">これは例文1です。</p>
  <p id="p-two">これは例文2です。</p>
</body>
</html>

CSSコード表示

@charset "utf-8";

body {
    background: gray;
}

h1 {
    padding: .5em .7em;
    border-left: 5px solid #2589d0;
    border-bottom: 3px solid #d2d2d2;
    background-color: #f2f2f2;
    color: #333333;
}

.p-one {
    font-size: 30px;
    color: red;
}

#p-two {
    font-size: 30px;
    color: blue;
}

セレクタ指定、class指定、id指定の書き方でCSSを記載しています。

CSSが適用される優先順位やメリット・デメリットを詳しく知りたい人は「CSSの優先順位はどう決まる？どこに書くかと外部CSSの読み込み＆インラインの記述」も一読ください。

CSSはどこに書く？HTMLでの正しい読み込み順と優先順位のルール

CSSの基本の書き方

ここでは、CSSの基本的な書き方を解説します。

CSSの基本的な書き方

CSSの基本文法
CSSの基本的な書き方
コードの間に半角スペース/tab/改行を入れてもOK

CSSの基本文法

CSSの書き方は以下のように決まっています。

セレクタ {
    プロパティ: 値;
}

セレクタ/プロパティ/値を明記することにより「どこの・何を・どんな見た目に変えるか」を指定できます。

セレクタ

body {
  color: blue;
}

セレクタにはデザイン変更の適用先を書きます。

つまり「どの部分のデザインを変えるのか」を指定します。

ここはタグ名やclass名・id名を書きます。

たとえば、p{〜}と書けば「pタグのデザインを変える」という指定になり、h1{〜}と書けば「h1タグのデザインを変える」という指定になります。

プロパティ

body {
  color: blue;
}

プロパティは「セレクタで指定した部分を何に変えるのか」を決めます。

色を変える、それとも線をひく、あるいは余白を調整するといった指定を実施します。

例えば、プロパティにcolorと書けば文字色を変更し、backgroundと書けば背景色を変更できます。

値

body {
  color: blue;
}

値は「どのように見た目を変えるか」を決めます。

例えば、セレクタとプロパティで「pタグの文字色を変える」ことが指定されているなら、値は「何色に変えるのか」を決めています。

例えば、プロパティで「color」が指定されているなら、値ではblueやredといった「適用する色」を指定します。

プロパティと値は波括弧｛｝で囲う

body {
  color: blue;
}

セレクタは何にも囲まず先頭に記述し、プロパティと値は波括弧{}で囲います。

プロパティと値はコロン：でつなぐ

body {
  color: blue;
}

プロパティと値は常にセットで、単独で使われません。

プロパティと値の間にはコロン:を書きます。

複数プロパティを指定した場合はセミコロン（;）で区切る

body {
  color: blue;
  font-size: 15px;
}

複数プロパティを指定したい場合はセミコロン;で区切り、別の「プロパティ:　値」を書きます。

いくつでもプロパティを指定できます。

CSSの基本的な書き方

body {
  color: blue;
  font-size: 15px;
}

例えば、上記のCSSコードは「bodyタグ内の文字色（color）を青（blue）にし、文字サイズを15pxにする」といったデザイン指定になります。

コードの間に半角スペース/tab/改行を入れてもOK

CSSはコードの間に半角スペース/tab/改行を入れても、スタイルの指定内容が変わりません。

コード管理やメンテナンス性が高い状態を保ちながら作業しましょう。

コードを見返した際に、可読性が高いと変更を加えやすくなります。

ただし、全角スペースは絶対に使わないように注意しましょう。

brタグの使い方を詳しく知りたい人は「【HTML】brタグ（改行）の使い方：pタグとの違いや効かない時の対策」を一読ください。

HTMLのbrタグ(改行)とは？pタグとの違いや効かない時の対策

セレクタの基本的な書き方

body {
  color: blue;
}

セレクタでは「どの部分のデザインを変えるか」といった適用先を指定することが必要でした。

セレクタの書き方にはいくつかパターンがあります。

ここでは、代表的なセレクタに絞って解説します。

セレクタの基本的な書き方

タグ名で適用先を指定
class名で適用先を指定
id名で適用先を指定
適用先を複数指定する
子孫セレクタ（絞り込み指定）

タグ名で適用先を指定

タグで指定する場合は、タグ名をそのまま書けばよいです。

a{〜}やdiv{〜}、img{〜}といった形です。

例えば、pタグの文字色とフォントサイズを変更してみましょう。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>タグ名で適用先を指定する</h1>
  <p>これは例文です。</p>
</body>
</html>

CSSコード表示

@charset "utf-8";

p {
    color: green;
    font-size: 30px;
}

class名で適用先を指定

HTMLでは<タグ名 class="class名">といったクラス名の付与ができます。

class名でセレクタを指定する場合は、.class名{〜}のように.ドット(ピリオド)を前につけます。

例えば、先ほどの<p>タグにclass名であるclass="p-text"を付与させてみましょう。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>タグ名で適用先を指定する</h1>
  <p>これは例文１です。</p>
  <p class="p-text">これは例２です。</p>
</body>
</html>

CSSコード表示

@charset "utf-8";

.p-text {
    color: green;
    font-size: 30px;
}

先ほどは<p>タグ全体にCSSを適用していましたが、今回は2つの<p>タグがあり片方の<p>タグのみにclass名を付与させています。

また、<p>タグではなくclass名に対してCSSを適用させているため、class名を付与したものだけがデザイン変更されいることが分かります。

id名で適用先を指定

HTMLでは<タグ名 id="id名">のようにidを付与できます。（ただし、同じid名はページ内に1回しか使えません）

id名をデザインの適用先に指定する場合は、#id名{～}といった形でid名の前に#をつけましょう。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="heading">タグ名で適用先を指定する</h1>
  <p>これは例文１です。</p>
  <p class="p-text">これは例２です。</p>
</body>
</html>

CSSコード表示

@charset "utf-8";

#heading {
    padding: 10px 15px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #333333;
    box-shadow: 4px 4px 0 #333333;
}

.p-text {
    color: green;
    font-size: 30px;
}

適用先を複数指定する

もしも、同じデザインを適用させたいタグやclass・idがある場合は複数指定できます。

つまり、複数要素のデザインをまとめて変更できます。

複数選択したいときは、タグやclass名・id名を半角コンマ,で区切り並べます。

並べる数はいくつでも問題ありません。

また、並び順も関係ありません。

ここでは、5つの<p>タグを作成し、classやidを付与させ、指定したclassのみにデザインを適用させてみます。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="heading">タグ名で適用先を指定する</h1>
  <p class="p-text-1">これは例文１です。</p>
  <p class="p-text-2">これは例文２です。</p>
  <p class="p-text-3">これは例文３です。</p>
  <p class="p-text-4">これは例文４です。</p>
  <p class="p-text-5">これは例文５です。</p>
</body>
</html>

CSSコード表示

@charset "utf-8";

#heading {
    padding: 10px 15px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #333333;
    box-shadow: 4px 4px 0 #333333;
}

.p-text-2,
.p-text-4 {
    color: green;
    font-size: 30px;
}

ここでは、2つ目と4つ目のclass名を複数指定し、CSSを適用させていることが分かります。

子孫セレクタ（絞り込み指定）

子孫セレクタと呼ばれる適用先の指定方法もあります。

「◯◯タグ内にある◯◯タグのみデザインを適用させたい」といった形で利用します。

タグ名やclass名・id名を半角スペースで区切って並べると、どんどん適用先が絞り込まれます。

div a img{~}と書けば、「<div>タグの中の<a>タグの中の<img>タグのみにデザイン指定が適用されます。

例えば、<div>タグで<h1>と<p>タグを囲み、<p>タグのclass=”p-text-3″の中の<span>タグのみを指定することでデザイン変更してみましょう。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <h1 id="heading">タグ名で適用先を指定する</h1>
    <p class="p-text-1">これは例文１です。</p>
    <p class="p-text-2">これは例文２です。</p>
    <p class="p-text-3">これは<span>例文３</span>です。</p>
    <p class="p-text-4">これは例文４です。</p>
    <p class="p-text-5">これは例文５です。</p>
  </div>
</body>
</html>

CSSコード表示

@charset "utf-8";

#heading {
    padding: 10px 15px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #333333;
    box-shadow: 4px 4px 0 #333333;
}

div .p-text-3 span {
    color: green;
    font-size: 30px;
}

上記のように、「<div>タグの中のclass=”p-text-3″を持つ<p>タグの中の<span>」に対してCSSを適用させることで、「例文３」の箇所のデザインが変更されています。

プロパティと値の基本的な書き方

プロパティと値の基本的な書き方について解説します。

プロパティと値は常にセットで記述されます。

プロパティがcolorなのであれば、値にはblueやgreenなどの色しか書くことはできません。

つまり、プロパティごとに固有な記述方法があるため、少しずつ慣れていきましょう。

プロパティと値の基本的な書き方

文字の大きさを変える
文字の色を変える
文字を左寄せ/中央寄せ/右寄せにする
背景色を変える
線で囲う・線を引く
コメントアウトの書き方

CSSにおける文字装飾を詳しく知りたい人は「【html&css】文字装飾に関するWebデザインまとめ」を一読ください。

【HTML/CSS】コピペで完了！おしゃれな文字装飾デザイン一覧

文字の大きさを変える

セレクタ { font-size: ○○px; }

文字の大きさ（フォントサイズ）を変える場合は、font-sizeプロパティを使います。

値には12pxというように数字+単位を書きます。

単位は以下の6つを覚えておけば良いでしょう。

font-sizeにおける値の単位

px：縦のピクセルの大きさで指定
Webページの文章は、14px~18pxがおすすめです。
em：現在のフォントサイズに対する倍率
例えば、現在の設定が10pxのときに「2.0em」とするとフォントサイズは20pxになります。
rem：ルート要素（Webページの大元）のフォントサイズに対する倍率
例えば、大元の設定が16px（ブラウザの標準サイズ）の時、「1.5rem」とするとフォントサイズは24pxになります。
親要素の設定に影響を受けないため、現在は主流で管理がしやすい指定方法です。
%：親要素のフォントサイズに対する割合
例えば、親要素の設定が16pxのときに「150%」とするとフォントサイズは24pxになります。
仕組みは「em」とほぼ同じですが、直感的なパーセンテージで指定したい場合に用いられます。
vw：ブラウザの画面幅（Viewport Width）に対する割合
「1vw」は画面幅の1%です。
例えば、画面の横幅が1000pxの時、「5vw」とするとフォントサイズは50pxになります。
スマホからPCまで、画面幅に合わせて文字サイズを滑らかに自動可変させたいときに便利です。
vh：ブラウザの画面の高さ（Viewport Height）に対する割合
「1vh」は画面の高さの1%です。
例えば、画面の高さが800pxの時、「5vh」とするとフォントサイズは40pxになります。
フォントサイズで使われる頻度は低めですが、画面いっぱいのデザインに合わせて文字の大きさを連動させたい時などに使われます。

実際に<p>タグ内の文字のフォントサイズを変えてみましょう。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <h1 id="heading">文字の大きさを変える</h1>
    <p>初期設定のフォントサイズ</p>
    <p class="p-text-1">20pxのフォントサイズ</p>
    <p class="p-text-2">1.5emのフォントサイズ</p>
    <p class="p-text-3">2remのフォントサイズ</p>
    <p class="p-text-4">10%のフォントサイズ</p>
    <p class="p-text-5">5vwのフォントサイズ</p>
    <p class="p-text-6">5vhのフォントサイズ</p>
  </div>
</body>
</html>

CSSコード表示

@charset "utf-8";

#heading {
    padding: 10px 15px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #333333;
    box-shadow: 4px 4px 0 #333333;
}

.p-text-1 {
    font-size: 20px;
}

.p-text-2 {
    font-size: 1.5em;
}

.p-text-3 {
    font-size: 2rem;
}

.p-text-4 {
    font-size: 10%;
}

.p-text-5 {
    font-size: 5vw;
}

.p-text-6 {
    font-size: 5vh;
}

値の単位をうまく利用することで、レスポンシブ対応やデザイン調整に活かすことができます。

フォントサイズの指定方法を詳しく知りたい人は「【HTML】フォントサイズ（文字）の指定：px・rem・em・%の変更と自動調整」を一読ください。

【HTML】フォントサイズ（文字）の指定：px・rem・em・%の変更と自動調整

文字の色を変える

セレクタ { color: 色名 or カラーコード or RGB; }

文字を自分の好きな色に変えてみましょう。

上記で何度も触れましたが、文字色を変えるときにはcolorプロパティを使います。

値には色名、カラーコード、RGBの3パターンで記述できます。

colorにおける値の書き方

色名：英語の色名を記述
赤ならred、青ならblue、緑ならgreen、黒ならblack、白ならWhite
カラーコード：#+6ケタの英数字で記述
色ごとにコードが決まっているものを使います。
例えば白なら#FFFFFFになります。

膨大な数の色名やカラーコードが存在するため、カラーコード表を見て使いたい色のコードをコピペしましょう。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <h1 id="heading">文字の色を変える</h1>
    <p class="p-text-1">Greenの文字色</p>
    <p class="p-text-2">Redの文字色</p>
    <p class="p-text-3">Perpleの文字色</p>
  </div>
</body>
</html>

CSSコード表示

@charset "utf-8";

#heading {
    padding: 10px 15px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #333333;
    box-shadow: 4px 4px 0 #333333;
}

.p-text-1 {
    color: green;
}

.p-text-2 {
    color: #ff0000;
}

.p-text-3 {
    color: rgb(149, 109, 175);
}

好みの色をどうしても表現したい場合は、カラーコードあるいはRGBによる指定がおすすめです。

HTMLにおけるカラーコードの指定方法を詳しく知りたい人は「【HTML】カラーコードの指定方法：文字色・背景色・透過やツール」を一読ください。

【HTML】カラーコード一覧！文字色・背景色・透明（rgba）の指定

文字を左寄せ/中央寄せ/右寄せにする

セレクタ { text-align: left or center or right; }

初期設定は、文字は左寄せで表示されます。

「文字をどこに寄せるか」はtext-alignプロパティで指定します。

値は以下の3つをよく使います。

text-alignにおける値

left：左寄せ
center：中央寄せ
right：右寄せ

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <h1 id="heading">文字を左寄せ/中央寄せ/右寄せにする</h1>
    <p class="p-text-1">左寄せの文字</p>
    <p class="p-text-2">中央寄せの文字</p>
    <p class="p-text-3">右寄せの文字</p>
  </div>
</body>
</html>

CSSコード表示

@charset "utf-8";

#heading {
    padding: 10px 15px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #333333;
    box-shadow: 4px 4px 0 #333333;
}

.p-text-1 {
    text-align: left;
}

.p-text-2 {
    text-align: center;
}

.p-text-3 {
    text-align: right;
}

左寄せの文字に関しては、本来初期設定でleftになっているため必要はありませんが、中央寄せと右寄せが表示できているのが分かります。

背景色を変える

セレクタ { background-color: 色名 or カラーコード or RGB; }

背景色はbackground-colorプロパティにより変えられます。

値は文字色と同様に色名・カラーコード・RGBを記述します。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <h1 id="heading">文字を左寄せ/中央寄せ/右寄せにする</h1>
    <p class="p-text-1">左寄せの文字</p>
    <p class="p-text-2">中央寄せの文字</p>
    <p class="p-text-3">右寄せの文字</p>
  </div>
</body>
</html>

CSSコード表示

@charset "utf-8";

body {
    background-color: lightskyblue;
    /* background-color: #87cefa; */
    /* background-color: rgb(135, 206, 250); */
}
#heading {
    padding: 10px 15px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #333333;
    box-shadow: 4px 4px 0 #333333;
}

ちなみにbackground: lightskyblue;と-colorを省略して書いても、表示は同じになります。

線で囲う・線を引く

セレクタ { border: 種類線の太さ色; }
3つの値を指定していきます。
それぞれの値の間には半角スペースを空けます。

線をひくときはborderプロパティを利用します。

例として、以下の確認していきましょう。

.p-text-1 {
    border: solid 1px #000;
}

上記は、実線（solid）・1px（線の太さ）・#000（黒色のカラーコード）を示しています。

書く順番は自由です。

下線や枠線に関するまとめを確認したい人は「【HTML】下線を引く・消す方法：テキスト・リンク・テーブルにおけるCSS装飾」を一読ください。

HTMLの下線（アンダーライン）を引く・消す！aタグ（リンク）のCSS装飾

線の種類

以下は、代表的な線の種類になります。

代表的な線の種類

solid（実線）
dotted（点線）
dashed（破線）
double（二重線）

線なしの場合は、boeder: noneで線を消すことができます。（初期状態）

線の太さ

線の太さは1px〜3pxを指定する場合がほとんどです。

ただし、線の種類がdouble（二重線）の場合、2本の線合わせての太さなので線を太めにする必要があります。

線の色は、色名・カラーコード・RGBで指定します。

ここでは代表的な線の種類を表現してみましょう。

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <h1 id="heading">線の太さ</h1>
    <p>初期設定の状態</p>
    <p class="p-text-1">solid（実線）の状態</p>
    <p class="p-text-2">dotted（点線）の状態</p>
    <p class="p-text-3">dashed（破線）の状態</p>
    <p class="p-text-4">double（二重線）の状態</p>
  </div>
</body>
</html>

CSSコード表示

@charset "utf-8";

#heading {
    padding: 10px 15px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #333333;
    box-shadow: 4px 4px 0 #333333;
}

.p-text-1 {
    border: solid 1px #000;
}

.p-text-2 {
    border: dotted 1px #000;
}

.p-text-3 {
    border: dashed 1px #000;
}

.p-text-4 {
    border: double 1px #000;
}

上下左右の一部だけ線を引きたいとき

Webサイトを作っていく中で「一部だけ線を引きたい」といったこともあります。

boder-○○によって一部の線を実現することができます。

上下左右の線の指定方法

border-top: ~ →上のみ線を引く
border-bottom: ~ →下のみ線を引く
border-left: ~ →左のみ線を引く
border-right ~ →右のみ線を引く

HTMLコード表示

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <h1 id="heading">線の太さ</h1>
    <p>初期設定の状態</p>
    <p class="p-text-1">solid（実線）の状態</p>
    <p class="p-text-2">dotted（点線）の状態</p>
    <p class="p-text-3">dashed（破線）の状態</p>
    <p class="p-text-4">double（二重線）の状態</p>
  </div>
</body>
</html>

CSSコード表示

@charset "utf-8";

#heading {
    padding: 10px 15px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #333333;
    box-shadow: 4px 4px 0 #333333;
}

.p-text-1 {
    border-top: solid 2px #000;
}

.p-text-2 {
    border-bottom: dotted 2px #000;
}

.p-text-3 {
    border-left: dashed 2px #000;
}

.p-text-4 {
    border-right: double 2px #000;
}

枠線をつけるborderの使い方を詳しく知りたい人は「【CSS】borderの使い方：線の種類・角丸・重なりの解決策」を一読ください。

【CSS】borderの使い方まとめ！枠線の種類・角丸・太さの指定方法

コメントアウトの書き方

/* この中の文章はCSSに反映されません */

コメントアウトは、CSSの中にメモ書きする方法です。

コメントアウトの部分はWebページの内容や見た目に一切反映されません。

@charset "utf-8";

#heading {
    padding: 10px 15px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #333333;
    box-shadow: 4px 4px 0 #333333;
}

.p-text-1 {
    /* 以下は上部に線を引く */
    border-top: solid 2px #000;
}

.p-text-2 {
    border-bottom: dotted 2px #000;
}

/* 左線はコメントアウトで非表示に */
/*
.p-text-3 {
    border-left: dashed 2px #000;
}
*/

.p-text-4 {
    border-right: double 2px #000;
}

コメントアウトをうまく使うと、実施内容をメモできたり、ABテストのようにCSSの適用をすぐに変えられるようメモでコードを置いておくこともできます。

コメント関連の詳細な使い方を詳しく知りたい人は「【HTML】コメントの書き方：1行・複数行・ショートカット・入れ子の使い方」を一読ください。

HTMLコメントアウトの書き方！複数行・入れ子・ショートカット