超初心者応援講座無料テンプレート解説付簡単HP作成画像貼り付けタグテーブルタグHTML小技集サイトマップHOME

HTML/超初心者応援講座>区切り線の設定

カラーサンプル  ┃METAタグを自動作成  ┃タグお試し  ┃主要タグ一覧
区切り線の表示
◆ホームページに、区切り線を表示するには <hr> を利用します。
<hr>を利用すると太さ2pixelの立体的な区切り線がブラウザのウインドウ幅に、合わせた長さで引かれます

サーバーへアップロードしてブラウザで見ると下記のようになります。





<html>
<head>
<title>ホームページタイトル</title>
</head>

<body>

<h1>さくらのホームページ</h1>
<hr>
文字

</body>
</html>

さくらのホームページ


文字
◆普通の区切り線  <hr>

◆影無し区切り線のタグは <hr noshade="noshade">  ↓↓こんな感じで表示されます↓↓

◆区切り線のサイズ変更と色、長さのタグ
[ 例 ]
<hr size="1" color="#ffc8c8" width="20%">
<hr size="2" color="#ffc4c4" width="40%">
<hr size="3" color="#ffaaaa" width="60%">
<hr width="80%" size="4" color="#00b7b7">

<hr width="100%" size="5" color="#ff6666"">

☆★ width="長さ" size="太さ" color="色" ☆★
スタイルシートの区切り線

◆区切り線を破線にする (dashed)
<hr style="border-top: 2px dashed #ff9d9d;width: 100%;">
◆点線にする (dotted)
<hr style="border-top: 2px dotted #ff9d9d;width: 100%;">
◆二重線にする (double)
<hr style="border-top: 4px double #ff9d9d;width: 100%;height:3;">
凸 outset
<hr style="border-top:4px outset #80ff00;width: 100%;height:5;">
凹 inset
<hr style="border-top:20px inset #c0c0c0;width: 100%;height:10;">

Googleサイトマップ送信方法無料ゲーム集お勧めブログ無料HPレンタル集フリーソフト集無料掲示板集星への手紙

SakuraRoom「超初心者の簡単HP作成」