かずばんBBS

今までのBBS、Spamが多いので新しくしてみました。
特に話題は特定していません、お気軽に投稿してください

５軸の話題はこちらで・・
新規投稿 ┃ツリー表示 ┃スレッド表示 ┃一覧表示 ┃トピック表示 ┃番号順表示 ┃検索 ┃設定 ┃ホーム ┃5-axis BBS
82 / 90 ﾂﾘｰ    ←次へ　｜　前へ→
▼ 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
HTML & CSS 覚書
 かずばん  - 12/5/7(月) 10:40 -
もうすでに公開はしてしまっていますが、新しくＨＰは作成中発展途上です
今回はＣＳＳを調べながらの作成で、気が向いたときに
その覚え書きとして残して行こうと思います。
引用なし

パスワード


<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...＠aa2006021391d2c49af2.userreverse.dion.ne.jp>
・ツリー全体表示
【float:left】
 かずばん  - 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>
引用なし

パスワード


<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...＠aa2006021391d2c49af2.userreverse.dion.ne.jp>
・ツリー全体表示
Re:【float:left】
 かずばん  - 12/5/7(月) 13:25 -
ところが、スタイルシートに【float:left】を追加してみる
これは、回り込みを指示するコマンドらしい
これにより、<div>が改行されないから、最大指定幅以下のサイズであれば
横に配置してくれる
これで、思ったようなレイアウトにできる
width の値により、２列でも３列でも４列でも簡単にレイアウトが作れる

http://www.geocities.jp/sako_sho_kei/test/index002.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;
float:left; /* <-------------------------- */
background:red;
}
.left a{
float:left; /* <-------------------------- */
width:200px;
}
.left a:hover{
background:blue;
color:white;
}
/* ------------------------------
center
------------------------------ */
.center{
width:500px;
float:left; /* <-------------------------- */
background:yellow;
}
/* ------------------------------
right
------------------------------ */
.right{
width:200px;
float:left; /* <-------------------------- */
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...＠aa2006021391d2c49af2.userreverse.dion.ne.jp>
・ツリー全体表示
【a a:hover】
 かずばん  - 12/5/8(火) 9:56 -
【a a:hover】

<a> は アンカーの意味で、<a href="..."> で指定したページのリンクなどに使用する
a:hover は、アンカー要素の上をマウスが通過した時に適応される

それぞれに、色などのスタイルを指定すれば、マウスにより動きのある
メニューを作成できる

http://www.geocities.jp/sako_sho_kei/test/index003.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;
}
/* ------------------------------
Index
------------------------------ */
.index a{
color:yellow;
background:black;
float:left;
width:150px;
height:25px;
text-align:center;
}
.index a:hover{
color:black;
background:yellow;
}
.index ul{
margin:0px;
margin-top:2px;
padding:0px;
list-style-type:none;
}
div.index li{
float:left;
}
*/------------------------------ */
-->
</style>
</head>

<!-- HTML ------------------->
<body>
<div class="headder">
<h1>TEST_Page</h1>
<h2>by kazuban</h2>
</div>
<div class="index">
<ul>
<li><a href="./index001.html">Sample001</a></li>
<li><a href="./index002.html">Sample002</a></li>
<li><a href="./index003.html">Sample003</a></li>
<li><a href="#">Menu01</a></li>
<li><a href="#">Menu02</a></li>
<li><a href="#">Menu03</a></li>
</ul>
</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...＠aa2006021391d2c49af2.userreverse.dion.ne.jp>
・ツリー全体表示
82 / 90 ﾂﾘｰ    ←次へ　｜　前へ→
新規投稿 ┃ツリー表示 ┃スレッド表示 ┃一覧表示 ┃トピック表示 ┃番号順表示 ┃検索 ┃設定 ┃ホーム ┃5-axis BBS
 22305
ページ：  ┃  記事番号：  

C-BOARD Moyuku v1.03b5