他のタグのスタイルを指定する
次に、div要素以外のタグにIDとclassをつけて、スタイルを指定してみましょう。
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>ホームページ作成講座</title> <meta name="description" content="ホームページ作成の方法を初心者さんにもわかるように、簡単に解説している講座です。" /> <meta name="keywords" content="ホームページ,作成,講座" /> <meta name="author" content="wakabagari" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style/style.css" media="all" /> </head> <body> <div id="a123"> <div id="a1"> <h1><a href="index.html"><img src="gif/4.gif" alt="ホームページ作成講座" /></a></h1> <p id="b1">>> <a href="#">ホームページ作成講座TOP</a></p> </div> <div id="a2"> <p id="b2"><img src="gif/5.gif" alt="画像" /></p> <p id="b3"><img src="gif/22.gif" alt="画像" /></p> <ul id="b4"> <li class="c1"><a href="#">Lesson1</a></li> <li class="c2"><a href="#">Lesson2</a></li> <li class="c3"><a href="#">Lesson3</a></li> <li class="c3"><a href="#">Lesson4</a></li> <li class="c2"><a href="#">Lesson5</a></li> <li class="c1"><a href="#">Lesson6</a></li> </ul> </div> <div id="a3"> <address>Copyright 2007@nkdesk. all right reserved.</address> </div> </div> </body> </html>
p要素の指定
はじめに”p”のスタイルを指定します。
p#b1 { margin-left:20px; font-size:13px; } p#b3 { position:absolute; top:16px; left:270px; }
pにはb1,b2,b3という3つのIDを指定していると思いますが、b2は特に設定する必要がないので、スタイルは指定しません。
b3は、b2の右側に配置したいので、あらかじめ設定しておいたdiv#a2の左上を基点として、絶対配置します。
リスト要素(ul,li)の指定
続いてリスト要素(ul,li)のスタイルを追加します。
ul#b4 { position:absolute; top:24px; left:270px; line-height:28px; list-style-type:none; margin-left:30px; font-size:14px; color:#555; } ul#b4 li { display:inline; } ul#b4 li a { display:block; padding-left:26px; background:url(../gif/23.gif) left 7px no-repeat; } ul#b4 li.c1 a { font-weight:bold; } ul#b4 li.c2 a { font-weight:bold; margin-left:8px; } ul#b4 li.c3 a { font-weight:bold; margin-left:14px; }
display:inlineとblock、リストマークのbackground指定は、lesson6でやったことを思い出してくださいね。
リストもp#b2やp#b3の右側に移動させたいので、div#a2の左上を基点に絶対配置します。
各リスト項目(li)について、弧を描くように並べたいので、1行1行にクラスを指定し、margin-leftで弧上に配置します。
ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)
a要素とaddressの指定
未訪問リンクの色、訪問済みリンクの色、マウスを当てたときのリンクの色の指定と、addressにスタイルを適用します。
a:link { color:#66f; } a:visited { color:#66f; } a:hover { color:#005; } address { font-style:normal; font-size:13px; padding:2px 0 5px 5px; border-top:double 3px #99d; }
ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)
Lesson7~positionを使ったレイアウト~
- XHTMLの骨格を記述する
- divタグを理解する
- div骨格にコンテンツを挿入する
- 絶対配置と相対配置
- divのスタイルを指定する
- 他のタグのスタイルを指定する
- スクロールボックスを設置する
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>