メニュー
CSS(Cascading Style Sheets)とは、HTMLなどのWEBページのスタイル(デザイン)を指定するための言語です。 基本的な書式があり、それに従ってWEBページの色や文字のデザイン、全体の文書のレイアウトを決めることができます。 HTMLと同様、命令を実行するわけではなく、文書をどのようなデザインで表示するかを決定するための形式としてCSSを扱います。

CSSとは

3年以上前に更新されました。情報が古い可能性があります。
 更新日 : 2019年01月02日

CSS(Cascading Style Sheets)とは、HTMLなどのWEBページのスタイル(デザイン)を指定するための言語です。

基本的な書式があり、それに従ってWEBページの色や文字のデザイン、全体の文書のレイアウトを決めることができます。

HTMLと同様、命令を実行するわけではなく、文書をどのようなデザインで表示するかを決定するための形式としてCSSを扱います。

CSSが必要な理由

WEBページの文書構造を表すために使われるのがHTMLです。そのWEBページは主に複数ページにまたがって構成されていることが多いです。

たとえばこのBeCrazyは、記事のページやカテゴリーのページごとに多少のデザインの差異はありますが、基本的なベースとなるデザインはそれほど変わりません。

デザインがそれほど変わらず、文書の内容だけが異なるページが複数存在する場合、HTMLごとに毎回同じデザイン構造を書いていくのは面倒ですし、メンテナンスも大変になってしまいます。

そのため、文書の構造を決定するHTMLと、文書のデザインを決定するCSSを明確に分けることでメンテナンス性を向上させていきます。

CSSの基本

CSSの基本的な書式を学んでいきましょう。

基本的にはHTMLとセットで使用するため、以下のHTMLを見てみましょう。

HTMLについて学んでいない方は「HTMLとは」と「HTMLの構造」を参照ください。

<!DOCTYPE html>
<html lang="jp">
<head>
	<meta charset="utf-8">
	<title>タイトル</title>
	<style type="text/css">
		article {
			text-align: center;
			color: red;
		}
	</style>
</head>
<body>
	<header>
		<h1>サイト名</h1>
	</header>
	<article id="sample">ここにいろんな文を書いたり画像を置いたり…</article>
</body>
</html>

CSSの部分を抜き出して書くと…

このようになります。今回は基本的なスタイルの指定を行っています。

セレクタ

まずはarticleの部分です。ここはセレクタと言って、実際にHTMLのどの部分に対してスタイルを指定していくかを決定します。

今回はarticleという指定なので、articleタグ全体に対してスタイルを指定することになります。
HTMLタグに対してスタイルを指定する場合にはタグだけを書けば問題ありません。

その他の指定の方法としてはHTMLのid属性での指定や、HTMLのclass属性での指定方法等、いくつかのセレクタ指定方法があります。勉強していくうちに自然と覚えたり扱ったりしていくため、ここでは省略します。

プロパティ

プロパティでは、実際にどんなスタイルを指定するかを記載していきます。

CSSプロパティにも、たくさんの種類が存在しますが、いちいち覚える必要はありません。今回のプロパティはtext-align(テキストの位置を決める)と、color(文字色を決める)を利用しています。

このプロパティに対して、実際のスタイルを決定するのが下記にあるプロパティの値です。

プロパティの値

上記のプロパティtext-alignではテキストの位置を決める宣言をしていますが、実際に左に寄せるのか、真ん中に寄せるのかを決めるのがプロパティの値です。

今回text-alignではcenter(真ん中寄せ)を、colorではred(赤)を指定しています。

多種多様にあるプロパティによって、プロパティの値もある程度決まってきます。例えば、colorプロパティでは、色関係のプロパティの値のみを指定することができます。

colorプロパティでcenter という値は意味的にもおかしいため、指定できません。

セレクタ・プロパティ・プロパティの値の関係

まず基本となるのはセレクタです。どこにデザインを反映するのかを指定しましょう。セレクタの後ろには中括弧{}を書きます。この中括弧でセレクタのデザインする範囲が決まります。

中括弧の中にプロパティとプロパティの値を記述していきます。

プロパティとプロパティの値が明確になるようにプロパティ: プロパティの値;というようにコロンで区別していきます。

プロパティの値を記述したあとの;セミコロンも忘れないようにしましょう。

セミコロンによって、複数のデザインを区別して反映させることができます。

基本的には以下のようにスタイルを指定していきます。

セレクタ {
	プロパティ1: プロパティの値1;
	プロパティ2: プロパティの値2;
	…(以下同様)
}

上で記載したHTMLとCSSの結果は以下のようになります。

まとめ

今回はCSSの基本について学びました。

CSSとHTMLは切っても切り離せない関係ですが、HTMLとCSSをうまく分離して、複数のページにまたがってCSSデザインを適用していくことで、上手にWEBページを構築することができます。

CSS、HTMLを学んでいくことによって、効率的な書き方を身に着けていくことができますので、まずはCSSの基本を押さえていきましょう。

タグ