CSSの使い方1

本項ではCSSの使い方を説明していきましょう。ところで、前項のid,classについてはしっかり理解しましたか。本項ではその知識が必要になるので、読んでない方は前項をチェックしてくださいね。

CSSの書く場所

CSSの使い方は大きく分けて3つあります。1つ目はタグ内に直接書いて使う方法、2つ目はhead内で指定する方法、そして3つ目は外部ファイルから読み込む方法です。それぞれを上手に使い分けることで、見やすいレイアウトを作っていきましょう。

タグ内に直接書く

タグ内でスタイルシートを指定するにはstyle属性を使用します。主に、ページ内でピンポイントにそこだけ変えるって時に使います。ところでCSSのレイアウトには後から指定されたものが上書きされるという仕様があります。例えばhead内である属性を指定しても、タグ内で再び指定し直すと属性が上書きされます。上手く使えば有用な仕様ですが、逆に注意も必要です。

サンプルコード

<div><p style="color: #f00">
文章の<span style="color: #00f; background: #ff0">ここだけ</span>色を変えてみる。
</p></div>

実行結果


文章のここだけ色を変えてみる。

文章全体を赤色、その一部を文字色青色、背景黄色にしてみました。styleの中はCSS独自の記述方法になります。詳しいことは次項で紹介します

head内で指定する

タグ内で1つずつスタイルシートを指定するより、head内でページ全体を一括で指定した方が良い場合があります。その時はこの方法を使います。この方法ではhead内にstyleタグを配置して記述していきます。

サンプルコード

<head>
<style>
p {background: #ff0; /* 背景色 */
	padding: 30px} /* 余白 */
span#moji1 {color: #f00}; /* 文字色 */
p span.moji2 {color: #00f}; /* 文字色 */
</style>
</head>
<body>
<p>段落の中 <span id="moji1">文字1</span> <span class="moji2">文字2</span></p>
段落の外 <span class="moji2">文字2</span>
</body>

実行結果

段落の中 文字1 文字2
段落の外文字2

styleタグ内がCSSの記述です。p{}としたところでpタグへの指示をしています。span{}も同様です。ここでセレクタの概念が出てきますが単純です。#はid、.はclassを表していて、それが指定されているタグへ指示します。p span{}と言う書き方はpタグ内にあるspanタグを表しています。なので、pタグの外にあるspan class="moji2"は文字色が変わっていません。

外部ファイルから読み込む

最後に、外部ファイルからスタイルシートを読み込む方法を紹介します。この方法を使えば、複数のページのレイアウトを一括で変えられるようになります。方法はいたってシンプルです。必要なタグはlinkタグになります。

サンプルコード

<head>
<link rel="stylesheet" href="./maincss.css">
</head>

外部ファイルは事前に作っておきます。外部ファイルの内容はstyleタグ内で書く内容と全く変わりません。上記では拡張子cssのファイルから情報を取得しています。実験したところ、拡張子htmでも成功しました。（ただし、DOCTYPEではじかれる可能性がある。）