【HTML50分講座】HTMLのSTYLEタグによるスタイルシートを学ぶーChapter06

今回はHeadタグ内に追加するSTYLEタグを説明していきます。

前回の「Chapter05」の後、当講座に進んでください。

HTML文章の装飾をする＜STYLE＞タグ

styleタグ（style要素）は、HEADタグの中にCSS（スタイルシート）を記述するためのタグです。

記述例：

  1. <head>
  2. <title>タイトル部分です</tilte>
  3. <style type=”text/css”>
  4.     H2 { color: red }
  5. </style>
  6. </head>

スタイルシートを利用する場合は、CSS の外部ファイルを<link>で読み込む方法と、<head>タグ内に<style>タグを用いてスタイルシートを記述する方法と、各タグのstyle属性を使う方法があります。今回は、<head>タグ内に<style>タグを用いた方法を説明していきます。

HEADタグ内はWEB（ブラウザ）に表示されません。

STYLEタグ内でCSSの書き方

STYLEタグ内でCSS（スタイルシート）の書き方は、次のように決まっています。セレクタ・プロパティ・値の部分を埋め、「どこの（対象物）・何を・どんな見た目にするか」を指定します。

セレクタ {　プロパティ：値　}

記述例：H2 { color: red } では、H2のタグ内（=セレクタ）にある文字色（=プロパティ）を赤色（=値）にします。

セレクタ

セレクタには、デザインを適用したい”場所（対象物）“を指定します。対象物を指定する方法は、タグの以外にIDやCLASSなどがあります。

IDとCLASSは「特定のタグ（要素）にだけスタイルシートを適用したい時」に使用します。

IDの使い方

IDの使い方は、

  1. タグにID名を付けます。※<タグ名 ID=”ID名”>と書きます。
  2. CSS（スタイルシート）内には、プロパティを #（シャープ）+ id名 にします。

例えば、<p id=”p1″>P1タグです。</p>とした場合は、CSS（スタイルシート）は、#p1 { color: red; } と書きます。

同じid名は、1つのwebページに1つまでと決まっています。idはHTMLページ内に1つだけ
Classの使い方

Classの使い方は、

  1. タグにClass名を付けます。※<タグ名 Class=”Class名”>と書きます。
  2. CSS（スタイルシート）内には、プロパティを .（ドット）+ class名 にします。

例えば、<p class=”fontred”>P1タグです。</p>とした場合は、CSS（スタイルシート）は、.fontred { color: red; } と書きます。

プロパティ

プロパティには、セレクタで指定された対象物の”何を変更するのか”を決めます。例えば、Pタグ内の文字色を変える、Hタグの外枠に線を引く、DIVタグ内の余白調整などです。

値

値には、セレクタで指定された対象物のどこを”どんな見た目に変更するのか“を決めます。例えば、Pタグの文字色を赤色にする、Hタグの外枠の線を二重線にする、DIVタグの余白を5mmに設定するなどです。

Styleタグのtype属性（必須・省略可）

type属性を使って、スタイル言語を MIME タイプで指定します。CSS（スタイルシート）のMIMEタイプは、”text/css”になるので、”text/css”を指定します。

MIMEタイプとは、Media Typeを意味しており、メールやホームページのファイルに添付して送られる「このファイルは、こんな種類のファイルです」の情報になります。

CSSのコメントアウト

自分自身、若しくは他のプログラマーがCSS（スタイルシート）のソースコードを見た時、一目で理解できるようなコメントを入力していきます。

CSS（スタイルシート）でコメントアウトを記述する場合は、/*で始まり、*/で終わります。「/* */」とは、CSS（スタイルシート）の中にコメント（注釈）を記述するためのものです。※コメント文は、当然にCSSで処理されません。

記述例：/* これはコメント文です。*/

今日の問題

まず始めに、以下をメモ帳で記述し、Chapter06.htmlファイルとして保存してください。

  1. <html>
  2. <head>
  3. <meta charset=”UFT-8″>
  4. <title>ここページのタイトルです</title>
  5. <style>
  6.     body { background: black; }
  7.     h2 { color: yellow; }
  8. </style>
  9. <meta name=”description” content=”ページの要約文”>
  10. </head>
  11. <body>
  12. <section>
  13. <h2>styleタグの演習問題</h2>
  14. <hr width=”1000px” size=”10px”>
  15. <P>赤文字で表示してください。</P>
  16. <P>青文字で表示してください。</P>
  17. <P>赤文字で表示してください。</P>
  18. <P>青文字で表示してください。</P>
  19. </section>
  20. <bod>
  21. </html>
プロパティ=backgroundを使って、背景色を変更することができます。

問1

Chapter06.htmlを実行した結果、CSS（スタイルシート）の設定によって、どこがどのように見た目が変化したか答えてください。

/* */コメントアウトを使って、スタイルシートの変化を確認してみてください。

問2

Chapter06.html内のPタグの文字色全てを”白色”に変更してください。

問3

Chapter06.html内のPタグの文字サイズを30pxに変更してください。

問4

Chapter06.html内のHRタグの背景色を白に変更してください。

宿題

Chapter06.htmlのPタグに書かれている”赤文字で表示してください。”と”青文字で表示してください。”毎に文字の色を赤と青のぞれぞれに変更してください。

コメント