HTML文書にCSSでスタイルを指定するにはいくつかの方法があります。ここではまず、スタイルの指定方法について紹介します。
インラインスタイル
通常のWEB制作ではあまり使いませんが、インラインでのスタイルの指定は直感的だと思います。スタイルを当てたい要素にstyle属性を指定し、そこに見た目を変化させるCSSを記述していくことができます。
<p style="background-color: pink;">ここは背景色ピンクになる<p>style要素
.htmlファイルに<style>を記述し、その中にCSSを記述していく方法です。<style>は<head>の中に書きます。
<html>
<head>
...
<style>
p{
background-color: pink;
}
</style>
...
</head>
<body>
<p>ここは背景色ピンクになる</p>
</body>
</html>.cssファイルでのスタイリング
.htmlファイルとは別にスタイルを記述した.cssファイルを用意しそれを読み込む方法です。web制作ではこれが一般的なやり方です。
.htmlファイルに<link>を記述し、href属性に.cssファイルの相対パスを指定します。この<link>は、<head>要素内に記述します。
複数の.cssファイルを読み込みたいときは<link>を追加し、読み込みたい.cssファイルをそれぞれhref属性に追加します。
<html>
<head>
...
<link rel=”stylesheet” href="./css/style.css" >
...
</head>
<body>
<p>ここは背景色ピンクになる</p>
</body>
</html>p{
background-color: pink;
}CSSの書き方
先に挙げた、.cssファイル、及び<style>内でのCSSの書き方です。
[セレクタ] {
[プロパティ]: [値];
[プロパティ]: [値];
...
}のようなルールで書きます。
セレクタでスタイルを当てたい要素を指定し、{ }内にwidth、heightなどのプロパティと、そのプロパティに設定する値をセットで記述していきます。
プロパティの後ろには:(コロン)、値の後ろには;(セミコロン)を忘れず記述してください。
インラインスタイルではこの[プロパティ]: [値];を直接style属性に指定します。
また、.cssファイル内では、下記のように/*と*/で挟んだ部分をコメントとする事ができます。
/* ここがコメント */
p {
color: pink;
}実践してみる
.htmlファイルを保存しているフォルダと同じところに、任意の名前の.cssファイルを作ります。(ここではhome.htmlとstyle.cssという名前とします。)
まずはstyle.cssの先頭に、下記を記述します。
@charset "utf-8";この.cssファイルで使う文字コードを指定するおまじないです。
実際のスタイルはこの後に書いていきましょう。
@charset "utf-8";
p { color: pink;}p要素のcolorプロパティ(文字の色)をピンク色にするようにスタイルを指定しました。
次にhome.html側で<p>要素を追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>ピンク色になってる？</p> </body>
</html>保存したらhome.htmlをお使いのブラウザで開いてみてください。まだスタイルが反映されていないので標準の黒色の文字になっているかと思います。
次にhome.htmlファイル側でstyle.cssファイルで定義したスタイルを読み込めるようにしましょう。
home.htmlの<head>要素内に下記を追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css"> <title>Document</title>
</head>
<body>
<p>ピンク色になってる？</p>
</body>
</html>これで定義したスタイルの読み込みができました。
追加したら、home.htmlファイルをもう一度開いてみてください(もしくはF5で更新)。文字色が変わっているかな？？
まとめ
スタイルの適用方法について、3つの方法を紹介しましたが、外部ファイルの読み込み以外は通常は使わないと思います。制作の初期段階で、どのようなスタイルを当てれば思い通りの見た目になるか確認する為にインラインスタイルは使うかもしれません。(私の場合はChromeの検証ツールを開いて、直接インラインスタイルを当ててみて確認することはたまにあります。)
基本はソースコードの見通しがよく、保守性がいいので、別ファイルに記述して読み込むやり方がいいでしょう。
次の記事
