HTML 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

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system