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