かずばんBBS
今までのBBS、Spamが多いので新しくしてみました。
特に話題は特定していません、お気軽に投稿してください
５軸の話題はこちらで・・
|
かずばん - 12/5/7(月) 13:17 - |
【float:left】
思ったようにレイアウトするのは難しい
以前は、<table>要素を使ってレイアウトしたりしていましたが
デフォルトではボーダー線がでたり
隣とスペースが開いたり修正している内にずれてしまったり・・・
実際、tableは表作成が目的なので、それをレイアウトに使うのはどうなの？
という考えもあります
ネットでＨＰテンプレートなどを探して調べてみると<div>を使っている例が多いです
<div>はブロック要素で囲まれた範囲をひと固まりとして扱うとの事なので
なるほど、レイアウトにはいいのでしょうね
通常ホームページのレイアウトは、「タイトル・ヘッダ」「内容」「フッタ」で構成して
「内容」の部分を１〜３に区切るのが一般的なようです
その各々を、<div>でひと固まりにすればいいと言う事です
そこで、３列のレイアウトを作ってみる
横幅：900px、左：200p、中央：500px、右：200px
これをスタイルシートで明記して、<div>で囲ってみる
http://www.geocities.jp/sako_sho_kei/test/index001.html
う〜ん、だめだぁ・・
幅は指定したようになるけど、レイアウトは、ただ、縦に列挙されるだけ！
/*************************************************/
<?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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
body{
width:900px;
text-align:center;
}
/* ------------------------------
Hedder
------------------------------ */
.headder{
color:white;
background-color: blue;
}
.headder h1{
font-size:30pt;
text-align:center;
}
.headder h2{
color:skyblue;
font-size:12pt;
text-align:right;
padding-right:40px;
margin-top:35px;
margin-bottom:0.0em;
}
/* ------------------------------
left
------------------------------ */
.left{
width:200px;
background:red;
}
.left a{
width:200px;
}
.left a:hover{
background:blue;
color:white;
}
/* ------------------------------
center
------------------------------ */
.center{
width:500px;
background:yellow;
}
/* ------------------------------
right
------------------------------ */
.right{
width:200px;
background:gray;
color:black;
}
*/------------------------------ */
-->
</style>
</head>
<!-- HTML ------------------->
<body>
<div class="headder">
<h1>TEST_Page</h1>
<h2>by kazuban</h2>
</div>
<div class="left">
<a hlef="#">Page01</a>
<a hlef="#">Page02</a>
<a hlef="#">Page03</a>
<a hlef="#">Page04</a>
</div>
<div class="center">
<h1>内容</h1>
<p>hogehoge hogehoge</p>
<p>hogehoge hogehoge</p>
<p>hogehoge hogehoge</p>
<p>hogehoge hogehoge</p>
</div>
<div class="right">
<h1>link</h1>
<a href="#">link01</a>
<a href="#">link02</a>
</div>
</body>
</html>
思ったようにレイアウトするのは難しい
以前は、<table>要素を使ってレイアウトしたりしていましたが
デフォルトではボーダー線がでたり
隣とスペースが開いたり修正している内にずれてしまったり・・・
実際、tableは表作成が目的なので、それをレイアウトに使うのはどうなの？
という考えもあります
ネットでＨＰテンプレートなどを探して調べてみると<div>を使っている例が多いです
<div>はブロック要素で囲まれた範囲をひと固まりとして扱うとの事なので
なるほど、レイアウトにはいいのでしょうね
通常ホームページのレイアウトは、「タイトル・ヘッダ」「内容」「フッタ」で構成して
「内容」の部分を１〜３に区切るのが一般的なようです
その各々を、<div>でひと固まりにすればいいと言う事です
そこで、３列のレイアウトを作ってみる
横幅：900px、左：200p、中央：500px、右：200px
これをスタイルシートで明記して、<div>で囲ってみる
http://www.geocities.jp/sako_sho_kei/test/index001.html
う〜ん、だめだぁ・・
幅は指定したようになるけど、レイアウトは、ただ、縦に列挙されるだけ！
/*************************************************/
<?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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
body{
width:900px;
text-align:center;
}
/* ------------------------------
Hedder
------------------------------ */
.headder{
color:white;
background-color: blue;
}
.headder h1{
font-size:30pt;
text-align:center;
}
.headder h2{
color:skyblue;
font-size:12pt;
text-align:right;
padding-right:40px;
margin-top:35px;
margin-bottom:0.0em;
}
/* ------------------------------
left
------------------------------ */
.left{
width:200px;
background:red;
}
.left a{
width:200px;
}
.left a:hover{
background:blue;
color:white;
}
/* ------------------------------
center
------------------------------ */
.center{
width:500px;
background:yellow;
}
/* ------------------------------
right
------------------------------ */
.right{
width:200px;
background:gray;
color:black;
}
*/------------------------------ */
-->
</style>
</head>
<!-- HTML ------------------->
<body>
<div class="headder">
<h1>TEST_Page</h1>
<h2>by kazuban</h2>
</div>
<div class="left">
<a hlef="#">Page01</a>
<a hlef="#">Page02</a>
<a hlef="#">Page03</a>
<a hlef="#">Page04</a>
</div>
<div class="center">
<h1>内容</h1>
<p>hogehoge hogehoge</p>
<p>hogehoge hogehoge</p>
<p>hogehoge hogehoge</p>
<p>hogehoge hogehoge</p>
</div>
<div class="right">
<h1>link</h1>
<a href="#">link01</a>
<a href="#">link02</a>
</div>
</body>
</html>
<Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.3; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CL...
 |
▼ | HTML & CSS 覚書 かずばん 12/5/7(月) 10:40 |
|
 |
【float:left】 かずばん 12/5/7(月) 13:17 | ≪ |
|
  |
Re:【float:left】 かずばん 12/5/7(月) 13:25 |
|
|
【a a:hover】 かずばん 12/5/8(火) 9:56 |
