ドリル式ホームページの作り方

div#a1内の編集

ドリル式ホームページの作り方TOP  >>  Lesson9〜画像ビュアーの作成〜  >>  div#a1内の編集

div#a1内の編集

div#a1内にタイトル、sitemapとお問合せへのリンクを作ります。

<div id="a1">
<h1><a href="index.html"><img src="gif/29.gif" alt="ホームページ作成講座" /></a></h1>
<ul>
<li><a href="#">sitemap</a></li>
<li><a href="#"><span>お問合せ</span></a></li>
</ul>
</div>

h1にはタイトルロゴを、その下には、リスト項目として、sitemapとお問合せを記述します。また、お問合せはspanで囲んでおきます。

ulに対して、idやclassを指定してもよいのですが、めんどいので、”#a1 ul”のように、div#a1ボックスの中のulという風に指定することで手間を省きます。

#a1に、position:relative指定で、基点に設定してから、あらかじめインライン要素にして横並びにしてあるul要素を#a1の左上を基点に絶対配置します。

#a1 ul {
font-size:13px;
position:absolute;
top:10px;
left:500px;
}
#a1 ul li {
display:inline;
}
#a1 ul li span {
font-size:12px;
}
#a1 ul li a {
margin:0 5px;
}
h1 {
margin:10px 0 0 10px;
}

ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)


Lesson9〜画像ビュアーの作成〜

  1. XHTMLの骨格を記述する
  2. divとfloatで骨格を作る
  3. div#a1内の編集
  4. div#a2内の編集
  5. div#a3内の編集
  6. div#a4内の編集
  7. div#a5内の編集・最終調整
  8. 画像viewerを配置する

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.