ここでは、IT系企業の新入社員向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
前回は、「段落と改行で見やすくする」方法を学びました。
今回は、文章に色などのスタイルを付けてさらに読みやすくする方法を学びましょう。
スタイルを設定する
文字などのHTML要素を装飾するときには<style>を使います。
スタイルを適用するには３つの方法があります。
１．ヘッダの<style>内に書く
２．個々のタグの中に直接書く
３．CSSファイルを別に作り<head>内でリンクを張る
情報の一元化の観点から本来は、３番目の方法が望ましいです。
しかし、この方法は既にご紹介していますので、ここではより簡便な１、２の方法をご紹介します。
１．ヘッダの<style>内に書く
＜アウトプット＞
＜ソースコード＞
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <meta charset="UTF-8"> <title>このタイトルはブラウザのタブに表示されます</title> <style> p { color: red; } </style> </head> <body> <p>ひつまぶし</p> <p>味噌カツ</p> </body> </html> |
上記では「p要素」の文字を赤くするという処理を書いています。
<p>内の“ひつまぶし”と“味噌カツ”の文字が赤くなります。
この時 <style>内の“P”をセレクタといいます。
２．個々のタグの中に直接書く
＜アウトプット＞
＜ソースコード＞
|
1 2 |
<p style="color:blue;">ひつまぶし</p> <p>味噌カツ</p> |
“ひつまぶし”の<p>の中に直接書いています。
したがって“ひつまぶし”だけが青文字になります。
方法１と方法２を混在させた場合は、方法２のスタイルが勝ちます。
優先順位はCSSプロパティを適用する要素に近いものほど高くなる
と覚えましょう。
そうすれば、
２．個々のタグの中に直接書く
１．ヘッダの<style>内に書く
３．CSSファイルを別に作り<head>内でリンクを張る
の順でスタイルが適用されることが理解できるでしょう。
なお、CSSでどんな修飾ができるかについては、インターネットで各自調べてください。
以上、今回は「スタイル」タグについて学びました。
次回は、「スタイルを適用する対象をセレクタで広げる」方法を学んでいきましょう。
【今回の復習Youtube】
