今回は文章の本文を記述する＜BODY＞タグ内からHR・Bタグとスタイル属性を説明していきます。
前回の「Chapter03」の後、当講座に進んでください。
HTML文章の本文を記述する＜BODY＞タグ
BODYタグとは、HTML文章の本文を表すタグになります。
HRタグ
HRタグとは、horizontal rule（水平方向の罫線）の略語で、水平の横線を引くためのタグになります。
記述例：<hr width=”横の長さ” size=”線の太さ” align=”位置”>
width属性（任意）
width属性を使って、線の長さを指定します。
size属性（任意）
size属性を使って、線の太さを指定します。
align属性（任意）
align属性を使って、線の位置を指定します。指定する位置は、center（中央）・left（左）・right（右）になります。
Bタグ
Bタグとは、太字(Bold)の略語で、文字を太くしたい時に使うタグになります。
記述例：<b>ここは太字です</b>
ちなみに、Bタグとよく似たSTRONGタグなるものがあります、STRONGタグは、”文字の強調”になります。見た感じの違いはまったくありませんが、意味的にはSEQ対策上に違いがあります。
style属性を使って、文字色を変える
HTMLに直接CSS（スタイルシート）を指定し、文字色を変更していきます。今回はPタグのstyle属性を使っていきます。
記述例：<p style=”color:red;”>赤文字です</p>
style属性を記述する場合は、”プロパティ” ＋ ”：（コロン）” ＋ “値” + “；（セミコロン)”になります。最初の：（コロン）は省略できませんが、最後の；（セミコロン）は「区切り」になるため、１つの場合は省略することができます。
その他、style属性を使った文字装飾の例をご紹介します。
- 文字を太文字にする場合は、font–weight: bold; を使います。
- 文字を大きさを変更する場合は、font-size: 14px; を使います。
複数のプロパティを指定する例をご紹介します。
記述例：<p style=”color: red;font-weight: bold;”>太文字で赤文字です</font>
ピクセルとは
width属性の横幅やフォントサイズなどは、ピクセル単位で表した数値を使うことができます。
液晶モニタは、小さな点の集合で表示されていることをご存じでしょうか。その小さな点こそがピクセルになります。点が10コあれば10px、点が50コあれば50pxとなります。当然、ピクセルはモニタの解像度に依存するので、cmといった絶対値とは異なります。
例えば、HDであれば1280×720、フルHDは1920×1080、4Kは3840×2160となります。この点の密度を「解像度」といい、簡単に言うと、点が密集すればするほど、綺麗な映像が映し出されるということです。
今日の問題
まず始めに、以下をメモ帳で記述し、Chapter04.htmlファイルとして保存してください。また、sample.gifをChapter04.htmlと同フォルダ内に用意してください。
- <html>
- <head>
- <meta charset=”UFT-8″>
- <title>ここページのタイトルです</title>
- <meta name=”description” content=”ページの要約文”>
- </head>
- <body>
- <section>
- <h2>HRとFONTタグの勉強</h2>
- <hr>
- <img src=”sample” alt=”ヤシの木”>
- <P>おはようございます。</P>
- <P>こんにちは。</P>
- <P>おやすみなさい。</P>
- </section>
- </body>
- </html>
※実行後、正しく動いていることを確認してください。正しく動かない場合は、正しく動作するようにソースコード修正してください。
問1
Chapter04.html内の10行目にあるHRタグの太さを10pxに変更し、中央寄せにしてください。
問2
Chapter04.html内の”おはようございます。”を太文字に変えてください。
問3
Chapter04.html内の”おはようございます。”のフォントサイズを28pxに変えてください。
問4
Chapter04.html内の”おはようございます。”を赤文字に変えてください。
宿題
“こんにちは”を黄色文字、”こんばんは”を青文字に変えてください。
コメント