2012年6月26日火曜日
今回は、HPレイアウトの作成方法をご紹介します。
例...
<body>
<div id="box2">
<div id="box3">
サブ
</div>
<div id="box4">
メイン
</div>
<div id="box5">
サブ2
</div>
</div>
</body>
id="box2"は、コンテナです。
コンテナの幅が700pxだと中のカラムは、ぴったり700pxに合う様にしないと駄目です。
コンテナが700pxだと中のカラムは、全て200pxにしましょう。
今回は、簡単にする為200pxにしました。
さて次は、cssです。
CSSでは、以下の様にしてください。
#box2{
width: 700px; 幅700PXと指定しています。
}
#box3{
float: left; 左に回りこみ
width: 200px; 幅200px
background-color: #0000FF; 分かりやすい様に適当に色をつける
} 後の4と5も3と同じ様に書きます。
#box4{
float: left;
width: 200px;
background-color: #33FFFF;
}
#box5{
float: left;
width: 200px;
background-color: #FF33CC;
}
これでプレビューすると3カラムになっているはずです。
出来ない場合は、幅のpxの書き忘れか
700のコンテナをカラムがオーバーしている場合があります。
それでも出来ない場合は、コメントに書いてください。
以上
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.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>
<style type="text/css">
#box2{
width: 700px;
}
#box3{
float: left;
width: 200px;
background-color: #0000FF;
}
#box4{
float: left;
width: 200px;
background-color: #33FFFF;
}
#box5{
float: left;
width: 200px;
background-color: #FF33CC;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title></title>
</head>
<body>
<div id="box2">
<div id="box3">
サブ
</div>
<div id="box4">
メイン
</div>
<div id="box5">
サブ2
</div>
</div>
</body>
</html>
上級者の方も最初は、出来なかったはずです。
僕も1ヶ月前は、出来ませんでした。
でも今は、簡単出来ます。
結構前WEBデザイナーがテーブルレイアウトでサイトで作ってたらしいです。
それデザイナーが言うには、複雑で難しいとの事!!
でもホントは、idさえちゃんと管理出来ていたら簡単に出来る事なのです。
まー説明が長いと嫌なのでさっそく作っていきましょう。
今回の手順は、
- HTMLを書き込む
- cssで設定する
- 親進めソフト
この手順で説明して行きます。
【1】
まずは、HTMLを書き込んで行きましょう!!
HTMLタグは、以下
<div id=""> このタグがベースとなるタグです。""の間にIDを書き込んで
行きます。
IDは、cssで指定する時に必要なので絶対覚えやすいIDにしましょう。
今回は、3カラムなので3回同じのを書いてください。
※IDは、同じにしないでください。
例...
<body>
<div id="box2">
<div id="box3">
サブ
</div>
<div id="box4">
メイン
</div>
<div id="box5">
サブ2
</div>
</div>
</body>
id="box2"は、コンテナです。
コンテナの幅が700pxだと中のカラムは、ぴったり700pxに合う様にしないと駄目です。
コンテナが700pxだと中のカラムは、全て200pxにしましょう。
今回は、簡単にする為200pxにしました。
さて次は、cssです。
CSSでは、以下の様にしてください。
#box2{
width: 700px; 幅700PXと指定しています。
}
#box3{
float: left; 左に回りこみ
width: 200px; 幅200px
background-color: #0000FF; 分かりやすい様に適当に色をつける
} 後の4と5も3と同じ様に書きます。
#box4{
float: left;
width: 200px;
background-color: #33FFFF;
}
#box5{
float: left;
width: 200px;
background-color: #FF33CC;
}
これでプレビューすると3カラムになっているはずです。
出来ない場合は、幅のpxの書き忘れか
700のコンテナをカラムがオーバーしている場合があります。
それでも出来ない場合は、コメントに書いてください。
以上
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.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>
<style type="text/css">
#box2{
width: 700px;
}
#box3{
float: left;
width: 200px;
background-color: #0000FF;
}
#box4{
float: left;
width: 200px;
background-color: #33FFFF;
}
#box5{
float: left;
width: 200px;
background-color: #FF33CC;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title></title>
</head>
<body>
<div id="box2">
<div id="box3">
サブ
</div>
<div id="box4">
メイン
</div>
<div id="box5">
サブ2
</div>
</div>
</body>
</html>
