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

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

4.スタイルを設定する

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

本来は、CSSファイルを別ファイルにしてそれをHTMLで読み込むことをするのですが、

ここでは、簡便に<style>タグを直接HTMLに書く方法を紹介します。

方法1

ヘッダに<style></style>で書く方法

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

“ひつまぶし”と“味噌カツ”両方の文字が赤くなります。

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

 

方法2

タグの中に直接書く方法

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

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

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

 

 

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

より近い方が強いと覚えると、CSSを別ファイルにしたときにも考えを敷衍できます。

 

装飾のより詳しい内容についてはCSS編で解説しますね。

 

今回は「スタイル」タグについてやっていきました。

次回は、「リスト」について学んでいきましょう。