HTML講座第五回「CSS 文章スタイルでつくる」

お久しぶりです。gisi_spicaです。
目標HTMLなんぞ作ろうかと思いましたが、とても面倒なので、前回分（http://bloggertouch.appspot.com/putidevelopers/post/7803022317575453271 ←いつも僕が見ている方のアドレスです。）の画像の「周りの矢印なし」を作ります。



復習用画像


body要素内のデータ


<div id="wrapper">
<div id="header"><p>ヘッダ ID:header 横800px，縦80px</p></div>
<div id="navigation"><p>サイドメニュー<br><br>
縦は任意<br><br>
横150px</p></div>
<div id="contents"><p<メインコンテンツエリア<br><br>
縦は任意、横は650px<br><br>
※ヘッダからフッタまでを囲っているのは、wrapperです。</p></div>
<div id="footer">フッタ　横800px、縦は任意。</div>
</div>


こうなっていると、このように表示されるはずです。



※InternetExplorer８で表示
<br>は改行です。

ではスタイルのソースコードを埋め込みます。ヘッダにスタイルシートを書く「内部スタイルシート」でやりますよ。/*と*/の間はCSSでのコメントです。

以下のソースをhead要素の中にいれてください。

<style>
body{ background-color:green; /*背景をgreen（緑色）に*/}
#wrapper{
margin:0;padding:0; /*marginとpaddingを0とします。これで無駄な余白を消します。このように一行に二行書いても問題ないです*/
background-color:white; /*背景をwhite（白色）に*/
width:800px; /*横幅：800px*/
}
#header{
width:800px; /*横幅：800px*/
height:80px; /*高さ：80px*/
background-color:blue; /*背景を青色に*/
}
#navigation{
width:150px; /*横幅150px*/
background-color:#CCCCFF;/*背景色を＃CCCCFF（赤0xCC、緑0xCC、青0xFF）に*/
float:left; /*（左側へ移動）浮かせる：左*/
}

#contents{
width:650px; /*横幅：650px*/
background-color:silver;/*背景色をsilverに*/
float:right; /*（右側へ移動）浮かせる：右*/
}
#footer{
width:800px; /*横幅：800px*/
clear:both; /*移動を回避：すべて;これで回り込みを回避します*/
}
</style>

コメントの部分は移さなくてもかまいません。ああ疲れた（記事書きあげの際タブキー使えないんですよ。）

これを埋め込むとこうなるはずです




枠を書く方法もあるのですが、調整がめんどいのでこうしました。これで、目標の形になりました。え、枠と違うって？枠はわかりやすくするために重ねなかったんだよ。重ねたらわからないでしょ？でもブラウザでやるとその枠は重なるの。そしてその枠は実線とか点線とかで書かれないの。これで納得でしょ？
……かなり強引だな

Posted in: HTML