個人ページの作成例

基本構成

個人の趣味的サイトを作る

解説ページ	実例ページ
トップページ（ウェルカムページ）	index.html
├プロフィール（製作者の紹介）	├p1.html
├ブログ（日記）	├p2.html
├趣味のページ（写真）	├p3.html
└外部リンクのページ	└p4.html
（追加ページ）
地図のページ	p5.html

トップページ

トップページはサイト内の複数のページへ来訪者を導くための目次（インデックス）の役割を持っています。
もちろん、サイトの第一印象を決める重要なページでもあります。

印象的なタイトルや画像を配置したり、サイト全体の統一感やデザイン性を演出することもあります。
中にはトップページにすべてのコンテンツを配置したり、FlashやJavaScriptを使って表示を部分的に切り替えて見せるサイトもあります。

シンプルレイアウト

まずはシンプルに箇条書きのデザインにしてみます。背景に大きく画像をあしらうなどしても良いでしょう。その代わりテキストはシンプルにします。

実例01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>個人のサイト</title>
</head>
<body>
<h1>個人のサイト</h1>
<hr>
<p>ようこそ個人のサイトへ</p>
<ul>
<li><a href="p1.html">自己紹介</a></li>
<li><a href="p2.html">日記</a></li>
<li><a href="p3.html">趣味</a></li>
<li><a href="p4.html">リンク集</a></li>
</ul>
<p>サイトの目的や注意書きを記載</p>
<p>近況や注意書きを記載</p>
<hr>
<div align="right">2012/1/1</div>
</body>
</html>

テーブルレイアウト

箇条書きでは上から順番にメニューが並びますが、テーブルにすると自由に縦横にメニューを組み合わせることができます。
テーブルを拡張して、画像もテーブル内に配置することもできます。メニューの周りを画像で飾るという使い方ができます。

実例02

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>個人のサイト</title>
</head>
<body>
<h1>個人のサイト</h1>
<hr>
<p>ようこそ個人のサイトへ</p>
<table border="2" cellpadding="5" cellspacing="2">
<tr><td><a href="p1.html">自己紹介</a></td><td><a href="p2.html">日記</a></td></tr>
<tr><td><a href="p3.html">趣味</a></td><td><a href="p4.html">リンク集</a></td></tr>
</table>
<p>サイトの目的や注意書きを記載</p>
<hr>
<div align="right">2012/1/1</div>
</body>
</html>

テーブル内のリンクにCSSを適用する（１）

各ページへのリンクをボタンのように際立たせたデザインにします。メニューのために画像を用意しなくても良いので、簡単に作り変えることができます。

実例03

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>個人のサイト</title>
<style type="text/css">
.menu {
	font-size: 18px;
	font-weight: bold;
	color: #FFCC00;
	background-color: #339900;
	text-decoration: none;
	display: block;
	padding: 5px;
}
</style>
</head>
<body>
<h1>個人のサイト</h1>
<hr>
<p>ようこそ個人のサイトへ</p>
<table border="0" cellpadding="5" cellspacing="2">
<tr><td><a href="p1.html" class="menu">自己紹介</a></td><td><a href="p2.html" class="menu">日記</a></td></tr>
<tr><td><a href="p3.html" class="menu">趣味</a></td><td><a href="p4.html" class="menu">リンク集</a></td></tr>
</table>
<p>サイトの目的や注意書きを記載</p>
<hr>
<div align="right">2012/1/1</div>
</body>
</html>

テーブル内のリンクにCSSを適用する（２）

リンク上にマウスが移動した場合に色が反転するようにして、動きを付けたボタンのように見せます。

実例04

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>個人のサイト</title>
<style type="text/css">
.menu {
	font-size: 18px;
	font-weight: bold;
	color: #FFCC00;
	background-color: #339900;
	text-decoration: none;
	display: block;
	padding: 5px;
}
.menu:hover {
	color: #339900;
	background-color: #FFCC00;
}
</style>
</head>
<body>
<h1>個人のサイト</h1>
<hr>
<p>ようこそ個人のサイトへ</p>
<table border="0" cellpadding="5" cellspacing="2">
<tr><td><a href="p1.html" class="menu">自己紹介</a></td><td><a href="p2.html" class="menu">日記</a></td></tr>
<tr><td><a href="p3.html" class="menu">趣味</a></td><td><a href="p4.html" class="menu">リンク集</a></td></tr>
</table>
<p>サイトの目的や注意書きを記載</p>
<hr>
<div align="right">2012/1/1</div>
</body>
</html>

<h1>にCSSを適用する

CSSで<h1>タグのデザインをしてみましょう。

実例05

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>個人のサイト</title>
<style type="text/css">
.menu {
	font-size: 18px;
	font-weight: bold;
	color: #FFCC00;
	background-color: #339900;
	text-decoration: none;
	display: block;
	padding: 5px;
}
.menu:hover {
	color: #339900;
	background-color: #FFCC00;
}
h1 {
	font-size: 36px;
	font-style: italic;
	background-color: #006600;
	padding: 5px;
	color: #99FF00;
	text-align: center;
}
</style>
</head>
<body>
<h1>個人のサイト</h1>
<hr>
<p>ようこそ個人のサイトへ</p>
<table border="0" cellpadding="5" cellspacing="2">
<tr><td><a href="p1.html" class="menu">自己紹介</a></td><td><a href="p2.html" class="menu">日記</a></td></tr>
<tr><td><a href="p3.html" class="menu">趣味</a></td><td><a href="p4.html" class="menu">リンク集</a></td></tr>
</table>
<p>サイトの目的や注意書きを記載</p>
<hr>
<div align="right">2012/1/1</div>
</body>
</html>

<hr>にCSSで色を付ける

水平線に色を付けましょう。

実例06

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>個人のサイト</title>
<style type="text/css">
.menu {
	font-size: 18px;
	font-weight: bold;
	color: #FFCC00;
	background-color: #339900;
	text-decoration: none;
	display: block;
	padding: 5px;
}
.menu:hover {
	color: #339900;
	background-color: #FFCC00;
}
h1 {
	font-size: 36px;
	font-style: italic;
	background-color: #006600;
	padding: 5px;
	color: #99FF00;
	text-align: center;
}
hr {
	border: 2px outset #FF0000;
}
</style>
</head>
<body>
<h1>個人のサイト</h1>
<hr>
<p>ようこそ個人のサイトへ</p>
<table border="0" cellpadding="5" cellspacing="2">
<tr><td><a href="p1.html" class="menu">自己紹介</a></td><td><a href="p2.html" class="menu">日記</a></td></tr>
<tr><td><a href="p3.html" class="menu">趣味</a></td><td><a href="p4.html" class="menu">リンク集</a></td></tr>
</table>
<p>サイトの目的や注意書きを記載</p>
<hr>
<div align="right">2012/1/1</div>
</body>
</html>

テーブルを中央に配置

「ようこそ～」の一文と、テーブルを中央に配置しましょう。
どちらにもalign属性が使えますが、<table>はブラウザによっては正しく表示されません。CSSのtext-alignでも、<p>には使えますが、<table>では枠内の文字だけが中央に寄せられます。
そこで、テーブルについては全体を<div>タグで囲います。

実例07

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>個人のサイト</title>
<style type="text/css">
.menu {
	font-size: 18px;
	font-weight: bold;
	color: #FFCC00;
	background-color: #339900;
	text-decoration: none;
	display: block;
	padding: 5px;
}
.menu:hover {
	color: #339900;
	background-color: #FFCC00;
}
h1 {
	font-size: 36px;
	font-style: italic;
	background-color: #006600;
	padding: 5px;
	color: #99FF00;
	text-align: center;
}
hr {
	border: 2px outset #FF0000;
}
table {
}
</style>
</head>
<body>
<h1>個人のサイト</h1>
<hr>
<p align="center">ようこそ個人のサイトへ</p>
<div align="center">
<table border="0" cellpadding="5" cellspacing="2">
<tr><td><a href="p1.html" class="menu">自己紹介</a></td><td><a href="p2.html" class="menu">日記</a></td></tr>
<tr><td><a href="p3.html" class="menu">趣味</a></td><td><a href="p4.html" class="menu">リンク集</a></td></tr>
</table>
</div>
<p>サイトの目的や注意書きを記載</p>
<hr>
<div align="right">2012/1/1</div>
</body>
</html>

次のページへ

戻る