水平線を引く方法を理解するためのページ(タグ利用編)

 
     
     
  水平線を引く方法
このページでは『Webページを作成するにあたって水平線を引く方法を理解してもらうことを目的として作成しました。
ここでは水平線を引く方法について解説します。
 
1. 基本的には<hr>というタグを書くだけです。
2. <hr color="ここに色を 指定">と書くと、色を指定することができます。
3. <hr color="ここに色を記述" size="水平線の高さ(線の太さ)をピクセル単位で数値を指定">と書くと、色の指定 以外にも水平線の高さ(線の太さ)を指定することができます。
4. <hr color="red" size="4" width="ウィンドウに対する割合を%で指定">と書くと、色や線の高さの指定以外にウィンドウに対する水平線の幅を%で指定できます。
 
     
    <<解説>>  
    HTMLの基本構造は、次のようになっています(別ページで解説したものを再掲)。
 
  HTMLの基本構造について
  <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>ここにはページのタイトルを書きます</title>
</head>
<body>ここにはページの内容を書きます</body>
</html>

別ページで解説したHTMLのサンプルファイルを用いて、そこに水平線を引いてみましょう。
どのようにして幅が指定できるのかを理解するために、ここでは敢えて幅を80%にしてみました。
基本的な書式は以下の通りです。

  水平線を引くためのタグ
  <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>ここにはページのタイトルを書きます</title>
</head>
<body>
<hr color="色を指定" size="線の高さ(太さ)を指定" width="ウィンドウに対する線の幅を指定">
ここにはページの内容を書きます
</body>
</html
   
  以下はサンプルデータ(sample4_1.htm) に記述されたHTMLの内容です。
ブラウザで表示してみると、まだまだ、中途半端な内容ですが、一応、水平線が引けました。
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>ここにはページのタイトルを書きます</title>
</head>

<body>
<br>
<hr color="red" size="4" width="80%">
<br>
ここにはページの内容を書きます
</body>

</html>
 
   
  次に、width="80%"をwidth="100%"に変えてみましょう。

<hr color="red" size="4" width="100%">
   
  更に同じタグを書きます(コピー・アンド・ペーストでもよい)。

<hr color="red" size="4" width="100%">
<hr color="red" size="4" width="100%">
   
  この間に水平線を利用してタイトルの作成と書いて下さい。

<hr color="red" size="4" width="100%">
水平線を利用してタイトルの作成
<hr color="red" size="4" width="100%">
   
  結果的に、このようになりました(但し、赤色や強調は便宜上付けただけです)。
このサンプルデータは(sample4_2.htm)です。

先ほどと同様に、このファイルを表示してみると、sample4_1.htmよりは『水平線を用いて作成したタイトル』らしくなってきました。
今回は、これで終わりにしますが、中央揃えのタグ(正確には段落タグ:<p align="center"></p>)などを使えば、更にタイトルらしくなります。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>ここにはページのタイトルを書きます</title>
</head>

<body>
<br>
<hr color="red" size="4" width="100%">
水平線を利用してタイトルの作成
<hr color="red" size="4" width="100%">
<br>
ここにはページの内容を書きます
</body>

</html>

<<参考>>
1. 基本の記述形式は右の通り、<hr color="" size="" width="">
2. color="" の中には色を指定
3. size="" の中には線の高さ(太さ)を指定
4. width="" の中にはウィンドウに対する線の幅を指定
5. 色の指定にはいくつかの方法がある。
 
color="red" というような記述方法   色名で記述
color=red というような記述方法   色名で記述・ダブルコーテーションの省略
color="#RRGGBB" というような記述方法   カラーコードで記述

#(実際には半角)の次に赤色の度合(階調)を16進数で記述(RRの部分)・その次に中央部分には緑色の度合(階調)を16進数で記述(GGの部分)・最後に右側には青色の度合(階調)を16進数で記述(BBの部分)

(例)赤色は『#FF00000』で表記
 

   
  タグについて理解している生徒は、分からなくて『困っている友達』に教えてあげて下さい。
 
       
       
    課題16のページへ 課題36のページへ 課題40のページへ 最初のページへ