ウェブランサー

CSSの書き方とルールを覚えよう

CSSの書き方

CSSの書き方はとても簡単です。一定の法則があるので、慣れてしまえば誰でも悩むことなく記述できるようになります。初めてCSSを学ぶ方は、以下の法則を覚えておいてください。

CSSは「どの要素の」「どの部分を」「どれくらい」変えるのか記述する。

CSSの具体的な記述例

例えば、文章の見出しに使う文字列をHTMLタグの<h1>で囲んで、その文字を赤く装飾したい場合は以下のように記述します。

HTML
<h1>見出しのテキスト</h1>
CSS
h1 { color: #FF0000;}
表示確認
見出しのテキスト

更に、この<h1>要素に下線を付けて見出しっぽくしてみましょう。

CSS
h1 {
 color: #FF0000;
 border-bottom: 1px solid #999999;
}
表示確認
見出しのテキスト

このように、装飾したい対象の要素を指定する部分を「セレクタ」、どのように装飾するか指定する命令文を「プロパティ」、そして各プロパティをどれくらい変化させるのか指定する部分を「値(Value)」と言います。

記述の基本的な形は、セレクタに指定するプロパティを {} で囲み、プロパティに指定する値を : から ; で囲みます。それをワンセットとして、場合によって一つのセレクタに複数のプロパティを組み合わせて装飾を仕上げていきます。

各プロパティに対する値の指定が終了したら、必ず「;(セミコロン)」で閉じるクセをつけて下さい。セミコロンの記述を忘れると、正しく表示されません。

CSSを書き込む場所と外部ファイルの読み込み

CSSを記述できる場所は全部で3ヵ所あります。HTMLのヘッダーに記述する方法、HTMLの要素に直接記述する方法、そして外部ファイルを読み込ませる方法です。それぞれ一長一短があるので、状況によって使い分けてください。

最も推奨するやり方は、CSS専用のファイルを作成してそこに内容を記述し、HTMLのヘッダーに<link>タグで読み込ませる方法です。この方法を用いると、サイトのデザインを一元管理できるので、更新や変更も楽にできます。CSSファイルは、普通のテキストファイルの拡張子を「.css」に変更するだけで作成することができます。

HTML
<head>
<link href="CSSのファイル名.css" rel="stylesheet" type="text/css" />
</head>

次の例は、HTMLの<head>~</head>の間にCSSを直接記述する方法です。<style>タグを用います。特定のページにのみ適応したいCSSがある場合などに使用するやり方です。

HTML
<head>
<style type="text/css">
<!--
body {
 background-color: #FFFFFF;
 color: #333333;
 font-size: 16px;
}
-->
</style>
</head> 

最後は、HTMLタグにstyle属性を付けて、直接CSSを書き込む場合の例です。特定の要素に対してのみ適応したいスタイルがある場合に使用します。

HTML
<h1 style="color: #FF0000; border-bottom: 1px solid #999999;">
見出しのテキスト
</h1>

<p style="color: #333333; font-size: 14px;">
段落テキスト段落テキスト段落テキスト段落テキスト
</p>

<p>
段落テキスト<span style="color: #0000FF; font-weight: bold;">段落テキスト</span>段落テキスト段落テキスト
</p>

CSSリファレンス

CSSって何? 初めての方はこちらからお読み下さい
CSSの書き方 CSSの書き方について基本的な解説です
CSSの特徴 CSSの特徴を理解して有効に活用しましょう
CSSで使えるセレクタ セレクタとはスタイルを適用する対象を指定するものです
CSSで使える単位 CSSで使える単位の一覧です
ブロックレベルとインライン ブロックレベル要素とインライン要素について詳しく解説
idとclassについて 要素にidとclassで名前を付ける
余白と外枠の関係 余白や外枠を指定する際のコツについて
DOCTYPE宣言・DOCTYPEスイッチ [!DOCTYPE]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます