今回は初心者向けにCSSの記述する場所について解説していきたいと思います。
CSSの記述する場所は主に3つの書き方があります。
1、head内に記述
2、body内に記述
3、外部スタイルシートに記述
それでは早速、はじめていきましょう(*゚▽゚)ノ
Menu
head内の記述方法
h1要素のフォントサイズを変更する場合
(例)
1 | <h1>Hello</h1> |
1 2 3 4 5 | <style type="text/css"> h1{ font-size: 50px; } </style> |
body内の記述方法(styleとspan)
●style属性
タグの中にstyle属性と値を記述
(例)
1 2 3 | <p style="color:red">赤文字</p> <p style="color:blue">青文字</p> <p style="color:green">緑文字</p> |
●spanタグ
部分的にスタイルを変更したい時
特徴としてはインライン要素(横方向)なので下記のように部分的に1行で使用したい場合に使用します。
(例)
1 2 3 4 | <p>本日の天気は <span style="color:red">晴れ</span>で明日は <span style="color:green">曇り</span>で明後日は <span style="color:blue">雨</span>です。</p> |
外部スタイルシート
●外部スタイルシートの作成
外部シートを作成する場合は拡張子をcssに変更して保存します。
1 | sample.css |
作成保存ができたら下記の1文を先頭に追加します。
1 | @charset "utf-8"; |
これで外部スタイルシートの出来上がりです。
●HTMLのheadタグ内の編集
headタグ内にsample.cssを読み込めるように下記1文を追加します。
href属性の値にダブルクオーテーションで囲ってあてげからパスを記述してあげることで外部cssのsample.cssが読み込めるようになります。
1 | <link rel="stylesheet" type="text/css" href="sample.css"> |
(例)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @charset "utf-8"; h1{ font-size: 50px; /*フォントサイズを50px*/ } p.red{ color: red; /*文字を赤*/ } p.blue{ color: blue; /*文字を青*/ } p.green{ color: green; /*文字を緑*/ } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="jn"> <head> <meta charset="UTF-8"> <title>外部CSSの使い方</title> <!-- headタグ内に記述する --> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <h1>Hello</h1> <p class="red">赤文字</p> <p class="blue">青文字</p> <p class="green">緑文字</p> </body> </html> |
まとめ
CSSの使い方を3つご紹介しましたが、最も使われてるのが外部CSSだと思います。
実際私も外部CSSを使用する機会が多いと思います。
ですのでまずは外部CSSから覚えていき、外部CSS以外の記述もサイトでよく見かけるので、この機会に3パターンの記述方法をすこしづつマスターしていきましょう(^-^)