ホームページ作成いまさらHTML,CSS講座

[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさらHTML,CSS講座トップ > 初心者講座 > トップページ作成

■　トップページ作成

ホームページ作成 Basic Lesson お疲れ様でした。
本稿では、皆様が学ばれた、ホームページ作成の知識の復習を兼ねて、トップページを作成します。

ページで使用する画像 ( タイトル画像は、index.htm と同じフォルダ、その他は、back フォルダに格納されています。 )

←白、10px × 10px のスペース用画像。白画像なので、ボーダーを表示しています。

メインカラムで使用している背景色は、16進数で表記すると、#f5f5dc カラーネームですと、beige です。

⇒ 完成したトップページはこちら

■ フォルダの作成 ⇒ インデックス、スタイルシートファイルの作成。
■ 大まかなレイアウトをイメージする。
■ インデックスファイルに基本構造とタイトルを記述する。
■ スタイルシートにページ全体の指定、レイアウトを記述する。
■ インデックスファイルにレイアウトを適用する記述をする。
■ タイトルカラムの内容を作成。
■ 上ラインカラムの内容を作成。
■ メインカラムの内容を作成。
■ スペースカラムの内容を作成
■ メニューカラムの内容を作成
■ フッターカラムの内容を作成。

■ フォルダの作成 ⇒ インデックス、スタイルシートファイルの作成

パソコンの中の適当な場所に、ホームページのファイルを格納するフォルダを任意の名前をつけ作成します。今回は、デスクトップ上に、HOME と名前をつけフォルダを作成しました。

HOME フォルダに、トップページとなるインデックスファイルとスタイルシートファイルを作成します。

インデックスファイルのファイル名は、index 、拡張子は、htm、html どちらでも構いませんが、ホームページを公開するサーバによって指定がある場合がありますので、サーバのヘルプ等で確認して下さい。

スタイルシートファイルのファイル名は半角英数文字で、任意の名前、拡張子を css で保存します。

■ 大まかなレイアウトをイメージ。

大まかなレイアウトをイメージします。私の場合、例えば、タイトル、メインとなる内容、メニューなど、各項目をそれぞれブロックに分け、ひとつのページに組み合わせたものをイメージします。

頭の中でイメージしにくい方は、実際に、紙に書いても良いと思います。

⇒ こんな感じでイメージ ( イメージを分りやすくする為に、各ブロックを色分けしています。 )

ページトップへ

■ インデックスファイルに基本構造とタイトルを記述する。

Basic Lesson1 基本構造で学んだ基本構造を、インデックスファイルに記述し、ホームページのタイトルと先に作成したスタイルシートファイルへのリンクも記述します。タイトルには、サイト名の他、キーワードとなる単語を含ませると良いでしょう。

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>ホームページ作成に便利なサイトのリンク集 Let's Make the Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>

この段階では記述していませんが、
<meta name="description" content=""> の content="" に、サイトの紹介文
<meta name="keywords" content=""> の content=""　には半角英数カンマ ( , ) で区切り、ホームページを検索してもらう為のキーワードを記述します。

ページトップへ

■ スタイルシートにページ全体の指定、レイアウトを記述。

⇒ 記述したスタイルシート
※テキストファイルに記述してあります。コピペで使用する場合は、 のコメントアウトは消して使用して下さい。

本来、固定幅は、訪問者ブラウジング環境によっては、横スクロールバーが表示される事があり、利用性 ( ユーザビリティ )上、好ましくありませんので、なるべく使わないサイト作りを心がけるべきなのですが、CSSでレイアウトを組む上で横幅を指定しないとカラム落ちの原因のひとつになります。

ページトップへ

■ インデックスファイルにレイアウトを適用する記述をする。

⇒ インデックスファイルの記述 ( index.htm )

で、コメントアウトや、テキストエディタを使用している方で、Tabキーが使える場合、適当にスペースを空けて記述すると、更新時にソースが見やすくなります。

ページトップへ

■ タイトルカラムの内容を作成。

index.htm

<div class="header_a">

<img src="title.png" alt="ホームページ作成に便利なサイトのリンク集 Let's Make the Homepage タイトル画像" width="250" height="40">
<h1>ホームページ作成お役立ちリンク集</h1>
</div>

style.css

h1 { font-size: 12px; margin: 0px 0px 0px 5px; text-align:left; }

サイトのタイトルにキーワードが含まれない場合で、サイト名に画像を使用する場合、必ず、img 要素の alt 属性に、キーワードを含ませた値を記述します。

また、上記のサンプルサイトのようにキーワードを含むテキストを、h1 タグで囲うと良いでしょう。

h1 要素は、ご存知の通り、サーチエンジンが重要視する要素のひとつです。しかしながら、デフォルトの h1 要素は、視覚的に、お世辞にも使いやすい要素とは言えませんので、スタイルシートで、表示を調節します。

h1 要素のスタイルシートでの調節は、経験上、極端に小さな文字にしたり、背景色と同じ色を指定したり、また乱用しなければ、検索エンジンからペナルティを受ける事は無いと思います。

ページトップへ

■ 上ラインカラムの内容を作成。

タイトル右側のカラムの内容は後からでも作成できますので、先に上部のラインカラムの内容を作成します。

index.htm

<div class="header_b">
</div>


<div class="line">
<table width="100%">
　　<tr><td class="menu">新規登録申請｜登録内容変更｜サイトマップ </td></tr>
</table>
</div>

style.css

td { font-size: 12px; }
.menu { padding-top: 3px; text-align: right; color: #ffffff; }

サンプル用に作成したページには、リンクを一切貼っていませんので、リンクを貼った場合、ページ全体指定で指定しているリンク色が適用されます。

この場合、<a href="insistence.htm" style="color:#ffffff">テキスト</a> のように、a 要素に color 属性で色を指定するか、テキストに直接 font要素 ( 非推奨要素 ) で、色を指定する必要があります。

ページトップへ

■ メインカラムの内容を作成。

カラム全体のテキストや画像の配置の指定は、style.css で指定し、細かい修正を、index.htm で行います。また、繰り返し使うスタイルシートや、記述が長くなった場合は style.css に指定を追加します。

index.htm

⇒ ソースはこちら

style.css

.sub_title { font-size: 14px; text-align: left; font-weight: bold; }

ページトップへ

■ スペースカラムの内容を作成。

index.htm に、スペース用のカラムを記述 ( 今回は div 要素 ) しても、空の div 要素 ( 内容を持たない ) では、一部ブラウザで、指定が反映されませんので、そのブラウザ用の対策です。

index.htm

<div class="box_ab">

<img src="back/space.png" alt="" width="10" height="10">
</div>

ページトップへ

■ メニューカラムの内容を作成。

テーブルの背景画像で、丸みを帯びたボックスメニューを表示します。後半のリストは特に意味はありません。リストを使って、メニューを表示する事もできます程度に記憶しておいて下さい。

index.htm

<div class="box_b">

<table width="100%" cellpadding="0" cellspacing="0">
　　<tr><td class="position_a" height="20">
　　　　　　<strong><font color="#ffffff">リンク集メニュー</font></strong></td></tr>
　　<tr><td class="position_b">新規登録申請</td></tr>
　　<tr><td class="position_b">登録内容変更</td></tr>
　　<tr><td class="position_b">新着サイト</td></tr>
　　<tr><td class="position_b">人気サイト</td></tr>
　　<tr><td class="position_b">相互リンクサイト</td></tr>
　　<tr><td class="position_b">カテゴリマップ</td></tr>
　　<tr><td class="position_c" width="100%"></td></tr>
</table>
<br>

<table width="100%" cellpadding="0" cellspacing="0">
　　<tr><td class="position_a" height="20">
　　　　　　<strong><font color="#ffffff">お勧めリンク</font></strong></td></tr>
　　<tr><td class="position_b">有限会社 TWINKLE</td></tr>
　　<tr><td class="position_b">株式会社中部水研</td></tr>
　　<tr><td class="position_b">ダイキン株式会社</td></tr>
　　<tr><td class="position_b">いまさらHTML,CSS講座</td></tr>
　　<tr><td class="position_c" width="100%"></td></tr>
</table>
<br>
<ul type="square">
　　<li>リンクについて</li>
　　<li>免責事項</li>
　　<li>連絡先</li>
</ul>
</div>

style.css

.position_a { background: url(back/short.png); padding-left: 10px; padding-top: 3px; }
.position_b { background: url(back/short_middle.png); padding: 5px 0px 5px 10px; }
.position_c { background: url(back/short_bottom.png); height: 12; }
ul { margin-left :20; line-height: 1.5; }

ページトップへ

■ フッターカラムの内容を作成。

ページ下部のライン ( #464646 ) と、著作権を表示します。

index.htm

<div id="footer">
<table width="100%">
　　<tr><td height="3"></td></tr>
　　<tr><td style="background:#464646"></td></tr>
　　<tr><td height="3"></td></tr>
　　<tr><td>Copyright 2002-2007 いまさらHTML,CSS講座 joke All rights reserved</td></tr>
</table>
</div>

今回作成したページの記述は以上です。お疲れ様でした。

⇒ index.htm のソース ( ページを開き、右クリックメニューのソースの表示でご覧下さい。 )
⇒ style.css

Lesson1 >> Lesson2 >> Lesson3 >> Lesson4 >> Lesson5 >> Lesson6 >> Lesson7 >> Last Lesson >> Lesson 実践

ページトップへ / いまさらHTML,CSS講座

ホームページ作成 いまさらHTML,CSS講座

ホームページ作成いまさらHTML,CSS講座