ホームページ制作＆SEO
外部のCSSが記述されたCSSファイルをページに読み込むことによっても、そのページに指定した効果が適用されます。
CSSの中でも一番利用するのが、この外部ファイルから読み込む方法になるので必ず覚えておいて下さい。
外部のCSSファイルを読み込む場合、まずそのCSSファイルを作るところから始まります。
CSSファイルを作成するのはメモ帳などでできます。
記述方法は、大体<head>内に記述する方法と大体同じですが、以下のような形になります。
1つの要素に複数の効果を適用したい場合は以下のようになります。
複数の要素にそれぞれ効果を適用したい場合は以下のようになります。
さらに、特定の要素内のさらに特定の要素に効果を適用させたい場合は以下のような形になります。
一通りCSSを記述したら、そのファイルをCSSファイルとして保存します。
メモ帳ならファイル名が『ファイル名.txt』になっているところを、『ファイル名.css』に変更するということです。
『名前をつけて保存』を選択し、『ファイルの種類』が『テキスト文書（*.txt）』になっているところを、『すべてのファイル』に変更し、あとは手で『ファイル名.css』と入力するればCSSファイルとして保存するこができます。
ここではCSSファイルに、『example.css』と名前をつけ、<p>タグとその中の<b>タグにCSSの効果を適用させてみます。
まず『example.css』の内容は以下のようになっています。
以下のHTMLはこのページのものですが、解りやすいよう、<HTML>タグから必要なもののみ抜粋して記述します。
| <html> <head> <link rel="stylesheet" href="example.css" type="text/css"> </head> <body> <p>この文字に<b>CSSをを適用</b>させています。</p> <br> <br> <p>この文字にもCSSを適用させています。</p> </body> </html> |
赤文字の部分が外部CSSファイルを読み込んでいる記述になります。
今はファイル名を『example』にしているので『example.css』となっていますが、ここは『任意のファイル名.css』になります。
上のタグを記述したものが以下のものになります。
|
この文字にCSSを適用させています。 この文字にもCSSを適用させています。 |
今記述したCSSは、<p>タグ内は『文字を緑色にする』と『文字の大きさを20pxにする』と指定し、さらに<p>タグ内の<b>タグに『文字を斜体にする』と指定しています。