スタイルシートの基本

スタイルシートの基本書式はこのような書き方をします。

Selectorに対して、Property value:値を定義づけます。

プロパティ：値をDeclarationと呼び、間に：コロンを置きます。

宣言は；セミコロンで区切ることで複数定義することができます。

空白・タブは無視されるので、エディタで好きなようにレイアウトすることが可能です。

CSS を使う方法

1. @import で CSS が書かれているファイルを読み込む
2. link 要素で CSS が書かれているファイルを読み込む
3. style 要素に直接書く
4. 要素に style 属性を使って直接書く

この4つの方法で CSS を使うことが出来ますが、3番目と4番目の方法は、HTML 文書の中に直接書くために CSS の要素のスタイルをまとめて指定できる利点がなくなってしまいます。

そればかりかHTMLファイルのソースが煩雑になるだけです。

link 要素を使う方法と @import を使う方法は、両方とも CSS が書かれているファイルを外部ファイルとして読み込むのですが、@import の方は古いブラウザが対応していない場合があります。

古いタイプのブラウザはスタイルシートの対応が中途半端なので、あまり複雑なスタイルシートを使いたくありません。

その様なブラウザのための指定は@importで指定するのも良いかもしれません。

まず、@importの使い方ですが、次の例を見てください。

head 要素の中に書くことで、CSS が読み込まれ、HTML 文書に適応されます。

style
要素の type 属性で指定している "text/css" は、CSS を表しています。

@import のurl で、CSS が書いてあるファイルを相対 URL か絶対 URL を使って指定します。

ink 要素を使った場合は次のようになります。

link 要素も head 要素の中に書きます。

rel でスタイルシートにリンクすることを指定し、type でスタイルシートは CSS だと指定しています。

href 属性にはファイルの URLを指定します。

@import は、ink 要素などで読み込む CSS の書かれたファイルにも書くことができます。

この場合は、ファイルの先頭に書かなければいけません。

古いブラウザで使う CSS を分ける場合には、まず、全体に使う CSS のファイルの先頭で @import を使い古いブラウザで問題のある部分を読み込むようにしておきます。

それをink 要素で HTML 文書から読み込むことで、分けることができるはずです。

スタイルの指定の仕方

CSS でスタイルを指定する方法は簡単です。

CSS での書き方の基本は、スタイルを指定する要素を選び、文字のサイズ、色、表示の位置などの設定項目を決めて、値を設定するという形になっています。

スタイルを指定する要素を選ぶ部分をセレクタ、設定項目をプロパティと呼びます。

実際には セレクタ { プロパティ : 値; } のように書きます。

セレクタで body を選択し、プロパティで設定項目を文字のサイズに決めて、10emという値を指定しています。

これで、body 要素とその中にある全ての要素 の文字の大きさを、使われているフォントサイズの10倍にするという意味になります。

body 要素だけでなく、その中の要素まで含むのは、CSSには「継承の仕組み」があるためです。

div 要素と span 要素

CSS では、要素に対してスタイルを指定します。

ここで問題になるのは、要素以外の部分にスタイルを指定したい場合です。

例えば、ヘッダーとかメニュー・フッターがあって、その部分を別なスタイルを指定したい場合、メニューを表している要素はないので、CSS でスタイルを指定することが出来ません。

そこで使われるのがdiv 要素とspan 要素です。

これらの要素には特別な意味が無いのですが、その部分がまとまって何かを表していることを示すことが出来ます。

div 要は、大きな範囲で他の要素をまとめるの（ブロック要素）に使い、span 要素は、文章の一部（インライン要素）などをまとめる時に使います。

メニューの場合、メニューの部分をdiv 要素を使ってまとめておけば、メニューの部分にスタイルを指定できるようになります。

class 属性と id 属性

CSS で h1 要素のスタイルを指定すると、HTML 文書中の全ての h1 要素のスタイルが変わります。

便利なのですが、このままでは一部の h1 要素だけのスタイルを変えるということが出来ません。

対象となる要素を区別するのにはclass 属性とid 属性を使います。

例えば、ヒントとして書いている段落があり、そこを区別したい時には、次のようにします。

この p 要素が注意 (hint) という意味を持っていることをclass 属性で表しています。

この注意の意味を持つ p 要素だけ CSS で指定する場合は、次のようになります。

このように要素名の後ろにドット (.) を使って、class 属性の値を書くことで指定できます。

id 属性も同じような使い方をしますが、こちらは区別したい要素が1ページに1つだけの場合に使います。

id 属性の場合は、CSS での指定にはシャープ (#) を使い、次のように書きます。

このように、div 要素、span 要素、class 属性、id 属性を組み合わせると、自由にスタイルを指定できます。

CSS でスタイルを指定する場合に、よく使われるので覚えてお きましょう。

タグに直接指定する

タグへスタイルを直接して利する場合は、style="スタイル要素"のように記述します。

<pstyle="font-size: 12pt; color: blue">簡単なスタイルシートのテストです。

</p>

↓

簡単なスタイルシートのテストです。

HTML文書へのスタイルシートの設定

HTML文書へのスタイルシートの設定方法を、下記の例で説明します。

HTMLファイルの中にスタイルシート（CSS）のための領域を作り、そこで書式を定義することができます。

例:

基準となるスタイルシートの宣言

まず、HTML文書で使用するスタイルシートがどんなものであるかを宣言します。

宣言はMETA TAGの内容としておこない、次の一文をHEAD TGAに書いておきます。

CSSでは、スタイルシートのMIMEタイプ（"text/css"）を定義しておくことを推奨していますので、この1行は必ず入れておきましょう。

外部スタイルシートへのLINK

HTMLファイルとは別のファイル拡張子.cssでスタイルを定義しておく事で、LINK TAGで呼びだして設定できます。

ＨＴＭＬのＨＥＡＤの中で、以下のタグを書き込みます。

スタイル定義をHTMLファイルと分けておくことで、同じスタイル定義を複数のHTMLファイルで共有することができます。

外部ファイルのquot;style.css"の内容は次のような書き方になります。

定義ファイル (xxxx.css)の記述例

別個のスタイルシート（CSS）・ファイルを作り、HTMLファイルの書式設定を1箇所でまとめて行う

プロジェクトの全てのHTMLファイルのために書式を統一したいというケースが多いです。

このような場合1つ1つのファイルに毎回スタイルシートの入力を繰り返す必要はありません。

その代わりにこの書式を別個にテキストファイルを定義し、そのファイルを好きなHTMLファイルと結びつければいいのです。

この別個のファイルの入力を変更すると、このスタイルシートを指定した全てのファイルが一斉に変更されます。

例:

HTMLの要素の中で書式設定を定義する

書式設定を1箇所でまとめて行うか別個のスタイルシート（CSS）・ファイルを作ってそれを指定するかに関係なく、HTMLの要素を個別に書式設定することができます。

例:

上へグループ化（スタイルシートの書き方の応用です。）

CSS入門

広告