【初心者向け】CSSの基本的な書き方・ルールを徹底解説

2019年1月21日 2020年1月23日

今回は、初心者の方を対象にCSSの基本的な書き方・ルールを説明します。

CSSを使ってホームページを装飾を変更したいんですけど、みても全然わからなくって・・・

CSSの基本がわかれば、ホームページのちょっとした見た目を変更したり、ブログをより見やすくしたりすることができます。今回は、初心者の方を対象にCSSの基本的な書き方・ルールを説明していきますね。

1 CSSとはWebページの見た目を整える言語
2 CSSの3つの書き方
3 【書き方1】インラインスタイルシートでのCSSの書き方
4 【書き方2】内部スタイルシートでのCSSの書き方
5 【書き方3】外部スタイルシートでのCSSの書き方
- 5.1 【手順1】CSSファイルにcssを記述する
- 5.2 【手順2】htmlファイルでCSSファイルを参照する設定をする
6 3つの方式の特徴まとめ
7 主なCSSプロパティ
8 まとめ
9 YouTubeチャンネル開設しました！

CSSとはWebページの見た目を整える言語

HTMLで作成したWebページのスタイルを整えるため、CSS（Cascading Style Sheets）という言語を利用します。

HTMLとCSSは何が違うんですか??

たとえば、HTMLが「目が二つ」「鼻が一つ」でといったように人の構造を定義する言語だとすると、CSSは「この人の目は二重にして、鼻の高さは2センチで」といったように人の見た目を調整する言語です。

■人に例えたイメージ

具体的には「この見出しは背景をグレーで」「テキストを中央揃えで」「文字色は白で」などHTMLで定義した内容をどんな見た目に表示させるかをCSSで設定していきます。

CSSでスタイルを指定すると、ブラウザで開いたときにそのスタイル(見た目)が適用されています。

■CSSを適用していない場合のH1タグ。見た目が装飾されていない。

■CSSを適用した場合のH1タグ。見た目が装飾されている。

■上記のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSS</title>
  </head>
  <body>
    <h1 style="background-color:#085baf;color:#fff;text-align:center;font-size:50px;">CSSの書き方</h1>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSS</title>

</head>

<body>

<h1 style="background-color:#085baf;color:#fff;text-align:center;font-size:50px;">CSSの書き方</h1>

</body>

</html>

HTMLは文書の構造を定義する言語、セットで使うCSSは文書の見た目を調整する言語という点を覚えておきましょう。

▲▲目次に戻る▲▲

CSSの3つの書き方

CSSの書き方ですが、大きく3つの方式があります。

CSSの3つの書き方

【インラインスタイルシート方式】HTMLタグに直接CSSを書き込む形式
【内部スタイルシート】headタグにまとめてCSSを書き込む形式
【外部スタイルシート】外部ファイルにCSSをまとめて書き込む形式

それでは、順番に説明していきます。

【書き方1】インラインスタイルシートでのCSSの書き方

インラインスタイルシートは、HTMLタグに直接CSSを書き込むやり方です。 <h1 style="color:red;">のように、タグに直接CSSを書き込みます。

インラインスタイルシート形式でのCSSの書き方

【書き方】 <html要素名 style="プロパティ(設定項目):設定値;">
【例】 <h1 style="color:red;">赤色の見出し</h1>

後ろのセミコロンは省略可能ですが、複数のプロパティを設定する場合は必須なので付けておく習慣づけをしておくと良いと思います。

■使用例

<h1 style="color:red;">はじめてのCSS</h1>

1	<h1 style="color:red;">はじめてのCSS</h1>

■表示例

■複数のプロパティを設定する場合
「文字は赤色で背景は水色で」といったように複数の設定値を入れる場合は、プロパティとプロパティの間に「;」で区切って何個でも足していくことができます。

■使用例　文字色が白色で背景がライトブルーで枠線がスカイブルー

<h1 style="color:white;background-color:lightblue;border:4px solid skyblue;">はじめてのCSS</h1>

1	<h1 style="color:white;background-color:lightblue;border:4px solid skyblue;">はじめてのCSS</h1>

■表示例

インラインスタイルシート形式の場合、以下の特徴があります。

インラインスタイルシート形式の特徴

各タグにそれぞれ個別に設定できる
「pタグは全て青文字」のように共通で設定できないので、都度設定する手間がかかる

【書き方2】内部スタイルシートでのCSSの書き方

内部スタイルシート形式の基本

内部スタイルシートは、headタグにまとめてCSSを書き込む形式です。<head>タグの中に下記のようにスタイルを記述します。

(※)セレクタとはスタイルを適用する対象のことです。たとえば、h1やpなどのhtmlタグなどが相当します。少し難しくなりますが、セレクタの詳細については「知っておきたいCSS セレクタの優先順位・詳細度・継承」を合わせてご参照ください。

(※)改行や半角スペースあってもなくても構いませんが、見やすさを考慮して改行しています。

(※)media="screen"はあってもなくても構いません。
参考:●media属性を使った媒体別のスタイルシート

複数のプロパティの設定をする場合、インラインスタイルシート形式と同様にプロパティとプロパティの間に「;」で区切って設定値を何個でも足していくことができます。

■内部スタイルシートでのCSS設定例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
    <style media="screen">
      h1{
        color:white;
        background-color:lightblue;
        border:4px solid skyblue;
      }
    </style>
  </head>
  <body>
    <h1>はじめてのCSS</h1>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

h1{

color:white;

background-color:lightblue;

border:4px solid skyblue;

}

</style>

</head>

<body>

<h1>はじめてのCSS</h1>

</body>

</html>

■表示例

複数のセレクタに対してスタイルを設定

複数のセレクタに対してスタイルを設定する場合は、下記のようにh1は赤文字でh2はオレンジで、といったように追記していきます。

■設定例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
    <style media="screen">
      h1{
        color:red;
      }
      h2{
        color:orange
      }
    </style>
  </head>
  <body>
    <h1>はじめてのCSS</h1>
    <h2>CSSの書き方</h2>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

h1{

color:red;

}

h2{

color:orange

}

</style>

</head>

<body>

<h1>はじめてのCSS</h1>

<h2>CSSの書き方</h2>

</body>

</html>

■表示例

h1やpなどのhtmlタグのほか後述で説明するid名やclass名などがあります。

内部スタイル形式は、下記のような特徴があります。

内部スタイルシート形式の特徴

1枚のWebページ全体にスタイルを適用できる
複数のWebページ共通で適用できない（各ファイルに同様の記述をしないといけない)

id属性とclass属性を使ってセレクタに指定する方法

htmlの各タグにはid属性やclass属性というものが設定できます。内部スタイルシートや後述の外部スタイルシートでは、セレクタにid名やclass名を指定もできるので、あわせて覚えておきましょう。

■記述例 (内部スタイルシート形式で記述)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
    <style media="screen">
      #top-h{
        background: red;
      }
      .blue-text{
        color:blue;
      }
    </style>
  </head>
  <body>
    <h1 id="top-h">はじめてのCSS</h1>
    
    <p class="blue-text">この文章は青文字になっています</p>
  
    <h2 class="blue-text">この見出しも青文字になっています</h2>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

#top-h{

background: red;

}

.blue-text{

color:blue;

}

</style>

</head>

<body>

<h1 id="top-h">はじめてのCSS</h1>

<p class="blue-text">この文章は青文字になっています</p>

<h2 class="blue-text">この見出しも青文字になっています</h2>

</body>

</html>

■表示例

例 htmlタグにid名やclass名を設定

<h1 id="top-h">はじめてのCSS</h1>
<p class="blue-text">この文章は青色になります</p>

HTMLのタグを書く際に<HTML要素名 id="任意のid名">、あるいは、<HTML要素名 class="任意のclass名">と記述します。CSS側でidやclassをセレクタとして指定する際は、id名を「 #id名」、class名を「 .class名」で指定します。

●(参考)「知っておきたいCSS セレクタの優先順位・詳細度・継承」

id名はHTMLファイル内で一意である必要があり、classは一意でなくとも構いません。

idやclassを設定することでCSSでレイアウト装飾する際に「このid名がついているタグは背景を赤色にする」、あるいは「このclass名がついているタグは文字色を青色にする」などの指定ができるようになります。

【書き方3】外部スタイルシートでのCSSの書き方

最後に３つ目の書き方は、外部に作ったCSSファイルを参照する方式です。

まず、任意の名前のCSSファイル(例. style.css)を作成してそこにCSSを記述します。次に、HTMLファイル側では作成したCSSファイルを参照する設定をします。

外部スタイルシートの読み込み設定

【手順1】CSSファイルにcssを記述する

まずは、「style.css」などのように拡張子をcssにしたcssファイルを作成します。cssファイルの中身には内部スタイルシート形式と同様にcssを記述します。

■外部CSSファイル(style.css)

@charset "UTF-8";
h1{
  color:red;
}

@charset "UTF-8";

h1{

color:red;

}

書き方としては下記の通りです。

@charset "UTF-8";
セレクタ1{
プロパティ1:値;
プロパティ2:値;
...
}
セレクタ2{
　 ...
}

●(参考)「知っておきたいCSS セレクタの優先順位・詳細度・継承」

(※)先頭の@charset "UTF-8";は文字コードの設定(おまじないのようなもの)です。それ以外は内部スタイルシートの場合と同じような書き方になります。

【手順2】htmlファイルでCSSファイルを参照する設定をする

■HTMLファイル側ではCSSファイルを参照する設定をします。headタグ内に以下のような記述をします。
<link rel="stylesheet" href="CSSファイルの格納場所(※)">

■HTMLファイルの例 cssフォルダにあるstyle.cssを参照

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1>はじめてのCSS</h1>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

<h1>はじめてのCSS</h1>

</body>

</html>

格納場所の指定方式は画像の格納場所の指定方法と同じです。(相対パスの参考：画像の格納場所の指定方法 | HTMLの基本とタグの一覧)

■表示例

外部スタイルシートの場合は、下記のような特徴があります。

外部スタイルシート形式の特徴

複数のHTMLファイルで同じCSSファイルを利用できる(何か変更したい場合に、一つのCSSファイルの変更で済む)

▲▲目次に戻る▲▲

3つの方式の特徴まとめ

CSSの3つの書き方の特徴のまとめです。

方式	メリット	デメリット
インラインスタイルシート	各タグにそれぞれ個別に設定できる	タグ共通で設定したい場合は、各タグ個別に設定する必要があるので面倒臭い
内部スタイルシート	1枚のWebページ全体にスタイルを適用できる	複数のWebページ共通で適用できない（各ファイルに同様の記述をしないといけない)
外部スタイルシート(CSS)ファイル参照	各ページで共通して一つのcssファイルを読み込める(何か変更したい場合に一つのCSSファイルの変更で済む)	慣れないうちはインライン形式・内部スタイルシートに比べてHTMLタグへの指定方法が少し難しい。

なお、インラインスタイルシート、内部スタイルシート、外部スタイルシートは併用ができます。

競合する設定をしている場合は、優先順位があるのでそれにしたがってスタイルが適用されます。

詳細は「知っておきたいCSSセレクタの優先順位・詳細度・継承」の記事をご参照ください。

主なCSSプロパティ

実際によく使うCSSの設定項目や設定値の例を下記に挙げます。詳しくはそれぞれのリンクで説明していますのであわせてご参考ください。

カテゴリ	プロパティ	意味
文字に関するスタイル	font-size	文字の大きさ(フォントサイズ)
	color	文字の色
	font-weight	文字の太さ
	font-family	文字の字体
	text-decoration	テキストの装飾
枠線に関するスタイル https://webst8.com/blog/css-border/	border	枠線
	border-(※各辺)	枠線の各辺 (上top/下bottom/右right/左left)
	border-radius	枠の丸さ
背景に関するスタイル https://webst8.com/blog/css-background/	background-color	背景の色
	background-image	背景の画像
	background-repeat	背景の画像の繰り返し
	background-position	背景画像の表示開始位置
	background-attachment	背景画像の固定・移動
	background-size	背景画像のサイズ
	background	背景全般
横幅と高さに関するスタイル	width	横幅
横幅と高さに関するスタイル	height	高さ
余白に関するスタイル https://webst8.com/blog/css-padding/ https://webst8.com/blog/css-margin/	margin	外部余白
	margin-(※各辺)	外部余白の各辺 (上top/下bottom/右right/左left)
	padding	内部余白
	padding-(※各辺)	内部余白の各辺 (上top/下bottom/右right/左left)
ボックスサイズの算出方法を指定	box-sizing	枠線(border)や内部余白(padding)の大きさをwidthやheightに含めるかどうか
テキストに関するスタイル	text-align	水平方向の位置
テキストに関するスタイル	line-height	行の高さ
表示に関するスタイル	display	表示
位置に関するスタイル https://webst8.com/blog/css-position/	position	位置
	top	上からの位置
	bottom	下からの位置
	left	左からの位置
	right	右からの位置
	z-index	重なりの順序指定
横並び(浮動)に関するスタイル https://webst8.com/blog/css-float/	float	横並び(浮動)
横並び(浮動)に関するスタイル https://webst8.com/blog/css-float/	clear	横並び(浮動)の解除
影に関するスタイル	box-shadow	ボックスの影
影に関するスタイル	text-shadow	テキストの影