罫線（平行線）を引く： STEP3 【 HTMLファイルにHTMLタグを入力しよう】

ホームページ作成の基礎から、HTMLタグやスタイルシート、JavaScriptを使ったHP作成方法、アクセスアップの秘訣を紹介。

ホームページ入門

初めてのホームページ

作成に必要なもの

レンタルサーバ選び

HPを作ってみよう

拡張子の表示

フォルダ、ファイル作成

HTMLタグの入力

HTMLタグについて

基礎部分の入力

タイトルの入力

背景の設定方法

文字の入力

改行をする

平行線を引く

中央揃えの方法

画像を張る

サイト内リンク

他サイトへのリンク

FTPの使い方

完成までの流れ

気をつけたいこと

　罫線（平行線）を引く

罫線（平行線）とは

ホームページで使われる罫線（平行線）とは、文章や項目を区切るために使われる横線のことを指します。ホームページでは主に、段落や項目を区切る場合やデザインとして利用することが多く、ほとんどのサイトで使用されています。

上の絵が実際に表示させた罫線です。これだけですとあんまり見栄えがよくありませんが、この罫線の上下に文字を書いたり、罫線自体の長さや色を変更することで、見た目が良いホームページが出来上がっていきます。

罫線（平行線）を引いてみよう！

それでは罫線（平行線）を実際に入力して、ホームページに表示させてみましょう。

～（上略）～
<body bgcolor="#fffeee">
体験ホームページ
<br>
<br>
<hr>
<br>
<b>体験ホームページへようこそ</b>
</body>
</html>

上の赤い部分が罫線を引くためのタグになります。それでは、上と同じ部分に「<hr>」タグを入力し、更新してみてください。

上のように、文字と文字の間に罫線が引かれましたでしょうか？ Webブラウザの横を広げている方はわかるでしょうが、このままだとWebブラウザの横の幅に合わせて広がってしまいます。そこで応用として、長さの指定や色を変更してみましょう。

応用編：罫線のサイズ（長さ） + 色を指定する

それでは罫線の長さ及び、罫線の色の変更をしてみましょう。
罫線の長さや色の変更をするには、「文字の入力」でも使用した、「属性タグ」で指定します。それでは下記をご覧ください。

～（上略）～
<body bgcolor="#fffeee">
体験ホームページ
<br>
<br>
<hr width="*" color="*">
<br>
<b>体験ホームページへようこそ</b>
</body>
</html>

HTMLタグ【罫線（平行線）】

上の赤い部分が長さ「width="*"」及び、色「color="*"」を変更するタグです。色については、文字の部分で一度入力してますし、そんなに難しくはありませんよね？
そして長さは「width="*"」で指定します。この属性タグは色々な部分で使われると思いますので、覚えておきましょう。それでは入力をしてみましょう。
次の構成を考えて、長さを「300」、色はお好きな色に変更してみてください。
（色についてはサンプル通りにする場合には練習後、消してください。）

上の絵は、長さを「300」色を「緑(#008000)」に指定した際の状態です。
あれ？っと思った方もいらっしゃると思いますが、そうなんです。罫線は長さを指定すると自動的にWebブラウザの中央に配置されてしまいます。これでは見栄えが良くなる所か、逆に変になってしまいましたよね。
そこで次の「センタリング（中央揃え）の方法」に進みましょう。

ページの上へ

前のページ

トップページ

センタリング（中央揃え）の方法

Copyright (C) 2007 ホームページ作成講座 All Rights Reserved.