最終更新日：
公開日：

ワークショップ

HTML&CSS入門 WEBサイトを作る

VOL04CSS（スタイルシート）の基礎

CSS（スタイルシート）の基本を解説した上で、実際にCSSを書いてみてどのように適用されるか確認していきます。

この記事のポイント

  • CSSの基本的な書き方が分かる
  • 実際にCSSを書いて効果を確認する

目次

CSSの書き方

CSSは「Cascading Style Sheet」の略で、これを「スタイルシート」と呼びます。

CSSはHTMLの表示を整える役割があり、必ず必要というわけではありませんがほとんどのWEBサイトで使用されています。
HTMLはコンテンツの構造を担当し、表示を整える部分はCSSが担当します。

まずは基本的な書き方からみていきましょう。

CSSのコード例

body {
	background-color: gray;
}

CSSは3つのパーツから構成されます。

  • セレクタ
  • 宣言ブロック
  • プロパティ
CSSを構成する3つのパーツ

セレクタ

「セレクタ」はCSSを適用する場所を特定します。
上記のように「body」であればbody要素に適用することができます。
同じようにh1要素なら「h1」と指定したり、p要素なら「p」のようにHTMLの要素名で指定することができます。
これを「タイプセレクタ」と呼びます。

セレクタはいくつか種類があり、全ての要素に適用する「ユニバーサルセレクタ」、id属性で指定する「IDセレクタ」、class名で指定する「クラスセレクタ」、属性で指定する「属性セレクタ」などがあります。

ユニバーサルセレクタ

ユニバーサルセレクタは全ての要素を対象にするセレクタで、次のように「*」を使って指定します。

CSSのコード例

* {
	color: blue;
}

IDセレクタ

IDセレクタはHTML要素のID属性を対象にするセレクタで、「#属性名」の形式で指定します。

CSSのコード例

#title {
	color: blue;
}

この場合は、指定したid属性を持つ要素のみにプロパティを適用します。

HTMLのコード例

<body>
	<h1 id="title">ページのコンテンツ</h1>
	<p class="text">コンテンツのテキスト1</p>
	<p class="text">コンテンツのテキスト2</p>
</body>

クラスセレクタ

クラスセレクタはHTML要素のclass属性を対象にするセレクタで、「.クラス名」の形式で指定します。

CSSのコード例

.text {
	color: blue;
}

この場合は、指定したクラス名「text」を持つ要素のみにプロパティを適用します。

HTMLのコード例

<body>
	<h1 id="title">ページのコンテンツ</h1>
	<p class="text">コンテンツのテキスト1</p>
	<p class="text">コンテンツのテキスト2</p>
</body>

IDセレクタとクラスセレクタは同じように見えますが、IDセレクタの方が優先度は高くなります。
その代わり同じIDを複数の要素に指定することはできません。
一方で、class名は同じ値を複数の要素に指定できるため、共通したCSSを適用したい場合に便利です。

属性セレクタ

属性セレクタはHTML要素の任意の属性に対してCSSを適用したいときに指定します。

CSSのコード例

inpu[type=text] {
	border-radius: 5px;
}

この場合は、type属性に「text」が指定されている要素のみにCSSを適用することができます。

HTMLのコード例

<form method="post" action="">
  <input type="text" name="your_name" value="">
  <input type="email" name="your_email" value="">
  <input type="submit" name="button_submit" value="送信">
</form>

プロパティ

CSSのプロパティは様々なものが用意されており、宣言ブロックに複数指定することができます。
以下のコード例は、ページ全体の背景色とフォントサイズ、種類を指定しています。

CSSのコード例

body {
        font-size: 100%;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #9ecfff;
}

プロパティは色、サイズ、余白などをはじめ、インデントや行間、幅寄せなど細かい設定も指定できるように本当に多くのものが用意されています。
ここでは紹介しませんが、今後コードを書きながら少しずつプロパティを覚えていきましょう。

CSSを書く場所

CSSはHTMLファイルに直接書く方法と、独立したCSSファイルに書く方法があり、さらにHTMLファイルに直接書く場合は「head要素に書く方法」と「HTML要素にstyle属性で書く方法」の2つの方法があります。
どのような形になるか1つずつ確認していきましょう。

head要素に書く方法

head要素の中にstyle要素を書いて、その中にCSSを書いていきます。

コード例

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>トップページ</title>
    <style>
			body {
        font-size: 100%;
        font-family: Arial, Helvetica, sans-serif;
				background-color: #9ecfff;
			}

      p {
        font-size: 86%;
        color: #222;
      }
    </style>
  </head>
  <body>
    <h1>トップページ</h1>
    <p>Hello, HTML!</p>
  </body>
</html>

style要素に書いたCSSはbody要素の該当する要素にCSSが適用されます。

HTML要素にstyle属性で書く方法

こちらはCSSを適用したい要素にsytle属性を使って指定する方法です。

コード例

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>トップページ</title>
  </head>
  <body style="font-size: 100%; font-family: Arial, Helvetica, sans-serif; background-color: #9ecfff;">
    <h1>トップページ</h1>
    <p style="font-size: 86%; color: #222;">Hello, HTML!</p>
  </body>
</html>

この方法は「インラインスタイル」や「インラインCSS」と呼ばれます。
CSSを適用したい要素に直接書くことができるので便利そうですが、後でどこにCSSを書いたか分かりづらくなってしまうためあまりオススメできません。

CSSファイルに書く方法

「sytle.css」のように拡張子「.css」を付けて、HTMLファイルとは別のテキストファイルとして書く方法です。
CSSファイルはHTMLから読み込むことで適用することができます。

CSSファイルを読み込むイメージ

HTMLとCSSを分けて管理できたり、複数のページで1つのCSSを共有できるため一番オススメの方法です。

style.css

body {
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #9ecfff;
}

p {
  font-size: 86%;
  color: #222;
}

HTMLファイルはlink要素で「style.css」を読み込むことができます。

index.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>トップページ</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>トップページ</h1>
    <p>Hello, HTML!</p>
  </body>
</html>

以上、CSSを書く場所について3つの方法してきました。
最後に、実際にCSSを書いてみましょう。

CSSを書いてみる

前回作成した「index.html」を使って、CSSがどのように適用されるかを確認していきます。
head要素内にstyle要素を追記してください。

index.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>トップページ</title>
    <style>
    </style>
  </head>
  <body>
    <h1>トップページ</h1>
    <p>Hello, HTML!</p>
  </body>
</html>

続いて、プロパティを書いていきます。
まずはbackground-colorプロパティでページの背景色を変更してみましょう。

index.html

<!doctype html>
<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>トップページ</title>
		<style>
			body {
				background-color: #9ecfff;
			}
		</style>
	</head>
	<body>
		<h1>トップページ</h1>
		<p>Hello, HTML!</p>
	</body>
</html>

変更を保存し、ブラウザで開いてみてください。
次のように背景の色が白から青に変わったでしょうか。

ブラウザの表示例

色の指定「#9ecfff」はカラーコードという16進数の値で指定する方法を使っています。
今は馴染みがないかもしれませんが、WEBサイト制作でよく使われているAdobeのツールではよく使われる方法なので、少しずつ使って慣れていきましょう。
色の指定方法はその他にもキーワード（カラー名）やRGBなどで任意の形式を使って指定することができます。

試しに、h1要素の文字色をキーワードで変更してみましょう。

index.html

<!doctype html>
<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>トップページ</title>
		<style>
			body {
				background-color: #9ecfff;
			}
			h1 {
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>トップページ</h1>
		<p>Hello, HTML!</p>
	</body>
</html>

ブラウザを更新してみると、次のようにh1要素の色が変わります。

ブラウザの表示例

キーワードは「blue」の他にも「red」「black」「white」などが定義されています。
興味がある方は、以下のページも参照してみてください。
CSSでの色の指定方法について

今回はここまでとなります。
次回はWEBサイトの企画や構成の考え方を解説していきます。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

記事一覧

  1. HTML&CSS入門
  2. WEBサイトに必要なもの
  3. HTMLの基礎
  4. CSS（スタイルシート）の基礎
  5. どんなWEBサイトを作るか考える
  6. HTMLファイルを作成する
  7. トップページのHTMLコーディング
  8. CSS（スタイルシート）を作成する
  9. ヘッダーのCSSを書く
  10. コンテンツ1のCSSを書く
  11. コンテンツ2のCSSを書く
  12. フッターのCSSを書く
  13. お知らせページを作成する
  14. お知らせページのCSSを書く
  15. お問い合わせページを作成する
  16. お問い合わせページのCSSを書く
  17. ページをリンクで繋ぐ
  18. サーバーを用意する
  19. WEBサイトを公開する
前のページへ 一覧に戻る 次のページへ