Pages
(移動先: ...)
Home
About
各講座まとめ
脱獄まとめ
▼
2011年6月25日土曜日
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>
こうなっていると、このように表示されるはずです。
※InternetExplorer8で表示
<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>
コメントの部分は移さなくてもかまいません。ああ疲れた(記事書きあげの際タブキー使えないんですよ。)
これを埋め込むとこうなるはずです
枠を書く方法もあるのですが、調整がめんどいのでこうしました。これで、目標の形になりました。え、枠と違うって?枠はわかりやすくするために重ねなかったんだよ。重ねたらわからないでしょ?でもブラウザでやるとその枠は重なるの。そしてその枠は実線とか点線とかで書かれないの。これで納得でしょ?
……かなり強引だな
0 件のコメント:
コメントを投稿
‹
›
ホーム
ウェブ バージョンを表示
0 件のコメント:
コメントを投稿