作ってみよう

 Step.7 横罫線の表示・色指定

 横罫線の表示・色の設定

 先程保存したindx.htmlをnotepadで開いたら<body></body>の 間に以下のような文を入力します。
<html>
<head>
<title> My Web Sight </title>
</head>
<body>
ここから ↓
<p>指定なしだとこんな感じ</p>
<hr>
<p>線の太さを8ピクセルに指定しました</p>
<hr size="8">
<p>線の長さを50ピクセルに指定しました</p>
<hr width="50">
<p>線の長さを画面の横幅に対して50%に指定しました</p>
<hr width="50%">
<p>線の太さを8ピクセル、長さを画面の50%、そして左寄せに指定しました</p>
<he size="8" width="50%" align="left">
<p>影のない、一本線に指定しました</p>
<hr noshade>
<p>
色つきの罫線はInternet Explorerのみに対応しています罫線の色はアクア</p>
<hr color="aqua">
<p>
罫線の色は赤</p>
<hr color="red">

ここまで ↑
</body>

</html>
 
 タグの説明

 <hr>  で横罫線が画面の左右いっぱいに表示されます。

 <hr ○○>・・・・○○の中には 

 size    横罫線の太さ(ピクセル)

 width   長さ(ピクセル・又は%)

 align="left"・"senter"・"right"
       左・中央・右に寄せるか決めますがセンタリング
       はデフォルトされます。

 noshade 立体的ではない平面的な横罫線

 color   色つきの横罫線を表示します。
       色の指定には、色指定値・色名で書き込みます

 

 

 

 入力出来たら保存してindex.htmlを開いてみましょう。以下のように出来ていると思います。
指定なしだとこんな感じ

 

線の太さを8ピクセルに指定しました


 

線の長さを画面の横幅に対して50%に指定しました


 

線の太さを8ピクセル、長さを画面の50%、そして左寄せに指定しました


 

影のない、一本線に指定しました


色つきの罫線はInternet Explorerのみに対応しています罫線の色はアクア


罫線の色は赤


 

Home  Step.8