Webふぉれすと
Web制作、Webデザインのスキルアップに役立つ情報をお届けします!
みんなが癒され、元気になるWebを目指します。
サイトマップはこちら
PI-chicc,PA-chicc
うぇぶ実験室
ふぉれすとCafe
NANAKORO*BEANS
くりっくりんく
イベント・セミナーを探せ!
ふぉれすとかわらばん
がしがし通信
今日のスタッフ
スタッフプロフィール
ご意見ご感想フォーム
トップページにもどる
Webふぉれすとトップ > うぇぶ実験室

CSSでレイアウトしよう!

【実験1】まずは、CSSだけを使ってレイアウトしてみました。
元の画像 ○背景色は、白。文字色は、黒。
○上、左の余白なし。
○文字の周りは適度の余白を空ける。

実際のページはこちらです。
○CSSは、下の通りです。

<style type="text/css">
 
body {
background-color: #FFFFFF;
color: #000000
}
○ページ指定
背景:白(#FFFFFF)
文字色:黒(#000000)
hr {
height:3px;
border-width: 1px;
border-style: solid;
border-color: #FFCC00;
background-color:#FFCC00;
color:#FFCC00
}
○罫線
太さ:3px
ボーダーの太さ:1px
種類:実線
色:黄色(#FFCC00)

*罫線に関しては【実験2】でさらに詳しく実験します。
.top {
position:absolute;
top:0px;
left:0px
}
○上の罫線の位置
位置固定
上部と左側の余白なし
.bottom {
position:absolute;
top:600px;
left:0px
}
○下の罫線の位置
位置固定
上から600px
左側の余白なし
.title {
position: absolute;
top:3px;
left:150p
}
○タイトル
位置固定
上から3px
左から150px
.picture {
position: absolute;
top:3px;
left:0px
}
○左側の画像
位置固定
上から3px
左側の余白なし
.left {
position: absolute;
top:160px;
left:170px;
width:220px
}
○左側のテキスト部分
位置固定
上から160px
左から170px
横幅:220px
.right {
position: absolute;
top:160px;
left:410px;
width:220px
}
○右側のテキスト部分
位置固定
上から160px
左から410px
横幅:220px
.orange {
background-color:#FF6600;
width:220px;
color: #FFFFFF;
font-size: 18px;
font-weight:bold;
padding:1px
}
○小見出し、オレンジ
背景色:オレンジ(#FF6600)
横幅:220px
文字色:白(#FFFFFF)
文字サイズ:18px
太字
文字の周りの余白:1px
.green {
background-color:#00CC00;
width:220px;
color: #FFFFFF;
font-size: 18px;
font-weight:bold;
padding:1px
}
○小見出し、緑
背景色:緑(#00CC00)
横幅:220px
文字色:白(#FFFFFF)
文字サイズ:18px
太字
文字の周りの余白:1px
.text {
margin:10px;
line-height:130%;
font-size:12px
}
○テキスト
余白:10px
行間隔:130%
文字サイズ:12px
</style>  

▼特にブラウザ間での表示を気にせず作ってみましたが、やはり、表示に違いがでてしまいました。
▼罫線(hr)は、borderやそれ以外の部分に分かれていて指定の仕方が少し複雑だなぁと感じました。実験2で細かく分けて、さらに詳しく実験してみます。
▼また、marginとpaddingは、どちらも余白を指定するプロパティですが、それぞれ役割が違います。実験3でわかりやすいように実験してみました。
【参考】今回の実験での表示の問題点と解決法
【問題点】Internet Explorer6.0とNetscape4.7での表示の比較
1.罫線
Netscapeでは、hrタグにCSSが適応されないようです。Netscape7.0では、色や太さは指定した通りですが、指定した位置に表示されませんので、上の罫線がタイトル画像の下に隠れてしまいました。また、Netscape4.xでは、色、太さ、位置、すべて指定通りになりませんでした。
2.小見出し
背景色を指定しましたが、Netscape4.xでは、横幅が指定されていても、文字が書かれている部分しか塗りつぶされませんでした。

【解決法】変更後の実際のページ
1.罫線
hrタグではなく、同じ見映えになる画像を作りました。
2.小見出し
ここだけテーブルを使い、セルにbackground-colorを指定しました。

前のページへ
うぇぶ実験室トップ
続きを読む

Copyright(c)2002-2004 Step-First All rights reserved. [About WebForest]
E-Mail:webforest@step-first.com