ここでは、IT系企業の新人エンジニア研修向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
1. なぜ、新人エンジニア研修でスタイルを学ぶのか、その理由
前回は、「段落と改行で見やすくする」方法を学びました。
今回は、文章に色などのスタイルを付けてさらに読みやすくする方法を学びましょう。
実は、当社の研修ではスタイルについてあまり詳しくは触れません。
なぜなら、それはデザイナーのお仕事だからです。
ロジックを作る皆さんのようなエンジニアとデザインを作るデザイナーは別の人であることが一般的です。
もちろん中には両方デキる人もいますが。。。
スタイルについてあまり詳しくは触れませんので予めご了承下さい。
詳しく学びたい方のためにCSS の第一歩という記事をご紹介しておきます。
2. スタイルを設定するstyleタグ
文字などのHTML要素を装飾するときにはstyleタグを使います。
スタイルを適用するには３つの方法があります。
- ヘッダのstyleタグ内に書く
- 個々のタグの style属性で指定する
- CSSファイルを別に作りheadタグ内でリンクを張る
情報の一元化の観点から本来は、３番目の方法が望ましいです。
しかし、この方法は既にご紹介しています。
また、当社の新人エンジニア研修ではより簡便な方法を使いたいため１、２の方法をご紹介します。
１．ヘッダのstyleタグ内にcssを書く
＜アウトプット＞
＜ソースコード＞
上記では「p要素」の文字を赤くするという処理を書いています。
pタグ内の“ひつまぶし”と“味噌カツ”の文字が赤くなります。
この時styleタグ内の“P”をセレクタというのでした。
２．個々のタグの style属性で指定する
＜アウトプット＞
＜ソースコード(抜粋)＞
“ひつまぶし”のpタグのstyle属性で指定しています。
したがって“ひつまぶし”だけが青文字になります。
方法１と方法２を混在させた場合は、方法２のスタイルが勝ちます。
優先順位はCSSの属性を適用する要素に近いものほど高くなる
と覚えましょう。
そうすれば、
- 個々のタグの style属性で指定する
- ヘッダのstyleタグ内に書く
- CSSファイルを別に作りheadタグ内でリンクを張る
の順でスタイルが適用されることが理解できるでしょう。
なお、CSSでどんな修飾ができるかについては、インターネットで各自調べてください。
以上、今回は「スタイル」タグについて学びました。
次回は、「スタイルを適用する対象をセレクタで広げる」方法を学んでいきましょう。
<まとめ：隣の人に正しく説明できたらチェックを付けましょう>
□CSSを使うには3つの方法があり優先度の高い順に以下の通りである
- 個々のタグの style属性で指定する
- ヘッダのstyleタグ内に書く
- CSSファイルを別に作りheadタグ内でリンクを張る