ホームページ作成講座

ホームページ作成講座 vol.05 …実践:ここまでのまとめ


vol.04 までの事を理解すれば、基本的なHTML記述は出来るようになります。あとは自分の作りたいものに合わせてバリエーションを増やしていくだけ。ここでは、実際にソースを記述してみましょう。

ベース型の作成

まず、メモ帳やTextEdit、SimpleTextなどのテキストエディタでDOCTYPE、HTML、HEAD、BODYなどを入れただけで本文が空のベース型書類を作ります。この書類は使いまわせるので、このままコピーして使っても良いでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="キーワード">
<meta name="description" content="紹介文">
<title>タイトル</title>
</HEAD>

<BODY>
本文、A、IMGなどが入るメインの領域
</BODY>

</HTML>


上記の記述(またはコピー&ペースト)が終わったら、一度保存してみます。書類を保存する時は、拡張子.htmlをつけるようにして下さい。ここでは『base.html』という名前で保存しておきます。この時点でブラウザで見るとこんな感じ(sample1.html)になります。この書類を複製するか、別名で保存する事で複数作っておきましょう。次回以降、何を作る時もベースとして使い回しが出来ます。

本文の作成

ベース型が出来たら、タイトル、キーワード、紹介文を入れておき、次にBODYの中に記述していきます。

例えばタイトルは『○○の館』、キーワードは『○○』『■■』『○○■■』の3つ、紹介文は『○○が解きあかす■■の真実と舞台裏』、本文には『こちらは○○が作る■■についてのページです。今日はこのページを見てくれてありがとう!』と入れて、高さ100ピクセル×横幅300ピクセルの画像(ALTはトップイメージ)を表示して、下に『ギャラリー(gallery.html)』と『日記(diary.html)』へのリンクを入れるとします。それぞれに間隔を空けたいので、簡単にBRを2つ使ってしまいましょう。ついでにHEADにまず、外部スタイルシート(sample.css)を読み込む記述もしておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="○○,■■,○○■■">
<meta name="description" content="○○が解きあかす■■の真実と舞台裏">
<title>○○の館</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</HEAD>

<BODY>
こちらは○○が作る■■についてのページです。今日はこのページを見てくれてありがとう!

<br><br><img src="top.gif" height=100 width=300 ALT="トップイメージ">

<br><br><a href="gallery.html">ギャラリー</a> <a href="diary.html">日記</a>

</BODY>

</HTML>


これをブラウザで見るとこんな感じ(sample2.html)になります(画像は置いていないので表示されず、画像領域にALTで書いたコメントが見えるはずです)。少しはページらしくなりましたね。最後に、スタイルシートを用いて見栄えを良くしてみましょう。

スタイルシートの作成と適用

スタイルシートの書類は名前を『sample.css』にして、htmlと同じ階層(同じフォルダの中)に置いておきます。記述は以下のようにしてみましょう。

BODY { background-color : #FFFFCC; } /*全体の背景色:薄黄色*/
BODY { font-size: 12px; } /*全体の文字サイズ:12px*/
.style1 { font-size: 18px; } /*選択文字サイズ:18px*/
.style2 { color: #FF0000; } /*選択色:赤*/
.style3 { background-color : #FFE6E6; } /*選択背景色:薄ピンク*/


これで、特に指定しない限り背景色は薄黄色、文字サイズは12ピクセルが適用されます。文字にスタイルを適用していきます。本文の『○○が作る■■についてのページ』に18ピクセルの大きな文字(style1)、『ありがとう!』の部分に赤文字(style2)、リンク部分の背景に薄ピンク(style3)をそれぞれ適用してみましょう。また、見栄えで『今日は〜』の前にもBRを2つを入れます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="○○,■■,○○■■">
<meta name="description" content="○○が解きあかす■■の真実と舞台裏">
<title>○○の館</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</HEAD>

<BODY>
こちらは<span CLASS="style1">○○が作る■■についてのページ</span>です。

<br><br>今日はこのページを見てくれて<span CLASS="style2">ありがとう!</span>

<br><br><img src="top.gif" height=100 width=300 ALT="トップイメージ">

<br><br><span CLASS="style3"> <a href="gallery.html">ギャラリー</a> <a href="diary.html">日記</a></span>
</BODY>

</HTML>


これをブラウザで見るとこんな感じ(sample3.html)になります。デザイン的には酷いですが、効果はわかりますね。後は、自分でどんな文章を書くか、どんな画像を入れていくかを工夫して、好きなように作るだけです。vol.06のテーブルなどを使えば、ビジュアル的な構成もしやすくなります。

Webデザイン制作
SEO:検索エンジン最適化
ホームページ作成講座
日刊運勢メールマガジン
Playstation2ゲーム攻略