TAG index
ホームページ作成ガイド

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / ページの内容をアレンジしてみる
ページの内容をアレンジしてみる


「ページを作成してみる」で作成したページ(index.html)を、少しアレンジしてみます。

背景色、センタリング、見出し、段落、改行などの指定を行い、ホームページらしく整えてみましょう。

今回使用するソフトは、メモ帳とブラウザ(インターネットエクスプローラ)だけです。

※Windows98の環境で説明しますので、ご自分の環境に読み替えてご覧ください。


 背景色を指定する
まずはページの背景色を指定してみましょう。
とりあえずここでは、背景色を「lightgreen(#90EE90)」に指定することで説明していきます。

「メモ帳」を立ち上げて、index.html を開いてください。

※「メモ帳」のメニューで「ファイル」→「開く」をクリックします。表示されたダイアログボックス内で、「ファイルの種類」を「すべてのファイル」に変更 → index.html を選択 → 「開く」をクリックして開いてください。

ソースを見ると、

<BODY>

この1行が確認できると思います。ページの背景色は、このタグに対して次のように指定します。

<BODY BGCOLOR="#90EE90">

上記の例ではカラーコードで指定していますが、次のようにカラーネームで指定することもできます。

<BODY BGCOLOR="lightgreen">

※色の指定方法については「カラーチャート」を、カラーコードとカラーネームの一覧は「カラーネーム一覧」をご覧ください。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>マイホームページ</TITLE>
</HEAD>
<BODY BGCOLOR="#90EE90">

私のホームページへようこそ!

</BODY>
</HTML>

上記のように記述したら、このファイルを上書き保存した上で、ブラウザで表示確認を行ってください。

背景色が変わっていたら、この作業は完了です。

※背景色についての詳細は、「ページの背景色とテキスト色を指定する」をご覧ください。
※背景色は、スタイルシートで指定することもできます。詳しくは、スタイルシートの「ページの背景に色を付ける」をご覧ください。


 センタリングを指定する
次に、ページの内容を中央に配置してみましょう。

センタリングにはいくつかの指定方法がありますが、ここでは一番簡単なCENTERタグを使った方法で説明します。

下記のように、中央に配置したい内容を <CENTER></CENTER> で囲みます。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>マイホームページ</TITLE>
</HEAD>
<BODY BGCOLOR="#90EE90">

<CENTER>

私のホームページへようこそ!

</CENTER>

</BODY>
</HTML>

上記のように記述したら、このファイルを上書き保存した上で、ブラウザで表示確認を行ってください。

「私のホームページへようこそ!」が中央に表示されていたら、この作業は完了です。

CENTERタグについての詳細は、「中央に配置する」をご覧ください。


 見出しを指定する
次に、「私のホームページへようこそ!」という文字を、見出しに指定してみましょう。

見出しに指定した文字は太く強調され、大きいサイズで表示されます。

下記のように、見出しに指定する文字を <H1></H1> で囲みます。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>マイホームページ</TITLE>
</HEAD>
<BODY BGCOLOR="#90EE90">

<CENTER>

<H1>私のホームページへようこそ!</H1>

</CENTER>

</BODY>
</HTML>

上記のように記述したら、このファイルを上書き保存した上で、ブラウザで表示確認を行ってください。

「私のホームページへようこそ!」が太く、大きく表示されていたら、この作業は完了です。(見出しの前後には自動的に改行が入ります)

Hタグについての詳細は、「見出し文字を指定する」をご覧ください。


 段落と改行を指定する
最後に、段落と改行を指定してみましょう。

段落を指定する場合は、内容を <P></P> で囲みます。
改行を入れたい部分には、 <BR> を指定します。

それぞれ下記のように指定します。適当な文章を書いて練習してみてください。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>マイホームページ</TITLE>
</HEAD>
<BODY BGCOLOR="#90EE90">

<CENTER>

<H1>私のホームページへようこそ!</H1>

<P>
ここは私のホームページです。<BR>
ご訪問ありがとうございました!
</P>

<P>
まだコンテンツはそろってないですけど、<BR>
がんばって充実させていく予定です。<BR>
またお越しくださいね。
</P>


</CENTER>

</BODY>
</HTML>

上記のように記述したら、このファイルを上書き保存した上で、ブラウザで表示確認を行ってください。

段落や改行が正常に反映されていたら、この作業は完了です。

Pタグについての詳細は「段落を指定する」を、BRタグについての詳細は「改行する」をご覧ください。

少しホームページらしくなってきましたね!


ホームページ作成ガイドTOP


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲