ページレイアウトについて
-
0 名前： grace ： 2005/05/27 15:14
- こんにちは。
レイアウトについて、上手くいかなくて質問させていただきます。
http://www.geocities.jp/graceless_things/czvw9958.jpg
汚い図で申し訳ないのですが、上のようにページを構成したいのです。
色々のサイトをのぞいて似たようなもののソースを見て作ったりもしたのですが、どうにも上手く行きません。
すみませんが、アドバイスをお願いします。
-
1 名前： カヅサツ ： 2005/05/27 15:14 ［URL］
- こんな塩梅でしょうか。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
h1{
border-width: 1px;
border-style: solid;
margin: 1em 2em 1em 2em;
}
div#left{
border-width: 1px;
border-style: solid;
width: 60%;
float: left;
padding: 5px;
}
div#right{
width: 37%;
float: right;
}
div#menu{
border-width: 1px;
border-style: solid;
margin: 0em 0em 1em 0em;
padding: 5px;
}
div#nazo{
border-width: 1px;
border-style: solid;
margin: 1em 0em 0em 0em;
padding: 5px;
}
</style>
</head>
<body>
<h1>題名はh1要素を使います</h1>
<div id="left">
<p>ここに文章</p>
<p>段落はp要素です</p>
<p>段落</p><p>段落</p><p>段落</p><p>段落</p>
<p>段落</p><p>段落</p><p>段落</p><p>段落</p>
</div>
<div id="right">
<div id="menu">
<ul>
<li><a href="">BBS</a></li>
<li><a href="">リンク</a></li>
<li>このような箇条書きはli要素です</li>
</ul>
</div>
<div id="nazo">
<ul>
<li>ブログ</li>
<li>ペット</li>
<li>よくわからないけど箇条書きにしてみた</li>
</ul>
</div>
</div>
</body>
</html>
-
2 名前： grace ： 2005/05/27 15:14
- おはようございます。
返信ありがとうございます。
はい！見事に表現されてます。お手数かけました。
私も少しはｈｔｍｌタグを分かったつもりでしたが、上のソース前半はまったくわからずです。
これに若干修正をしたいのですが、上のソースをどういじればよいのか知りたいのですが
・題名部分の枠線を消したい。
・背景画像を文章などの枠線の中に影響したくない。
以上の２点です、これでほぼ構想どおりになるんです。
非常に恐縮ですが、ご指導ください。
-
3 名前： カヅサツ ： 2005/05/27 15:14 ［URL］
- とりあえず、CSSを勉強しましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
body{
color: #000000;
background-color: #FFFFFF;
background-image: url("./hogehoge.jpg");
}
div#left{
background-color: #FFFFFF;
border-width: 1px;
border-style: solid;
width: 60%;
float: left;
padding: 5px;
}
div#right{
width: 37%;
float: right;
}
div#menu{
background-color: #FFFFFF;
border-width: 1px;
border-style: solid;
margin: 0em 0em 1em 0em;
padding: 5px;
}
div#nazo{
background-color: #FFFFFF;
border-width: 1px;
border-style: solid;
margin: 1em 0em 0em 0em;
padding: 5px;
}
</style>
</head>
<body>
<h1>題名はh1要素を使います</h1>
<div id="left">
<p>ここに文章</p>
<p>段落はp要素です</p>
<p>段落</p><p>段落</p><p>段落</p><p>段落</p>
<p>段落</p><p>段落</p><p>段落</p><p>段落</p>
</div>
<div id="right">
<div id="menu">
<ul>
<li><a href="">BBS</a></li>
<li><a href="">リンク</a></li>
<li>このような箇条書きはli要素です</li>
</ul>
</div>
<div id="nazo">
<ul>
<li>ブログ</li>
<li>ペット</li>
<li>よくわからないけど箇条書きにしてみた</li>
</ul>
</div>
</div>
</body>
</html>
-
4 名前： カヅサツ ： 2005/05/27 15:14 ［URL］
- とりあえず、
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
でエラーは出ないようにしたつもりですが、５分でデッチ上げて未検証なので、チェックしつつカスタマイズしてください。
-
5 名前： grace ： 2005/05/27 15:14
- 無事上手くできました。ありがとうございます。
なるほどようやく骨組みを理解しました。
上と下でHEADとBODYで異なるのですね。
ひとくくりにして考えてました。
CSS面白そうです。勉強してみます。
親切にありがとうございました。
