お久しぶりです。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 コメント:
コメントを投稿