HTML

Webサイトのスタイル統一を目指して！HTMLのスタイルはCSSで決まる

折乃　杏

インフラエンジニア/ヘルプデスク（COBOLも経験あり）/ボールド歴3年

最終更新日:2019/5/23

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）は、HTMLと組み合わせて使用する言語です。

HTMLがWebページ内の文書構造を記述することに対し、CSSではそれらのデザインを定義します。例えば、Webページがブラウザで表示される際の文字や線の色、サイズ、レイアウトなどの表示スタイルです。

CSSの記述方法は複雑そうに見えますが、覚えてしまえば簡単です。この記事ではCSSの基本について、初心者向けに解説していきたいと思います。

１．CSSとは
- １-１．スタイルシートが必要な理由
- １-２．CSSのバージョン
２．HTMLでCSSを読み込むには
３．CSSの書き方
- ３-１．書き方の基本
- ３-２．セレクタのグループ化とクラス指定
４．CSS作成時に便利なサイトとおすすめ書籍
５．さいごに

１．CSSとは

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、Webページのスタイルを指定するための言語です。Webページに限らず、Wordなどで作成された文書のスタイルを制御する技術全般をスタイルシートといいますが、HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。

１-１．スタイルシートが必要な理由

Webページの視覚的な部分の制御をCSSが担うことで、簡潔なHTMLが作成でき、理解しやすくなります。

現在、ウェブページを制作する言語として広く利用されているHTMLやXHTMLには、 <color>や<font>などの装飾目的のタグや属性があり、HTMLだけでウェブページのスタイルを制御することもできます。

しかし、HTMLは文書構造を定義するための言語であり、そこにスタイル関連の定義まで追加してしまうと、HTMLファイルの文書構造が崩れてしまったり、後から修正が必要になった時もページ全てを見直し、修正することが必要になります。「スタイルに関してはあのCSSファイルを参照して」と、HTMLファイルに指定しておけば、そのCSSファイル1つ修正すれば、参照しているHTMLファイルは、表示の確認を行うだけで済みます。

また、HTMLのタグをどのように表示するかは、ブラウザの種類はバージョンによって異なる場合があります。 HTMLタグを駆使してWebページを作成し自分のパソコンでは思い通りに表示できたとしても、他のパソコンやスマホでは、意図しないレイアウトになってしまうこともありえます。

このような理由から、HTMLでは文書構造のみを定義して、スタイルについてはスタイルシートで指定することが推奨されています。

１-２．CSSのバージョン

現在CSS1からCSS3までの3つのバージョンが存在しています。（「CSS4」はCSSのモジュール化に伴い「Cascading Style Sheets,Level4」モジュールの総称名となっています）

1996年にCSS1（Cascading Style Sheets,Level1）が勧告されてから、追加、拡大、改訂が行われています。現在はCSS3が主流です。

２．HTMLでCSSを読み込むには

CSSを読み込むには、以下のような方法があります。

外部ファイルを読み込む
head内に記述する
インラインで記述する

では、それぞれの書き方を見てみましょう。

２-１．外部ファイルを読み込む

CSSファイルをHTMLファイルとは別に作成して、HTMLファイル内から呼び出します。呼び出しには、HTML文書の<head>タグ内に<link>タグを記述して、外部CSSファイルを指定します。<link>タグのtype属性の値にはtext/cssを指定します。スタイルの修正のしやすさやHTMLファイル数が多いときなど、この方法でスタイルシートを設定するのがおすすめです。

スタイルシート部分は外部ファイル（abcdef.css）に記述。

p {
color: blue; line-height: 1.5;
}

【HTMLファイルの記述】

<html>
<head>
<link rel="stylesheet" type="text/css" href="abcdef.css">
</head>
<body>
<p>段落となります。</p>
</body>
</html>

２-２．head内に記述する

HTMLファイルの<head>タグ内に<style>タグを記述して、ファイル単位にスタイルシートを設定します。

そのページさえスタイルが適用できればいい！という場合向きです。

【HTMLファイルの記述】

<html>
<head>
<style type="text/css">
p {color:blue; line-height:1.5;}
</style>
</head>
<body>
<p>段落となります。</p>
</body>
</html>

２-３．インラインで記述する

タグにstyle属性を追加して局所的に適用する場合です。そのページのこの部分さえどうにかなればいい！という時に使用します。

2か所以上ある時は今後のHTMLファイル管理のためにも外部CSSファイルを作成するか、headタグ内で指定することをお勧めします。

【HTMLファイルの記述】

<html>
<head>
<meta name="Content-Style-Type" content="text/css">
</head>
<body>
<p style="color:blue; line-height:1.5;">段落となります。</p>
</body>
</html>

３．CSSの書き方

上であげた例の中では、外部ファイルを読み込む方法が一般的な方法になりますので、「外部ファイルに記述する方式」でCSSの記述方法をご紹介します。

２－１でも例にあげましたが、HTMLファイル側には、linkタグのhref属性に以下のように記述しておきます。

３-１．書き方の基本

【HTMLファイルの記述】

<html>
<head>
<link rel="stylesheet" type="text/css" href="abcdef.css">　←ココ
</head>
<body>
<h1>ここはｈ１</h1>
<p>ここはｐタグのなか</p>
</body>
</html>

（「abcdef.css」はCSSファイル名です）

CSSファイル側は、たとえばこのように記述します。

【CSSファイルの記述】（abcdef.cssの中身）

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #c0c0c0;
	font-size: 14px;
}

p {
  color: #ffffff;
}

【ブラウザでの表示例】

CSSは「セレクタ」「プロパティ」「値」の3つ組み合わせでスタイルを指定します。「セレクタ」は上記の例では「body」の部分です。どのタグにスタイルを設定するのかを書きます。「プロパティ」は「margin」や「padding」の部分、「値」は「0」の部分になります。値の部分を「：」と「；」ではさみます。

セレクタ {プロパティ：値；}　という書式です。

例１：フォントの指定

フォントの指定はfont-familyプロパティで指定します。

p {
  font-family: "MS PGothic","ＭＳ Ｐゴシック",sans-serif;　　←フォントを複数指定できます
}

※フォント名にスペースが含まれている場合は引用符で囲んでください。

「sans-serif」はゴシック系のフォントを指定しています。

例２：文字色

文字の色はcolorプロパティで指定します。基本的な書き方は次の通りです。

p {
  color: #ffffff;
}

例３：文字の大きさ

文字の大きさはfont-sizeプロパティで指定します。

p {
  font-size: 13px;
}

p {
  font-weight: bold;
}

値の種類は以下の通りです。

normal（普通の太さ）
bold（太字）
100〜900の値（大きい程太い）

例５：テキストの左寄せ・中央寄せ・右寄せ

テキストの寄せ方はtext-alignで指定します。

値の種類は以下の通りです。

right（右寄せ）
center（中央寄せ）
left（左寄せ）

p {
  text-align: center;
}

例６：段落のあとに空白行をつくる

「段落のあと」なので「margin-bottom」とします。

p.sp {
  margin-bottom: 2em;
}

段落の上にあけたい時は　「margin-top」となります。

「em」はフォントサイズの高さを1とします。

「%」や「px」でも指定できます。

３-２．セレクタのグループ化とクラス指定

CSSは「セレクタ」「プロパティ」「値」の3つ組み合わせでスタイルを指定しますが、このセレクタの部分を複数指定することができます。

セレクタはカンマ（，）で区切って複数指定することができます。

h1,h2 {
  color: red; /* 文字色は赤　*/
}

「/*」と「*/」で囲んだ部分はコメントとして扱われます。

また、同じ要素でもある部分は赤、ある部分は青、というような指定をしたいときは「クラス」をつけます。

下記の「red」「blue」の部分が「クラス」です。

p.red {
  color: red; /* 文字色は赤　*/
}
.blue {                             ←要素名を省略することもできます
  color: blue; /* 文字色は青　*/
}

【HTMLファイルの記述】

<html>
<head>
<link rel="stylesheet" type="text/css" href="abcdef.css">
</head>
<body>
<h1>ここはｈ１</h1>
<p class="red">ここは赤で表示されます</p>
<p class="blue">こっちは青で表示されます</p>
</body>
</html>

４．CSS作成時に便利なサイトとおすすめ書籍

基本はおさえた！でも、プロパティは何種類もある！当然、全て覚えるの無理なので「どんな指定ができるのかな」と「どんな使い方ができるのかな」と、気になった時は下記のサイトや本をご活用ください。

【お勧めサイト】
http://www.htmq.com/style/
スタイルシートリファレンス（目的別）
※各プロパティの対応ブラウザもわかります。

https://saruwakakun.com/html-css/basic/linear-radial-gradient
CSSのグラデーション（linear-gradient）の使い方を総まとめ！
※CSSでグラデーションも作れます。