こんにちは。
シーサイドレーベルweb担当の飯野です。
今回は「CSS（スタイルシート）の
使い方について」お話させて頂きます。
HTMLファイルにCSS（スタイルシート）を
反映させるには主に３つの方法があります。
————————————————————————
①外部CSSファイルを用意してHTMLファイルに読み込む
②head要素内にstyle要素を記述する
③要素にstyle属性を直接記述する
————————————————————————
では、順番に解説していきますね。
①外部CSSファイルを用意してHTMLファイルに読み込む
一般的に用いられている方法になります。
CSSファイルを用意してHTMLファイルに読み込ませます。
|
1 2 3 |
<head> <link rel="stylesheet" type="text/css" href="xxx.css"> </head> |
この様に、<head></head>の中に
外部CSSファイルの読み込み設定を指定します。
href=”xxx.css”
こちらの部分にスタイルシートのファイル名を記述します。
|
1 2 |
例） <link rel="stylesheet" type="text/css" href="css/style.css"> |
この場合は、cssフォルダの中にあるstyle.cssを
読み込むという設定をしていることになります。
②head要素内にstyle要素を記述する
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> <style type="text/css"> <!-- p {color:red; font-size:16px;} --> </style> </head> <body> <p>テキスト文章</p> </body> </html> |
htmlファイルのhead要素内に記述する方法です。
どうしてもそのページの要素を部分的に
適用させたい場合などに使う場合が多いかと思います。
③要素にstyle属性を直接記述する
|
1 2 3 4 5 6 7 8 |
<html> <head> <meta name="Content-Style-Type" content="text/css"> </head> <body> <p style="color:red; font-size:20px;">テキスト文章</p> </body> </html> |
要素に直接スタイルを適用させる場合に用いますが、
XHTML1.1のルールでは、style属性を直接記述する方法は
非推奨とされています。
②や③などの方法は、スタイルを部分的に優先指定するのに
便利だとは思いますが、メンテナンスなどを考えると、
HTMLファイルに直接書くよりも、CSSを外部ファイルとして
用意しておく方が効率が良いと思います。
HTMLファイルのページ数が少ないのであれば
そんなに大変ではないかもしれませんが、
ページ数が多くなると、HTMLファイルに直接指定していると
どんな指定をしたのか確認するだけで大変になる場合もあります。
外部ファイルに記述するようにしておけば
どんな指定設定を行っているのか
確認しやすいですからね。
CSS（スタイルシート）は外部ファイル化して
使うのが一般的な使い方というのを
頭に入れておいて頂ければと思います。
では、また来週お会いしましょう。
