個人ページの作成例

プロフィール（作者の紹介）

自己紹介をするためのページを作りましょう。

テーブルレイアウト

テーブルを使って、紹介したい項目と内容を列記します。

<!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">
h1 {
	font-size: 18px;
	font-weight: bold;
	color: #993300;
	background-color: #FF9933;
	border-style: solid;
	width: 300px;
	padding: 5px;
	border-left-width: 10px;
	border-color: #993300;
}
table {
	background-color: #CCFFCC;
	border: 5px inset #006600;
}
th {
	background-color: #006600;
	color: #FF9933;
}
</style>
</head>

<body>
<h1>自己紹介</h1>
<hr>
<table border="0" cellpadding="5" cellspacing="0">
  <tr>
    <th colspan="2">★HP管理人★</th>
  </tr>
  <tr>
    <td align="right">名前：</td>
    <td>○川○男</td>
  </tr>
  <tr>
    <td align="right">誕生日：</td>
    <td>１０月１０日</td>
  </tr>
  <tr>
    <td align="right">出身地：</td>
    <td>○○県○○市</td>
  </tr>
  <tr>
    <td align="right">資格等：</td>
    <td>○○士、○○学部卒</td>
  </tr>
  <tr>
    <td align="right">趣味：</td>
    <td>旅行、温泉、読書</td>
  </tr>
  <tr>
    <td align="right">好きな音楽：</td>
    <td>クラッシック</td>
  </tr>
  <tr>
    <td align="right">好きな本：</td>
    <td>歴史小説、漫画</td>
  </tr>
  <tr>
    <td align="right">好きな言葉：</td>
    <td>一期一会</td>
  </tr>
  <tr>
    <td align="right">好きな食べ物：</td>
    <td>カレーライス</td>
  </tr>
  <tr>
    <td align="right">嫌いな食べ物：</td>
    <td>ピーマン</td>
  </tr>
</table>
<hr>
<p align="center"><a href="index.html">戻る</a></p>
</body>
</html>

まず、<body></body>の中を記述し、CSSを後から書いてどこに適用されるか見てみましょう。

次のページへ

戻る