HTML.CSSのご理解がある方、至急お願いしたいです。 下記の問題の正解が分からず大変困っています。 ご回答いただける方宜しくお願い致します。
HTML.CSSのご理解がある方、至急お願いしたいです。 下記の問題の正解が分からず大変困っています。 ご回答いただける方宜しくお願い致します。 全体の幅が500px、高さを400pxの大枠（big-box）を作成し、その中に幅500px、高さ100pxのヘッダー部分（header-box）、その下に幅100px、高さ300pxの左枠（left-box）と残りの幅で右枠（right-box）となるカラム構造のレイアウトのWebページを作成する。この時、外部CSSの「hoge.css」とHTMLファイル「test.html」を作成する。 図 1 root/ ├ bin/ ├ usr/ │ └ public_html/ │ ├ bin/ └ lib/ ├picture/ │ └ img.gif ├page/ │ └ test.html └layout/ └hoge.css それぞれの項目の大きさ等はCSSのソース内に記述したコメント文に従うとき、空欄内に適切なソースを記述せよ。なお、CSSの記述を省略した所にはブラウザ毎に異なる初期値が設定されるため、全体を考慮してサイズを設定せよ。 また、必要であれば適切なファイルパスを記入せよ。 CSS側 hoge.css { /*全体を含むボックスのレイアウトのbig-box*/ width: 500px; height: 400px; margin: 0 auto; } #header-box { /*ヘッダー部分となるボックス*/ : solid 2px; /*2pxの太さの枠線*/ height: 96px;} #left-box { /*左側のボックス部分*/ border: dashed 2px; /*枠線を破線で2pxの太さとする*/ : left ; /*左に位置するようにする*/ width : ; height: 296px;} #right-box { /*右側のボックス部分*/ border: dotted 2px; float : right; width : ; height: 296px; } HTML側 test.html側 < > <!--文書宣言はHTML5に従う--> <html lang="ja"> <head> < meta charset="UTF-8" > ここには文字コードの宣言が入る <title>HTMLソース作成</title> <link rel="stylesheet" type="text/css" href=" "> </head> <body> <div id =" big-box "> <!--全体のボックス--> <div ="header-box"> <!--ヘッダ代わりのボックス--> <h1>ヘッダー部分</h1> </div> <div id=" left-box "> <!--左側のボックス--> <h2>左のコラム</h2> <p>本文</p> < > ペアになるhtml要素 <div id=" right-box "> <!--右側のボックス--> <h2>右のコラム</h2> <p>本文 <img src=" " alt="img.gif"> </p> </div> < > ペアになるhtml要素 </body> </html>
HTML、CSS・19閲覧
ベストアンサー
mag********さん >･･･「hoge.css」とHTMLファイル「test.html」を作成･･････ ご参考に↓ 「hoge.css」 #big-box{ /*全体を含むボックスのレイアウトのbig-box*/ width: 500px; height: 400px; margin: 0 auto; } #header-box { /*ヘッダー部分となるボックス*/ width: 496px; border: solid 2px; /*2pxの太さの枠線*/ height: 96px;} #left-box { /*左側のボックス部分*/ border: dashed 2px; /*枠線を破線で2pxの太さとする*/ float: left ; /*左に位置するようにする*/ width : 96px ; height: 296px;} #right-box { /*右側のボックス部分*/ border: dotted 2px; float : right; width :396px ; height: 296px; } 「test.html」 <!DOCTYPE html><!--文書宣言はHTML5に従う--> <html lang="ja"> <head> <meta charset="UTF-8"> <!--ここには文字コードの宣言が入る--> <title>HTMLソース作成</title> <link rel="stylesheet" type="text/css" href="../layout/hoge.css"> </head> <body> <div id ="big-box"> <!--全体のボックス--> <div id="header-box"> <!--ヘッダ代わりのボックス--> <h1>ヘッダー部分</h1> </div> <div id="left-box"> <!--左側のボックス--> <h2>左のコラム</h2> <p>本文</p> </div> <!--ペアになるhtml要素--> <div id="right-box"> <!--右側のボックス--> <h2>右のコラム</h2> <p>本文 <img src="../picture/img.gif" alt="img.gif"> </p> </div> </div> <!--ペアになるhtml要素--> </body> </html>
1人がナイス！しています
質問者からのお礼コメント
本当にありがとうございます。感謝しかありません。
お礼日時：1/20 22:39
