外部CSSの入れ子によるWEBページ作成について

2023/08/11 00:46

このQ&Aのポイント

初心者が外部CSS入力による入れ子を用いたWEBページ作成に挑戦中。
画像と題名を含む三つの入れ子を配置したいが、隣に配置できず困っている。
CSSの内容とプログラムを添付。

ベストアンサー

外部CSSの入れ子によるWEBページ作成について

2011/01/27 00:20

私はWEBページ作成に関しては初心者です。現在私は、外部CSS入力による入れ子というBOXを用いたWEBページを作成しています。まず上部に、三つ入れ子を用意し、左右の入れ子にロゴマークのようなものを入れて、中央の入れ子に題名を入れようと思い、一つ目の入れ子に画像を入れ、その隣に新しい入れ子が回ってくるようにしようとしましたが、真下に回るばかりで全く隣に回りません。どうするば良いのでしょうか? そのCSSの内容とプログラムは以下の通りです。 ↓ CSS body{ background-color:#ffebcd; width:1000px;height:900px; } .box1{ padding-top:2%;padding-left:2%; padding-right:2%;padding-bottom:2%; background-color:#7cfc00; width:100px;height:100px; } .box2{ padding-top:3%; background-color:red;color:white; width:800px;height:100px; text-align:center;font:large; } プログラム <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> 　　<title>○○○</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> <body> <div class="box1"> <p> <img src="./images/○○○.jpg" width="103" height="103" alt="○○○.jpg"> </p> </div> <div class="box2"> <h1>a</h1> <p> </p> </div> </body> </head> </html> よろしくお願いします。

NORCINU
お礼率22% (18/80)

CSS
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

naokita
ベストアンサー率57% (1008/1745)

2011/01/27 02:04 回答No.1

divはブロック要素だから、積み木のように重ねる毎に段落になります。回り込みをするには、divの幅を考えて、floatする事。ただ、そんな複雑にする事は一切無く、単純に、 <body> <div id="header"><img><h1>a</h1><img></div> </body> これでも良いし、 ---------------------- headerロゴを２枚じゃなくて１枚に加工して、背景画像とする。 <body> <div id="header"><h1>a</h1></div> </body> body{ background-color:#ffebcd; width:1000px;} #header{ background: url(./images/○○○.jpg) no-repeat 5px 5px; padding: 5px; text-align:center;} #header h1{ whidth:●; margin: 0 auto; background-color:red;color:white;} ---------------- これだけで良いんじゃないのかな？幅で色のデザインが変わるので、header画像の背景色や h1 の幅などは適当に設定してみましょう。

関連するQ&A

CSSがうまく読み込まれません
いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、突然CSSが読み込まれなくなりました。 htmlのソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。どちらもエンコーディングはUTF-8です。ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、プレビューまたはサーバーにアップすると反映されません。なにが原因なのでしょう。。。何卒よろしくお願いいたします。
- ベストアンサー
- HTML
CSSーfloatについて
divの中にp要素を三つ作成して、最初のp要素にfloat:leftを指定しました。結果MacIEとIE6では2番目のpのみ右に並び、3番目のpは1番目のpの下にある状態です。しかも、FirefoxやSafari・Operaでは3つとも縦に並んだままです。単純なミスのようなきがするんですが解決できません。どなたか助けてください。よろしくお願いします。以下のコードです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="box"> <p id="A">AAA</p> <p id="B">BBB</p> <p id="C">CCC</p> </div> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
外部CSSと　HEAD内のCSSの違い
現在、macで Dreamweaver8を使用してHPを作っています。外部のcssがうまく反映されません。そこで、head内に同じcssを入れたところ、きちんと反映されました。どうして違いがでるのか教えてください。『head内に入れた時』 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> body { font-family: "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> 『外部cssの時』 [styel.cssは] body { font-family: "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } [反映されるhtmlは] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> です。誰かお答えくださいませ。
- ベストアンサー
- Mac
CSSでの背景色の指定について
以下のソースで右下に空白ができます。それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。よい方法はないでしょうか？ ■test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }
- ベストアンサー
- CSS
CSS-paddingが反映されません
入れ子にしたCSSなのですが中にいれた方のボックスのpaddingが反映されません。 CSS---------------------------- #main { width:540px; float:left; background-color: #FFFFFF; padding-right: 25px; height: 100%; } #main2 { width:500px; background-color: #FFFFFF; padding-right: 20px; padding-left: 20px; } HTML---------------------------- <div id="main">□□□□□□□□□□□□□ <div id="main2">□□□□□□□□□□□□□</div> </div> 「main2」というボックスの左右に余白を作りたいのです。ご教授ください。
- 締切済み
- HTML
CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。
CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分（.contents）を100%にすると当然、ヘッダ部分（.header）の100px分がはみ出てしまい、サイドメニュー（.side）の下に余白がでてしまいます。これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css">  </style> </head> <body> <div class="header"> header </div> <div class="side"> side </div> <div class="contents"> contents<br /> </div> </body> </html>
- 締切済み
- HTML
css初心者です。プラウザの表示について
以下のような記述を行い、確認為にプラウザに表示させようとしましたが、なぜかsafariではうまくいかずに、googlecromeでは表示されました。どのような事が原因なのでしょうか？よろしくお願いします。 //html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="box1.css" type="text/css"> </head> <body> <div class="box">箱の表示を作ろうと思います。</div> <p class="box2">こちらはどうなのでしょうか？</p> </body> </html> //css @charset "UTF-8"; /* CSS Document */ .box{ border:4px solid #9C3; width:50px; height:60px; padding:15px 15px; margin:50px 0px 0px 50px } .box2{ width:300; height:200; border:3px solid #F33; padding:10px; } よろしくお願いします。
- ベストアンサー
- HTML
xhtml+cssのfloatの使い方、センタリングの方法
xhtml+cssでのプログラミングについて教えてください！初めてxhtml+cssでのプログラミングに挑戦しています。質問したい内容が２つあります。 1.) ページ全体をセンタリング表示したいです。　　(下記ソースのままだと左寄せに表示されてしまいます。) 2.) floatして右側に表示しているボックスの中に　　さらにfloatさせてleft、lightの２つ横並びのボックスを　　配置することは可能でしょうか？　　また、その際の注意点などはございますでしょうか？ --------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> </head> <style type="text/css">  </style> <body> <div id="wrap"> <div id="header"> </div> <div id="side"> </div> <div id="main"> <div class="conte1"> </div> <div class="conte2"> </div> <div class="conte3"> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- 質問のどちらかでも結構です。初心者のため質問の仕方が悪く、ご理解が難しいかもしれませんがどなたかご理解頂ける方は教えてください。
- 締切済み
- HTML
CSSの質問です。
親子枠の関係です。親を縦横300px x 300pxと指定した場合、子に縦横300px x 300pxと指定すると親枠からはみ出るんでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>親子関係</title> <style type="text/css">  </style> </head> <body> <div id="oya"> <div id="kodomo"> </div> </div> </body> </html> 経験者若しくはプロの方のアドバイスを願います。
- ベストアンサー
- HTML
div入れ子による height100%
お世話になります。親要素のdivは縦100%になるのですが、入れ子のdivが縦100%にならず困っております。検証ブラウザは、IE6、IE7、FF2、Safariです。お分かりの方、ご教授をお願いいたします。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>test</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="wrapper-inner"> <div id="contents"> テスト <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </div> </body> </html>
- ベストアンサー
- CSS