- 締切済み
コンテンツを真ん中に縦線を左右に引くには？
いつもお世話になりありがとうございます。 標記の件。 CSS .v_line_fix { margin-left: 100px; width: 5px; height: 150px; background-color: brown; } HTML <div class="v_line_fix"></div> だと、単独で縦線が引かれてしまいます。 https://cc.musabi.ac.jp/kenkyu/cl1/html5/css_lay03.html 上記のホームページの様に、また https://okwave.jp/question/new の様に、コンテンツを中央に区切るには どうしたらいいでしょうか？ ご回答のほど宜しくお願い申し上げます。
- KOUZOU2
- お礼率25% (25/100)
- HTML
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- AsarKingChang
- ベストアンサー率46% (3467/7472)
色々やり方があるので、適材適所で ＣＳＳ選んでみてくださいね。 どっちにしても、PC/SP対応やメディアクエリなども やり始めると、奥はかなり深いので。 人によって画面のサイズは違うので、 ピクセルでは、表せない世界だってのを な～んとなく、感じてもらえたらいいかなって感じ。 あと、centerタグがありましたが。これ 上のdivにtext-align:center;って書くだけで省略できるなども。 ちなみ、DIVじゃなくてSPANなら、CENTERタグ受け付けるので、 簡単に真ん中表示できるとも言えます。 あんまりきれいじゃないHTMLになるので、大抵はやらないけど。 表示結果だけあえばそれでいいなら、 時に別のタグを試してみるのは、全然ありですよ。 なので、やり方がいくつもあるうちの一つを 書いたに過ぎないので、ほかの方法も試してみても よいかとおもいます！。 なおさっきのやり方は 大きく箱を書いて、両サイドを残したままで 別の色でセンタリングされた箱を上に重ねてる ＝つまり両サイドに線が描かれたように見える。 のやり方です。 なので、左側だけに、付箋のように色を付ける？ って時は、右側の線を取るだけで完成。 使い道は結構あるので、気が向いたら使ってみてもらえたらです。 borderを使うと「三角」になるので、今回はやめました。 ってことで、今回はこれにて、失礼しますわ。
- AsarKingChang
- ベストアンサー率46% (3467/7472)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>プログラムOffice</title> <style> .v_line_fix { margin:auto; padding-left:10px; padding-right:10px; background-color: brown; } .v_line_fix .w { margin:auto; background-color: red; white-space: pre; } body{ width: 100%; max-width: 600px; margin: auto; background-color: aquamarine; padding: 10px; text-align: center; color: purple; } div{ /*color: blueviolet; font-size: 30;*/ *} body{ margin-top: 10px; margin-bottom: 70px; } .box21{ padding: 0.5em 1em; background: -moz-linear-gradient(#ffb03c, #ff708d); background: -webkit-linear-gradient(#ffb03c, #ff708d); background: linear-gradient(to right, #ffb03c, #ff708d); color: rgb(5, 4, 4); } .box21 p { margin: 0; padding: 0; } </style> <script> function alertFunction1() { alert("粋な会社で、素敵なＷＥＢサイトを提供致します。"); } </script> </head> <body> <div class="v_line_fix"> <div class="w"> <center> <h1>プログラムOffice</h1> <h3>プログラムOfficeの強み</h3> <div class="box21"> <p> JavaScriptによる高速プログラミング<p> お客様本位で何度でも作り直します！<p> 誠実・質実剛健<p> 業界一位の安値！<p> 親切・丁寧！ </p> </div> <br> <a href="https://www.yahoo.co.jp/">Yahoo Japan</a><p> <a href="https://www.google.com/">Google 検索</a><p> <a href="https://www.apple.com/jp/iphone/">iPhone</a><p> <a href="https://www.apple.com/jp/mac/">Mac</a><p> <br> <h1><a href="https://www.shutterstock.com/ja/search/%E9%95%B7%E5%B4%8E%E5%B8%82"> 長崎画像集・ご覧ください。</a></h1><p> <img src="minato.jpg"><br><br><br><br> <img src="ryouma.jpg"><br><br><br> <h2>プログラムOfficeを一言でいうと？</h2> <p><button onclick="alertFunction1()">ボタンを押して下さい</button></p> </center> </div> </div> </body> </html> 最初の回答と同じで、セレクタで分けただけです。 padding-left:10px; padding-right:10px; background-color: brown; 左右の太さと、線の色を選択。 こんだけで、OKです。 なお、左右で色を変えたい！って時も、 左だけのDIVを形成、その中に右だけのDIVを形成、 その中に本文エリアを配置すればいい。 というだけです。 実際は、position使うほうが早そうですが・・・ おまけ： 「お客様本位で何度でも作り直します！」 要件定義がしっかりできないってニュアンスを与えると思いますよ。 質問者さんはいい意味で書いたつもりがマイナスになってるかと。 顧客の立ち位置で、考えてみてください。 「何度も作り直される」って意味で、むしろ評価は下がるかと。 んま、がんばって！
- AsarKingChang
- ベストアンサー率46% (3467/7472)
[code] <div~~~~> </div> の中に既に<div></div>が存在します。 中央寄せも縦線も引かれません。 [/code] CW風ですが＾＾OKWAVEは未対応 先ほどのやつをセレクタで分ければいいだけではあるものの。。 今、何か補足が確認中なので、後で再度確認しますが、 2度手間になるので、 今どんなソースで、最終的にどうしたいのか？を 書いてもらえた方が話がすぐ終わりますよ。 確認終了を待つ間、これらを補足してみるのはどうでしょう？ 特に催促はしないので、おまかせですが。
- AsarKingChang
- ベストアンサー率46% (3467/7472)
<style> .v_line_fix { margin:auto; width: 150px; height: 150px; background-color: brown; } .v_line_fix div { margin:auto; width: 100px; height: 150px; background-color: red; white-space: pre; } </style> <div class="v_line_fix"> <div> あいうえお かきくけこ </div> </div> こんな感じで。 大枠150と小枠100の差に色がついてるので、 それで太さの調整をすればOK 結果的にCENTERタグのように動作するので、 使い勝手はいいかと。
- AsarKingChang
- ベストアンサー率46% (3467/7472)
>コンテンツを真ん中に縦線を左右に引くには？ 左右に引くのではなく、 左右に線があるものをセンターに表示すればOK ここ、「左右に」って言ってるのに、"left"と書いてます。 margin-left: 100px; そうではなく、両サイドに対して均等なマージンを設定。 margin: auto; 後は、両サイドに線がある表示物を <div class="v_line_fix"></div> の中に作ればOK。 なお、線だけでいいなら、このDIVの左右に paddingを設定してそれに色を付ければ 完成だろうが、最終結果をどうしたいのかわからないので、 質問の部分のみ回答。
関連するQ&A
- コンテンツの高さに合わせた縦線を引きたい
コンテンツ部分の高さに合わせた縦線を引きたいのですが、どうも上手く実現する 方法が思い浮かびません。 コンテンツは表示するページによって高さが異なります。 CSSを利用することは何ら問題ありませんが、JavaScriptでwindow.load()イベントなどで 記述するのはちょっと避けたいです。 あくまでレイアウトということで・・・。 今縦線はこんな感じで作られてます。 #splitter {width:0px; height:485px; border:solid 2px #e5ecf9;overflow:hidden; border-top:none; border-bottom:none; background:#e5ecf9; float:left; margin-right:10px} <div id="splitter"></div> divだと無理なんでしょうか・・・？ ご教示下さい。
- 締切済み
- HTML
- Firefoxで真ん中に表示されない
こんにちはCSSでの疑問なんですが下記のように コードを書いて、CSSで"H"のボックスを"F"のボックスの真ん中に 表示されるようにしたいのですが、IE6では表示されるのですが Firefox2では左右は真ん中にあるのですが、上下が動きません。 ご教授おねがいします。 <body> <div id="F"> <div id="H"> </div> </div> </body> #F { background: #000000; height: 200px; width: 200px; } #H { background: #33CCCC; height: 100px; width: 100px; margin: 50px auto 0px; }
- 締切済み
- CSS
- 左右の高さを揃えたいんですが
css.divのみでレイアウトする勉強中です。 テーブルのように表示内容によって変化する左右の要素の高さを 揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>
- ベストアンサー
- HTML
- 背景の色がコンテンツ部分にも表示されてしまいます
サイトに背景色をつけて、コンテンツ部分は白にしたのですが、どうしても背景色が表示されてしまいます。今はbody以外の各divの背景を白にしていますが、contentsの右下が背景色が表示されてしまします。 お手数ですが、ご指摘頂けると幸いです。よろしくお願いいたします。 <html> <body> <div id="wrapper"> <div id="header"></div> <div id="contents"> <div id="banner"></div> <div id="navi"> <h2><a href="../service/index.html"><em>あああ</em></a></h2> 中略 </div> <div id="bread"><a href="index.html">トップページ</a> > あああ</div> <div id="main"> <p>あああ</p> </div> <div id="sidenavi"> <h3>あああ</h3> <p>あああ</p> </div> <div id="pagetop"><a href="#"></a></div> <div id="footer">Copyright (c) 2009 All Right Reserved </div> </div> </body> </html> <css> body { text-align: center; margin: 0px; padding: 0px; background: #FFCCFF; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 850px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; height: auto; width: 850px; background: #FFFFFF; } #contents #banner { background: url(image/banner.jpg) no-repeat; margin: 0px; padding: 0px; height: 304px; width: 850px; } #contents #navi { background: url(image/menu.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #contents #navi2 { background: url(image/menu2.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #navi h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi em { visibility: hidden; } #navi2 h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi2 em { visibility: hidden; } #contents { margin: 0px; padding: 0px; height: 500px; width: 850px; background: #FFFFFF; } #contents #sidenavi p { font-size: 95%; line-height: 1.1em; margin-right: 5px; margin-left: 5px; } #sidenavi h3 { font-size: 105%; font-weight: bold; border-left: 7px solid #FF3366; padding-left: 5px; background: #FFCC33; margin: 0px; padding-top: 5px; padding-bottom: 5px; } #navi a { margin: 0px; padding: 0px; height: 61px; width: 169.5px; display: block; text-decoration: none; } #navi2 a { margin: 0px; padding: 0px; height: 61px; width: 170px; display: block; text-decoration: none; } #contents #main { margin: 10px 0px 0px; padding: 0px 10px 10px; height: auto; width: 610px; float: left; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "メイリオ"; background: #FFFFFF; } #contents #pagetop { clear: both; background: #FFFFFF; margin: 0px; padding: 0px; } #contents #sidenavi { margin: 10px 5px 0px 0px; padding: 0px; float: right; width: 200px; border: 1px dashed #FF3399; background: #FFFFFF; } #footer { font-size: 90%; color: #FF3366; text-align: center; margin: 0px; padding: 10px 0px 0px; clear: both; border-top: 1px dotted #333333; border-right-color: #333333; border-bottom-color: #333333; border-left-color: #333333; background: #FFFFFF; } #main p { font: bold 120% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #FF3399; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #pagetop img { text-align: center; padding-top: 10px; margin: 0px; padding-bottom: 10px; padding-left: 5px; } .p1 { font-size: 130px; color: #FF3366; padding: 10px; width: 590px; border: 2px dashed #FF3399; background: #FFCCFF; margin: 10px; text-align: center; } #main img { margin: 0px; padding: 0px 0px 10px; } #contents #bread { margin: 5px 0px 0px; padding: 5px 5px 0px 10px; font-size: 100%; width: 830px; }
- 締切済み
- HTML
- DIVの入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- 締切済み
- HTML
- CSSで、リストでGlobalNavigation(画像ボタン)を作り、CSSでのRollOverと上下の隙間を消す方法
CSSでのWebサイト制作するのは二度目なので壁ばかりです。 リストでGlobalNavigation(画像ボタン)を作ります。 このとき、 [1] CSSでのRollOverをさせる方法(JavaScript非使用) [2] GlobalNavigation画像ボタンとボタンの間の隙間を消す方法(左に縦にボタン群を並べるので) を探しております。どのようにすればいいでしょうか？ ネットサーフして片っ端から現在調べ中ですがなかなかありそうで無く・・・ 以下、ソースです。 HTML】 <div id="wrapper"> <div id="hdr-all"> <div id="hdr-area"> <div id="hdr-vi"> <h1><img src="../img/share/hdr_vi.gif" alt="サイト名" /></h1> </div> ヘッダーエリア</div> <div id="hdr-line"></div> </div> <div id="main-all"> <div id="main-area"> <div id="nv-global"> <ul> <li><a href="index.html"><img src="../img/share/nv_lft01.gif" alt="ホーム" width="177" height="55" id="Image1" /></a></li> <li><a href="../corp/index.html"><img src="../img/share/nv_lft10.gif" alt="会社情報" width="177" height="55" id="Image10" /></a></li> </ul> </div> <div id="main-area-cts"> <table width="557" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="../img/share/cts_frm_top.gif" width="557" height="21" /></td> </tr> <tr> <td width="21" background="../img/share/cts_frm_lft.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td> <td width="515" height="500" valign="top" bgcolor="#F6F6F6">コンテンツエリア</td> <td background="../img/share/cts_frm_rht.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td> </tr> <tr> <td colspan="3"><img src="../img/share/cts_frm_btm.gif" width="557" height="21" /></td> </tr> </table> </div> </div> <div id="main-line"></div> <div id="ftr-all"> <div id="ftr-area">フッターエリア</div> <div id="ftr-line"></div> </div> </div> </div> 【CSS】 body { margin: 0 auto; background: #5ca786; font-family: "Osaka"; font-size: 12px; letter-spacing: 1px; line-height: 150%; color: #333333; } #wrapper { margin: 0px auto 0px auto; width: 100%; height: 100%; background: #333333;/*Total BG Color*/ text-align: left; } #hdr-all { margin: 0px 0px 0px 0px; width: 100%; height: 112px; background: #a2d8c0; } #hdr-area { margin: 0px 0px 0px 0px; width: 749px; height: 112px; background: url(../img/share/bg_hdr.jpg) no-repeat; float: left; } #hdr-line { margin: 0px 0px 0px 0px; width: 1px; height: 112px; background: url(../img/share/line_rht.gif); float: left; } #main-all { margin: 0px 0px 0px 0px; width: 100%; height: 100%; background: #5ca786; } #main-area { margin: 0px 0px 0px 0px; width: 749px; height: 100%; background: #266e4e; float: left; overflow: auto; } #main-line { margin: 0px 0px 0px 0px; width: 1px; height: 100%; background: url(../img/share/line_rht.gif) repeat-y; float: left; } #nv-global { top: 5px; left: 0px; margin: 5px 0px 0px 5px; width: 177px; padding-bottom: 30px; background: #7bb395; float: left; } #nv-global ul { } #nv-global li{ } #main-area-cts { top: 5px; left: 187px; margin: 5px 0px 0px 0px; width: 557px; padding-bottom: 30px; background: #266e4e; float: left; } #ftr-all { margin: 0px 0px 0px 0px; width: 100%; height: 150px; background: #FFFFFF; } #ftr-area { margin: 0px 0px 0px 0px; width: 749px; height: 150px; background: #FFFFFF; float: left; } #ftr-line { margin: 0px 0px 0px 0px; width: 1px; height: 150px; background: url(../img/share/line_rht.gif) repeat-y; float: left; }
- ベストアンサー
- HTML
- javascript cssの値を取得、変更
タイトルの通りですが、javascriptにてcssの値を取得することはできますでしょうか？ 考えている機能は、URLを指定するtextboxがあり、そこに入力したURLのボックスを解釈し、分解してmarginやpadding、border、width、height、合計縦幅、合計横幅…といった情報を出してくれる。その際できればcssで指定のないものも表示したい。いらない要素は破棄。 例： <html><style type="text/css"> #wrap{ width:250px; height:300px; margin:5px 10px; padding:10px 5px; } #hoge{ width:250px; height:50px; border:5px solid; } #moge{ width:100px; height:150px; margin:5px 10px; padding:10px 5px; } </style> <body> <div id="wrap"> <div id="hoge"> <ul> <li>aaa</li><li>bbb</li> </ul> </div> <div id="moge"> <img src="dammy1.gif" /> <img src="dammy2.gif" /> </div></div> </body></html> 適当ですけど、こんな感じだったら、 <html><style type="text/css"> #wrap{ background:#333; width:250px; height:300px; } #hoge{ background:#666; width:250px; height:50px;} #moge{ background:#999; width:100px; height:150px; } </style> <body> id名<br /> #wrap<br /> #hoge<br /> #moge<br /> … <div id="wrap"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="hoge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="moge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> </body></html> こんな感じにしてhtmlを吐き出す。 そんなことは可能でしょうか？少し大変になっても可能なら頑張って作ろうと思っています。よろしければ教えていただけないでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
- コンテンツとコンテンツの詰まり
Windows XP あるいは8 HTML 4.01 コピー ～ TOP.html copyTOP.css あああああ と いいいいいの間隔はあいているのに いいいいい と うううううの間隔はなぜか詰ってしまっています。 間隔を空けるにはどうしたらいいでしょうか？ コードは以下の通りです。 [ HTML 側 ] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="～"> <title>aaaaaaaaaa</title> <link rel="stylesheet" href="copyTOP.css" type="text/css"> </head> <body> <div id="zentai"> <div id="part"> <p class="title">あああああ</p> <div id="partnerwaku"> <div id="partnerimage"> <a href="" alt="のロゴ" class=""></a> <a href="" alt="のロゴ" class=""></a> <a href=""><img src=".gif" alt="のロゴ" class=""></a> <a href=""><img src=".jpg" alt="のロゴ" class="A"></a> <a href=""><img src=".jpg" alt="のロゴ" class=""></a> </div> </div> </div> <div id="PR"> <PR> <br> <div id="PRsection"> <br> <a href=""> <img src="" alt="" class="PRimage01"></a> </div> </div> <div id="PR2"> <br> <PR> <br> <div id="PRsection2"> <br> <a href=""> <img src="" alt="" class="PRimage02"></a> </div> </div> <div id="columnwaku"> <div id="columnbun"> <p class="title">いいいいい</p> <div id="columncontents"> <p><a href=""><img src =".jpg" class="columnarticle01"></a></p> </div> </div> </div> <br> <br> <br> <br> <div id="PR3"> <br> <PR> <br> <div id="PRsection3"> <br> <a href=""><img src="" alt="" class="PRimage03"></a> </div> </div> <br> <br> <br> <br> <br> <div id="questionnairesection"> <div id="questionnaire"> <p class="title">ううううう</p> <div id="questionnairecontents">えええええ</div> </div> </div> <div id="PR4"> <br> <ddd> <br> <div id="PRsection4"> <br> <a href=""> <img src="" alt="" class="PRimage04"></a> </div> </div> <div id="pagetop"> <br> <br> <a href="#logoimage">ページの先頭へ▲</a> </div> <hr class="beforefooter"> <div id="aboutus"> <div id="aboutussection"> <p class="aboutustitle">管理会社</p> <p><a href="Aboutus.html"><img src ="Aboutus.jpg" class="aboutusimage"></a></p> </div> </div> <br> <br> <hr class="beforefooter"> </div> <!--全体のdiv--> </body> </html> [ css側] @charset "Shift_Jis"; body { overflow-y:auto overflow-x:auto text-align:center; cursor:url("images/.png"); } #allitem{ cursor:url("images/.png"); } #zentai{ width:1000px; margin-left:auto; margin-right:auto; } .title{ margin-top:0px; margin-bottom:0px; font-size : 20px; border-style:solid; width:592px; background-color:#FFFF99; padding:3px; } #part{ clear:left; float:left; height:180px; width:642px; padding-right:147px; font-size : 20px; } #partnerwaku{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR{ float:left; width:180px; height:120px; } #PRsection{ border-style:solid; border-color: #000099; } #PR2{ float:left; width:185px; height:150px; } #PRsection2{ border-style:solid; border-color: #000099; } .PRimage01{ width:170px; height:80px; } .PRimage02{ width:165px; height:100px; } #kuhaku{ clear:left; height:20px; } #columnwaku{ float:left; clear:left; height:130px; width:790px; } #columnbun{ height:120px; width:600px; } #columncontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } .columnarticle01{ height:70px; width:400px; background-color:#CC99CC; } #PR3{ float:left; width:185px; height:150px; } #PRsection3{ border-style:solid; border-color: #000099; } .PRimage03{ width:165px; height:100px; } #questionnairesection{ clear:left; float:left; height:130px; width:1050px; } #questionnaire{ width:600px; border-radius: 20px; } #questionnairecontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR4{ float:left; width:185px; height:150px; } #PRsection4{ border-style:solid; border-color: #000099; } .PRimage04{ width:165px; height:100px; } 文字制限のため省略
- ベストアンサー
- HTML
- CSS：全体の画面の中央ぞろえ
全体的にレイアウトを中央にそろえたいのですが、それをするのにあるサイトに、「margin:0 auto」または「margin-left:auto ; margin-right:auto」を指定すると書いてあったのですが、そのようにしても中央ぞろえにはなっていませんでした。 どのようにすればよいのでしょうか？ div { float: left; margin-left: auto; margin-right: auto } div.Kukaku1 { background-color:blue; width: 900px; height: 150px; } div.Kukaku2_1 { background-color:green; width: 300px; height: 25px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 25px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 25px } div.Kukaku3_1 { background-color: black; width: 250px; height: 200px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 50px } div.Kukaku4_Ga { width: 450px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 450px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 450px; height: 70px } div.Kukaku4_3 { background-color: red; width: 450px; height: 150px } <div class="Kukaku1"></div> <div class="Kukaku2_1"></div> <div class="Kukaku2_2"></div> <div class="Kukaku2_3"></div> <div class="Kukaku3_1"></div> <div class="Kukaku3_2"></div> <div class="Kukaku3_3"></div> <div class="Kukaku4_Ga"> <div class="Kukaku4_1"></div> <div class="Kukaku4_2"></div> </div> <div class="Kukaku4_3"></div> 回答よろしくお願いします。
- ベストアンサー
- HTML
- 中央寄せが出来ません。
下記の様な構成で中央寄せが出来ません。 何がいけないのでしょうか？ アドバイスお願い致します。 index.html <body> <div id="hedderdiv"> <div id="hedder"> </div> <div id="buttomgrp"> </div> </div> </body> CSSファイル #hedderdiv { width: 800px; height: 500px; margin: 0 auto; } #hedder { width: 800px; height: 280px; background-color:#3F3; position:absolute; top: 0px; left: 0px; margin: 0 auto; } #buttomgrp { width: 650px; height: 200px; background-color:#C63; position:absolute; top:200px; left:50px; margin: 0 auto; }
- ベストアンサー
- HTML
補足
ご回答ありがとうございます。 <div~~~~> </div> の中に既に<div></div>が存在します。 中央寄せも縦線も引かれません。 どうしたらいいでしょうか？