ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

5.スタイルを設定する

文字などのHTML要素を装飾するときには<style>を使います。

スタイルを適用するには3つの方法があります。

1.ヘッダの<style>内に書く

2.個々のタグの中に直接書く

3.CSSファイルを別に作り<head>内でリンクを張る

本来は、3の方法が望ましいです。その理由はCSSを使用するメリットを参照ください。

しかし、この方法は既にご紹介していますので、ここではより簡便な1、2の方法をご紹介します。

1.ヘッダの<style>内に書く

<アウトプットイメージ>

ブラウザで確認してみましょう

<ソースコード>

 上記では「p要素」の文字を赤くするという処理を書いています。

<p>内の“ひつまぶし”と“味噌カツ”の文字が赤くなります。

この時 <style>内の“P”をセレクタといいます。

セレクタの詳細についてはこちらのセレクタの種類を参照してください。

2.個々のタグの中に直接書く

<アウトプットイメージ>

ブラウザで確認してみましょう。

<ソースコード>

 

 

“ひつまぶし”の<p>の中に直接書いています。

したがって“ひつまぶし”だけが青文字になります。

方法1と方法2を混在させた場合は、方法2のスタイルが勝ちます。

タグにより近い方が強いと覚えましょう。

そうすれば、

2.個々のタグの中に直接書く

1.ヘッダの<style>内に書く

3.CSSファイルを別に作り<head>内でリンクを張る

の順でスタイルが適用されることが理解できるでしょう。

なお、CSSでどんな修飾ができるかについては、スタイルシートリファレンス(目的別)を参考にしてください。

 

以上、今回は「スタイル」タグについて学びました。

次回は、「スタイルを適用する対象をセレクタで広げる」方法を学んでいきましょう。