CSSを使って枠を作成する方法
- body内にdiv#mainに750pxの枠を作成する方法
- div#wakuを使って左側に250pxの枠を作成する方法
- div#waku1を使って右側に500pxの枠を作成する方法
- ベストアンサー
cssを使って枠を作成したく以下の記述をbodyの中にしました。
cssを使って枠を作成したく以下の記述をbodyの中にしました。 div#main{margin-left:auto;margin-right:auto;width:750px;} これによりbodyの中に750pxの枠が出来ましたが、その枠を更に2等分したく、以下の記述をしました。 div#waku{margin-left:auto;margin-right:0px;width:250px;background-color:#ccffff;} これにより枠の左側に250pxの枠が出来ました。 更にその右側に500pxの枠を作成したく以下の記述をしました。 div#waku1{margin-left:0px;margin-right:auto;width:500px;} これにより枠の右側に500pxの枠が出来ました。 それぞれの枠の中に、画像を挿入するためにdiv#wakuの中に、以下の記述をしました。 <p class="img"> <img src="img/test.gif" alt="テスト" width="200" height="999" /></p> 次に div#waku1の中に、以下の記述をしました。 <p class="img"> <img src="img/test.gif" alt="テスト" width="550" height="999" /></p> 私は、左右対称になると思ったのですが、なかなかうまくいきません。 私は、750pxの枠を作りその枠の中で左側に200pxの枠、右側に550pxの枠を作成して、更に左側枠の背景色のみ変更し、左側の枠、右側の枠、それぞれに画像やテキストを、ページ一番上から入れていきたいのですが、なかなかうまくいきません。 どなた様か、ご指導のほどよろしくお願いいたします。
- pcckit
- お礼率76% (472/621)
- HTML
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ようするに2カラムのレイアウトにしたいってことみたいですね。 だとしたら、まずDIV要素はブロック要素だということを理解しておきましょう。 ブロック要素は段落など文書を構成する基本要素で、特徴としては必ず下に回りこみます。 このことは、おそらくどの回答者さんも「質問者さんが理解している」ことを前提に回答すると思いますので混乱を招いているのかと思います。 ちなみにブロック要素を左右に並べたい場合はfloatする（浮かべる）方法やインライン要素として指定する方法などがあります。 これについてはすでに回答が出ているのでここで詳しくは書きません。 ＞これによりbodyの中に750pxの枠が出来ました 「枠」というのは通常「ボーダー（border）」のことかと思います。ボーダーとは境界のことで、ラインのことかな？と思ってしまいます。 ＞その枠を更に2等分したく ＞私は、左右対称になると思ったのですが 「2等分」や「左右対称」と聞くと普通、二つが同じ大きさで対になった状態だと思います。左右の幅や中身が違うのならこの文章は不思議すぎます。 ＞ これにより枠の右側に500pxの枠が出来ました。 ＞ <img src="img/test.gif" alt="テスト" width="550" height="999" /> 幅500pxの要素に幅550ｐｘの画像を入れる意図は分かりませんが、こうすれば要素の幅は550ｐｘ以上になり親要素の幅を超えてしまいます（250+550＞750）ので、たとえfloatしても収まりきらないためカラム落ちする（下へ回り込む）でしょうね。 あと、＃１さんの回答の<p>要素へ画像を内包することに問題があるのか分かりませんが、 環境により<p>要素にはデフォルトマージンがあるため、さらに幅が広がってしまいます。そのことにも注意して画像のサイズを指定しましょう。 ＞750pxの枠を作りその枠の中で左側に200pxの枠、右側に550pxの枠を作成して、更に左側枠の背景色のみ変更し、左側の枠、右側の枠、それぞれに画像やテキストを、ページ一番上から入れていきたい これについては多くのサイトがサンプルやチュートリアルを掲載しています。「2カラム」「レイアウト」などで検索して参考にしてみてください。
その他の回答 (3)
- sora1tora2
- ベストアンサー率69% (27/39)
はじめまして。 もう解決しているかもしれませんが一応回答させてもらいます。 こんな感じでしょうか？ <head> <style type="text/css"> *{ margin: 0px; padding: 0px; } body { margin: 0px; padding: 0px; } img { margin: 0px; } #main { margin: 0px auto; padding: 0px; width: 750px; } #waku { margin: 0px; padding: 0px; width: 250px; float: left; background-color: #ccffff; } #waku1 { margin: 0px; padding: 0px; width: 500px; float: right; background-color: #ffffcc; } #waku .box { margin: 0px; padding : 0px; width : 250px; } #waku1 .box { margin: 0px; padding: 0px; width: 500px; } </style> </head> <body> <div id="main"> <div id="waku"> <div class="box"> <img src="img/test.gif" alt="テスト" width="250" height="999" /> <!--//img--></div> <!--//waku--></div> <div id="waku1"> <div class="box"> <img src="img/test.gif" alt="テスト" width="500" height="999" /> <!--//img--></div> <!--//waku1--></div> <!--//main--></div> </body> 望まれている事かは解りませんが、試してみてください。
お礼
sora1tora2様。 この度は、的確なご指導大変ありがとう御座いました。 私もcssのことは実は未だに勉強中で半信半疑の成せいか、きちんとした説明も出来ずに、皆様を 混乱させてしまいました。本当にありがとう御座いました。とても参考になりました。 また、ご縁がありましたときはよろしくお願いいたします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
さっぱり、意味がわかりません。 ＞これによりbodyの中に750pxの枠が出来ましたが、その枠を更に2等分したく、 以下の記述をしました。 ^^^^^^^^^^^^^^^^^^^^^ だと、375px と375pxのはずなのに、 ＞div#waku＊＊＊＊これにより枠の左側に250pxの枠が出来ました。 ？？？？？？ ＞div#waku1＊＊＊＊＊これにより枠の右側に500pxの枠が出来ました。 とあり、さらに ＞div#wakuの中に、以下の記述をしました。 ＞＊＊＊<img ＊＊＊＊＊width="200 ＞div#waku1の中に、以下の記述をしました。 ＞＊＊＊<img ＊＊＊＊＊width="550" あれ、さっきは、250px と 500pxじゃなかったの？？
お礼
うまく説明が出来ずに混乱させてしまいました。 どうもすいませんでした。 また、ご縁がありましたときはよろしくお願いします ありがとう御座いました。
- totomac
- ベストアンサー率53% (53/99)
とりあえず、ボックス構成だけですが、 #main { width: 750px; margin-right: auto; margin-left: auto; } #waku { width:250px; background-color:#ccffff; float: left; } #waku1 { width:500px; float: right; } >私は、左右対称になると思ったのですが、なかなかうまくいきません。 ???意味不明です。 あと、なんでimgを<p>で囲むのか、分かりません。 classにimgと付けるのも、良くないかと・・・。
お礼
totomac様。 この度はご指導ありがとう御座いました。 また、ご縁がありましたときはご教示のほどよろしくお願いいたします。
関連するQ&A
- cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくい
cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくいかないところがあり、質問をさせて頂きますのでどなた様かご指導のほどよろしくお願いいたします。 ［css］ <div id="main"> border: solid 2px #d3d3d3; margin-left:auto; margin-right:auto; width:780px; <div id="waku1"> width:170px; border: solid 3px #d3d3d3; padding-left:0px; padding-top:3px; padding-bottom:3px; margin-top:3px; margin-bottom:0px; background-color:#ccffff; <div id="waku2"> width:600px; border: solid 3px #d3d3d3; text-align:right; margin-left:auto; margin-right:0px; float:left; } 私としては780pxで作成した枠の中に、左側に170pxの枠を作成して、その右側に、600pxの枠を作成したかったのですが、何かがきっと問題なようで、うまくいきません。 どなた様か、ご指導のほどよろしくお願いいたします
- ベストアンサー
- HTML
- cssを使って枠の設定をしたく以下の記述をしましたが、一部うまくいかな
cssを使って枠の設定をしたく以下の記述をしましたが、一部うまくいかないところがあり、質問をさせて頂きますのでどなた様かご指導のほどよろしくお願いいたします。 ［css］ <div id="main"> border: solid 2px #d3d3d3; margin-left:auto; margin-right:auto; width:780px; <div id="waku3"> width:200px; border: solid 3px #d3d3d3; background-color:red; <div id="waku7"> width:570px; border: solid 3px #d3d3d3; float:left; } 私としては780pxで作成した枠の中に、左側に200pxの枠を作成して、その右側に、570pxの枠を作成したかったのですが、何かがきっと問題なようで、うまくいきません。 どなた様か、ご指導のほどよろしくお願いいたします 感じとしては以下のような感じで御座います。 http://desktop10.web.fc2.com/ どなた様か、ご教示のほどよろしくお願いいたします。
- ベストアンサー
- HTML
- cssの記述について
よろしくお願いします。 0ピクセル×20ピクセルの画像を左側に表示させて、その右側に 文字を入れたいと先日ご質問させて頂いたところ、他の方が下記の 記述をご丁寧に作成していただけました。 確かに、その際画像は下記のように表示されましたが他の画像を 表示させたく以下の画像ファイル名を変更したところ表示されなくなってしまいました。 なお、その際backgroundに指定した画像も表示されなくなってしまいました。 (img/ani059.gif); ←ここを変更しました 例）■テスト テスト1 ■テスト2 テスト3 .ulfont1 {color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; margin-left: -20px; } .ulfont ul1 {list-style-position: outside; list-style-image: url(img/ani059.gif); ←ここを変更しました background-image: url(img/mark.png); } 画像を変えようとすると上記の記述もファイル名以外どこかを変える必要があるのでしょうか？ お手数では御座いますが、ご指導の程よろしくお願い致します。 700pxの枠を作成してありますが、その中に更に500px程度の枠を作成して、その 枠を二分割や四分割などはできるものでしょうか？ 例）日や田など・・・ どなた様か、ご指導のほどよろしくお願いいたします。
- ベストアンサー
- その他（プログラミング・開発）
- CSS記述。
ようやくcssを理解してきた若輩者です。 お世話になります。 どーしても、下記のdiv要素が中央に配置できません。。。 どなたか詳しい方、正解をお願いします～～。 margin: 0 auto; で記述しても中央にならず 例えば、margin-left: 100pxとかにすると 左から100pxは動きます。 .ngg-galleryoverview { overflow: hidden; margin-top: 10px; margin:0 auto; width: 945px; clear:both; display:block !important; } .ngg-galleryoverview .desc { /* required for description */ margin:0px 10px 10px 0px; padding:5px; }
- ベストアンサー
- CSS
- CSSを用いた角丸の枠（フタ－中身－底）の作り方を教えてください。
こんにちは。 こんな角丸の作り方が知りたいです。 フタ（画像） ┌─────┐（実際は角丸の画像） 中身（左右の罫線）│ │ 底（画像） └─────┘（実際は角丸の画像） 下に記載したタグでやってみたところ、IE6ではうまく表示されますが、Firefoxでは、フタ部（底部）と中身部の間が空いてしまいます。 ◆HTML <div id="container-top"><img src="img/container-top.gif"> </div> <div id="container">本文テキストがつづく。。。 </div> <div id="container-bottom"><img src="img/container-bottom.gif"> </div> ◆CSS div#container-top{ width:750px; height:10px; margin:0 auto; padding:0; } div#container{ width:750px; border-left:1px solid #cccccc; border-right:1px solid #cccccc; margin:0 auto; padding:0; } div#container-bottom{ width:750px; height:10px; margin:0 auto; padding:0; } どうぞよろしくお願いいたします。
- 締切済み
- ホームページ作成ソフト
- cssレイアウトで表を作成したいです。
添付した画像の様な表組みをテーブルタグを使用せずに作成するのは可能なのでしょうか？ もしくは表はテーブルタグを使用したほうが、ソースの量は少なくて済むのでしょうか 全体を囲うBoxAは"height:auto;"を指定してボックスBoxBのテキストの量によって可変する。BoxCのテキストは常にBoxBの最下行と揃える。 /*css*/ .BoxA{ width:490px; height:auto; margin:0px auto 10px auto; background-color:#999999; border:solid #999999 1px;} .BoxA .BoxB{ width:350px; height:auto; margin:0px; padding:5px; float:left; background-color:#fffbfb;} .BoxA .BoxC{ width:129px; height:auto; margin:0px; padding:0px; float:right; background-color:#fffbfb; } .clearfloat { clear:both;} <!--ソース--> <div class="BoxA"> <div class="BoxB"> <p>■■■■■■■■■■<br /> ■■■■■■■■■■<p/> </div> <div class="BoxC"> <p style="margin:auto 0px 0px;">■■■■■■■■■■</p> </div> <br class="clearfloat" /> </div>
- ベストアンサー
- HTML
- HTMLとCSSの記述で表示がうまくされません
現在HTMLとCSSを使ってウェブのページを作っているのですが どうしても思ったように表示が出来ません。 HTMLの他にCSSの記述を記載致しました。 なにが出来ないかと申しますと 下記の <p class="section"> <h2>解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマルが解決できる方法!!</font> 心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">aaaaa</font>対処法とは？ </p> 記述部分を枠の中に入れたいのですが、どうしても外に出て表示されてしまいます。 どなたか解決方法をご存知の方はお教え頂けないでしょうか？ HTMLの記述がこちらになっております。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <meta http-equiv="Content-Type"content="text/html;charset=shift_jis"/> <head> <title>aaaa</title> <meta http-equiv="description"content="bbbb"> <meta http-equiv="keywords"content=""> <link rel="stylesheet" type="text/css" href="index.css" media="all"> </head> <body> <p class="head"><span lang="en"></span></p> <h1></h1> <div class="img"><img src="header.gif" alt="" width="800" height="165"></div> <div class="menu"> <a href="index.html"><img src="navi_top.gif" width="195" height="35" alt="top"></a> <a href="02.html"><img src="navi_ijime.gif" width="195" height="35" alt=""></a> <a href="03.html"><img src="navi_shokuba.gif" width="195" height="35" alt=""></a> <a href="04.html"><img src="navi_plofile.gif" width="195" height="35" alt=""></a> </div> <p class="section"> <h2>解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマルが解決できる方法!!</font> 心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">aaaaa</font>対処法とは？ </p> <p class="text_bg"> <div class="text">text</div> </p> </body> </html> CSSの記述がこちらになっております。 body{ text-align:center; width:800px; } p{ text-align:center; font-size:0.85em; color:#333333; } p.head { font-size:0.6em; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight:bold; color:#666666; text-align:left; margin-bottom:0px; } .img{ margin-top:0; margin-bottom:0; } .menu { padding-left:1px; margin-bottom:0; margin-top:0; } h1{ font-size:0.5em; display:none; } h2{ font-size:0.5em; display:none; } h2 img{ vertical-align:middle; } .mark{ margin-right:10px; } .section{ font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; margin-bottom:0px; margin-top:0px; background-image:url(back_01.gif); background-repeat:no-repeat; width:800px; height:165px; color:#666666; font-size:1em; } p.01{ text-align:center; font-size:1.05em; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } p.text_bg{ background-image:url(back_02.jpg); background-repeat:no-repeat; margin-top:10px; width:800px; height:365px; } .text{ margin-top:10px; text-align:center; }
- ベストアンサー
- HTML
- CSSでページ作成、Firefoxでうまく表示できません
ご教授いただけますでしょうか。 CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。 内容は、大枠の中に、ヘッダーと左右のフロート（左：メニュー、右：内容）のシンプルなデザインです。 以下、CSS部分です。 /* 大枠 */ #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-size: 13px; border-left: 1px #663333 solid; border-right: 1px #663333 solid; border-top: 1px #663333 solid; border-bottom: 1px #663333 solid; padding: 5px; text-align: left; } /* ヘッダー */ .header { width: auto; height: auto; background: url(img/header.jpg) repeat-x; margin: 0px; } /* メニュー */ .left { float:left; width:20%; background-color:#ffffff; padding: 5px; } /* 内容 */ .right { float:right; width:75%; background-color:yellow; padding: 5px; } ここからHTMLに書き込んだものです。 <div id="container"> <div class="header"> ヘッダー </div> <div class="left"> メニュー </div> <div class="right"> 内容 </div> </div> Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。 どこがおかしいか、ご指摘いただければ幸いです。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- CSS
- HTML、ＣＳＳ が、なかなかうまくいきません。
お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。
- 締切済み
- CSS
- 画像を二枚使ったロールオーバーについて質問をさせて頂きたいのでお願いし
画像を二枚使ったロールオーバーについて質問をさせて頂きたいのでお願いします。 画像が二枚あり一枚は通常時に表示されるようにしたと考えております。参考までにその画像は以下になります。よろしければ見てみてください。なお一枚目の画像ファイルは img/1.gifといいます。 http://desktop10.web.fc2.com/1.gif 次にマウスを重ねたときに表示されるようにしたい画像が以下になります。 なお二枚目の画像ファイルはimg/11.gifといいます。 http://desktop10.web.fc2.com/11.gif そこで私は「html」の部分に以下の記述をしました。 <div id="waku1"> <div> <a href="index.html/"><img src="img/1.gif" width="108" height="48" alt="*" /></a> </div> </div><!-- waku1 end --> 次に、「css」に以下の記述をしました。 #waku1 div{ width:109px; background:url(img/1.gif); height:48px; float:left; border: solid 1px #d3d3d3; } #waku1 a{ display:block; width:100%; height:100%; text-decoration:none; } #waku1 a:hover{ background:url(img/11.gif); } 上記のようにしてブラウザ上で確認をしたところ、780pxの枠の中に隙間無くぴったりと収まったのですが 該当の画像にマウスポインタを合わせたところ、11.gifの画像に変わってくれません。ただ少し気になった点は、マウスポインタをあわせたときに画像の隙間から赤い線がわずかに見えました。・・ ですが、11.gifのように画像にしっかりと表示できません。私には全くわからないのですが、どなた様かご教示をいただけませんでしょうか？ どうかご指導のほどよろしくお願いいたします。
- ベストアンサー
- HTML
お礼
Sylar様。 この度は、的確なご指導大変ありがとう御座いました。 私もcssのことは実は未だに勉強中で半信半疑の成せいか、きちんとした説明も出来ずに、皆様を 混乱させてしまいました。本当にありがとう御座いました。とても参考になりました。 また、ご縁がありましたときはよろしくお願いいたします。