更新日: 2017年03月22日
公開日: 2015年12月03日

CSS入門！基本から解説　ゼロから始めるHTML/CSS講座Vol02

ゼロから始めるHTML/CSS講座CSSの基礎と記述方法
CSSとは
CSSの記述方法
セレクタとプロパティ
課題

ゼロから始めるHTML/CSS講座CSSの基礎と記述方法

CSSとは

CSS(Cascading Style Sheets)とは、HTML文書の装飾やレイアウトをほどこすための言語です。CSSはHTMLで作成した要素に対して装飾をします。

前回の記事「HTMLの基礎知識」で作成した桃太郎の文章では、HTMLを利用し見出し・段落と文章の役割を定義しましたが、デザインは白背景に黒文字のシンプルなものになりました。CSSは、HTMLだけでは実現できない細かなデザインを指定するために利用します。

Webページは「文章の構造を定義するHTML」と「デザインを指定するCSS」のセットで基本的に作られています。

CSSの記述方法

CSSの基本書式は以下のようになります。

HTMLの「どこの部分の」「なにを」「どんな値にするか」を決まった書式に従い書いていくのがCSSの基本です。

例では「h1要素の」「文字の色を」「赤にする」と指定しています。

セレクタとプロパティ

CSSを適用する対象を指定するのがセレクタです。セレクタは要素や一部の属性を指定できます。指定したセレクタがHTMLに複数あった場合、全てにCSSは適用されます。属性の指定については別途詳細を説明します。

セレクタで「どこの部分」を指定した後、「{ }」で囲まれた中にプロパティと値を書き、適用するデザインを決定します。

CSSでは指定できるデザインがたくさん用意されています。例えば「文字の色」「文字サイズ」「背景色」などがあり、この選択肢をCSSのプロパティと呼びます。またCSSのプロパティに対して「どんな値にするか」を指定するものを値と呼びます。

プロパティと値の間は「:」(コロン)で区切り、値を指定した後は「;」(セミコロン)をつけます。

実際に「HTMLの基礎知識」で使った、momotaro.htmlの指定箇所にCSSを追記し、ブラウザで閲覧してみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>昔話</title>
<style>
h1 {
　 color: red;
}
</style>
</head>
<body>
<h1>桃太郎</h1>
<p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山に柴刈りに、おばあさんは川に洗濯に行きました。</p>
<p>おばあさんが洗濯していると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。</p>
<a href="http://codecamp.jp/">CodeCamp</a>
</body>
</html>