※CSS初心者向けの内容ですので、それなりの方はすっ飛ばしてください！
最近CSSをはじめた方に、「CSSの記述場所って決まってるの？」
というような質問をされたので、CSSの記述場所の基本を確認しておきます。
CSSを記述する場所ってどこ？
CSSを記述する場所は、以下の3箇所になります。
- styleタグに記述
- インラインに記述
- 外部ファイルに記述 ※推奨
それでは順を追って、サンプルと共に確認していきましょう。
今回はこちらの「sample.html」を用意して見ていきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Sample</title> </head> <body> <h1>CSSってどこに記述すればいいの？</h1> <p>CSSの記述する場所は3箇所になります。</p> </body> </html> |
1.styleタグに記述
スタイルタグは、<head>～</head>の中に記述します。
例えば<h1>タグを青文字にしたい場合は、以下のようにCSSを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Sample</title> <style> h1 { color: blue; } </style> </head> <body> <h1>CSSってどこに記述すればいいの？</h1> <p>CSSの記述する場所は3箇所になります。</p> </body> </html> |
2.インラインに記述
インラインとは、それぞれのタグの属性としてスタイルを指定する方法になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Sample</title> <style> h1 { color: blue; } </style> </head> <body> <h1>CSSってどこに記述すればいいの？</h1> <p style="color: green;">CSSの記述する場所は3箇所になります。</p> </body> </html> |
3.外部ファイルに記述
HTMLにCSSスタイルを記述するのではなく、別のCSSファイルを用意してそこにスタイルを記述します。その上で、CSSファイルをHTMLに読み込むという方法になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <link rel=“stylesheet” href=“style.css”type="text/css"> <title>Sample</title> </head> <body> <h1>CSSってどこに記述すればいいの？</h1> <p>CSSの記述する場所は3箇所になります。</p> </body> </html> |
style.css
|
1 2 3 |
@charset "UTF-8"; h1 {color:blue;} p{color:green;} |
▼sample4.htmlにstyle.cssを読み込むための記述
<head>～</head>に以下の記述をします。
|
1 |
<link rel=“stylesheet” href=“style.css”type="text/css"> |
以上になります。CSSの基本中の基本の内容ですので再確認してみてください。