- ベストアンサー
外部スタイルシートで段落の行揃えと幅とを指定する
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
中央揃えが反映されなくなったというのは、文字のセンタリングの基準位置が端に寄ってしまったという状態でしょうか。 それでしたら、divのボックス自体がセンタリングの指定をされていないので、これまでは表示領域に100%の幅で領域を確保していたdivが、幅を400pxに制限されたために、表示領域の左端を基準として幅400pxのボックスになり、その中で文字がセンタリングされている状態になっているのではないでしょうか。 試しに、bodyに対してbackground-color: black;の指定を入れて背景を黒くすると、div要素が確保している領域の背景が白色なので、確保されている領域が把握できると思います。 なお、div要素に対するwidth指定は可能ですし、有効な指定です。 とりあえず改善策としては、#2の方の挙げられているように、bodyにtext-align: centerを適用させ、それに加えてdivのスタイルシート指定にmargin: auto;を追加すればよいと思います。 従来のIEやIE6の後方互換モードでは、div要素などブロックレベル要素をセンタリングするには、その親要素でtext-align: center;を指定する必要があります。 そのため、body要素に対してtext-align: center;の指定が必要になります。 ただし、W3Cが勧告しているスタイルシートの正しい解釈としては、text-alignはブロックレベル要素には適用されませんので、IE以外のブラウザでは上記のtext-alignの指定はブロックレベル要素に効きません。 正しい解釈に近い表示法を取るブラウザ(Netscape7やIE6の標準モード)で、ブロックレベル要素をセンタリングする時には、margin: auto;を使います。 これをdiv要素のスタイルに追加すればよいでしょう。 蛇足気味ですが、margin: auto;という指定は、上下左右のマージンを自動設定するスタイルシート指定になります。 もしmargin-left: auto;という指定だけを行うと、横幅の余白領域がすべて自動的に左側のマージンに割り振られ、結果的にそのブロックレベル要素は右寄せになります。 margin-right: auto;のみの場合は、同様に余白領域がすべて自動的に右側のマージンになり、結果的に左寄せになります。 両方をautoに設定すれば、余白領域を左右で自動的に分け合い、結果的に中央寄せになります。 従来のIEと、Netscapeでの表示の共通性を確保するのであれば、この両方を追加すると良いでしょう。 参考になれば。 見当違いでしたら、ごめんなさい。
その他の回答 (2)
- Bo_Bo
- ベストアンサー率65% (97/149)
私の環境（IE6, Opera7.23）では、指定した設定が問題なく反映されますが どうしたもんでしょうね！？ もしかして、DIVブロックそのものを中央揃えにしたいのならば、対象となる DIVブロックの外側に中央揃えを設定しないといけません。 <style type="text/css"> <!-- body { text-align: center; } div { width: 400px; text-align: center; background-color: #ffffff; } --> </style> ： <body> <p>外側</p> <div> DIVブロックの中身 </div> <p>外側</p> </body> </html>
お礼
bodyタグにtext-align: center;を設定したところ、うちのIEでも反映されました！ そうか、divの外側でなければならなかったのですね。 しかし、NN7では反映されませんでした。 IEとNN、どちらにもいい顔するのは本当に難しい・・・。 たいへんためになるご指摘をいただきました。 本当にありがとうございます。
- heto2
- ベストアンサー率43% (227/525)
Div では Width を指定できないと思います。 Tableを使ってみるのはどうでしょう。 ブラウザーの表示幅に関係なく指定した幅で表示できるのでデザインが崩れません。 外部cssで例えば下記のように定義 .sample01{ font-size:x-small; font-weight:bold; background:url(xxxx.jpg); text-align:center; } HTMLでは <table align=center class="sample01" width="700" border="0"> <tr><td>サンプル1</td></tr> </table> background:url(xxxx.jpg);では任意の画像を背景に使えます。 背景色指定の場合は次のようにします。 外部css .sample02{ font-size:x-small; font-weight:bold; background-color : #00ffff; text-align:center; } HTML <table align=center class="sample02" width="700" border="0"> <tr><td>サンプル２</td></tr> </table> ちょっとご質問から離れているかもしれませんが、色々楽しめます。
お礼
なるほど、いろいろと楽しめますね。 既存のファイルひとつひとつにテーブルを追加していくのはちょっぴり大変ですが、レイアウトにテーブルを活用するのは便利で手軽にできてよいですね。 ご丁寧なアドバイスありがとうございます。
関連するQ&A
- スタイルシートでの文字位置の指定
正方形の中心に文字があるようなデザインにしたくて 次のように記述したのですがうまくいきません。 .text{ height : 160px; width : 160px; color : #FFFFFF; padding: 0px; margin: 0px; background-color: #6C3C1F; font-size: 15pt; text-align: center; vertical-align: middle; font-weight: bold; } 横位置はきちんと中央揃えになりますが、 縦の位置は文字が正方形内で上揃えになってしまいます。 どうすれば希望のデザインにできるか教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- 外部スタイルシートへの記入方法について
外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。
- ベストアンサー
- CSS
- 外部スタイルシートは同じなのですが…
こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div> ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright © 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシートでのデザイン
HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- CSS
- スタイルシートの指定に関して
<body>タグにクラスを与えて、以下のようにしました。 <body class="home blog"> 一般的に、このような記述の場合、<body>に class="home"と、class="blog"の属性が与えられます。ここまでは理解出来ています。 2つのファイル home.html と index.html ファイルを作成しました。 html の記述は全て同じとします。参照する CSS ファイルを同一とします。 上記の条件で、home.html と index.html でデザインを変えたいと思います。希望として home.html には、class="home" のみを反映し、 index.html には、class="blog" のみを反映させたい。 以下にサンプルを表記します。 html ファイル home.html / index.html <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テストページ</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body class="home blog"> <div id="container"> <p>テストページ</p> </div> </body> </html> css ファイルは home.html / index.html で共通 @charset "UTF-8"; body { margin: 0; padding: 0; text-align: center; background-color: #FFF; } .home #container { width: 800px; height: 200px; text-align: center; margin: 0 auto; padding: 0; background-color: #FFE; } .blog #container { width: 800px; height: 200px; text-align: center; margin: 0 auto; padding: 0; background-color: #FEE; } 上記の記述だと home.html も CSS の記述順通り、バックグランドカラーが、#FEE になります。 <body class="home blog"> の記述は、WordPress が生成している記述です。デザインを別けることが出来るのかなと思っています。 自分のスキルでは無理だと思うのですが・・・。 CSS の記述でデザインを別けることが出来るのでしょうか。
- ベストアンサー
- CSS
- ホームページのブロック配置 Float
Float left のブロックの右に別のブロックを配置したいのですが float right 指定しても回り込んでくれません。一度は上手くいったようにみえたのですが。 原因と注意点をお教え下さい。 --------------------------------------------------------------------------- | header | |--------------------------------------------------------------------------- | dspbody (menuとtopを含む) | | ------------------------------------------------------------------------- | | menu | top | |--------------------------------------------------------------------------- | footer | ---------------------------------------------------------------------------- 【テスト中のスタイルシート】 * { margin:0; padding:0; } body { /* background-color:#ffffff; *//*内容全体の背景色*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#pagebody { width:1000px; margin:0 auto; /*内容全体をセンタリング*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#header { height:136px; /*背景画像のサイズに合わせてボックスの高さを指定*/ text-align:center; /*テキスト・画像の配置を中央揃えにする*/ background-image: url(img/FF054_change.png); background-repeat: repeat-x; } div#dspbody { width:1000px; height:800px; background-color: #999999; } div#menu { width:152px; height:800px; margin:0; float:left; /*内容全体を左に配置*/ text-align:left; /*テキストの配置を左揃えにする*/ /* background-color: "saddlebrown"; */ background-image: url(img/FF085_change.png); /* background-repeat: repeat-y; */ } div#top { /* width:700px; height:600px; */ float:right; text-align:center; /*テキストの配置を中央揃えにする*/ font-size: 9pt; background-color: #ccffcc; } div#top table { margin: auto; /*テーブルの配置を中央揃えにする*/ } div#footer { clear:both; text-align:center; /*テキストの配置を中央揃えにする*/ } a:link { color: yellow} a:visited { color: yellowgreen}
- ベストアンサー
- その他([技術者向] コンピューター)
- inline-blockを上下中央揃えにする方法
以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法
- 締切済み
- CSS
- スタイルシートで背景を伸ばしたい
以下のソースで、文字列のside side...の高さをmain,main...に揃えたいです。 色々試してみたのですが、side の文字のある側の背景が下まで伸びてくれません。 どうしたらよいでしょうか。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style TYPE="text/css"> <!-- body{ font-size: 10pt; text-align: center; } #container { width: 752px; border-left: 1px solid #599E3D; border-right: 1px solid #599E3D; } #main { float: right; width: 570px; background: #FFFFFF; } #side { float: left; width: 180px; background: #E0FFFF; border-right: 1px solid #F2992F; } --> </style> </head> <body> <div id="container"> <div id="main"> main<br> main<br> main<br> main<br> main<br> </div> <div id="side"> side<br> side<br> side<br> </div> </div> </body> </html>
- ベストアンサー
- HTML
- CSS idセレクタについて教えてください
いろいろな Web の CSS を参考にして CSS を書いているのですが、id セレクタの並列記載について理解が出来ないので教えてください。 とある Web にあった CSS の記述で、 #contents { margin: 0px; padding: 0px; width: 800px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; background: #FFFFFF url(title.gif) no-repeat center top; height: 60px; width:800px; text-align: center; display: block; position: relative; } は理解できるのですが、左側にメニューを配置する設定に関して #contents #sidemenu { margin: 5px; padding: 0px; float: left; width: 160px; text-align: left; background-color: #FFFFFF; } となっていて、#sidemenu ではなく、#contents #sidemenu となっていました。 <div id="contents"> あいうえお <div id="header"> かきくけこ </div> <div id="sidemenu"> メニュー </div> さらにコンテンツ </div> とすれば、contents の要素は header にも sidemenu にも継承されると思っていたのですが違っているのでしょうか。 contents と sidemenu の両要素を反映させるために #contents #sidemenu となっているのでしょうか。 初歩的な質問だと思いますが、どうぞよろしくお願いします。
- ベストアンサー
- CSS
- Firefox、Netscapeでレイアウトが崩れる(スタイルシート)
２段組レイアウト、 左がナビゲーションメニューで ロールオーバーボタンのような効果を出したくて、 IEとOperaでは正常に表示・動作したのですが FirefoxとNetscapeで、レイアウトが大きく崩れてしまいます。 メニュー箇所のソースは以下です。 【ＨＴＭＬ】 <div id="side"> <div id="sidelist"> <ul> <li><a href="#">メニュー１</a></li><br> <li><a href="#">メニュー２</a></li><br> </ul> </div> </div> 【ＣＳＳ】 #side{ float:left; position:absoulte; width:200px; height:100%; padding:0; background-color:#ffffff; } #sidelist ul{ margin:0; padding:0; list-style:none; } #sidelist li{ display:inline; } #sidelist a,#sidelist a:link #sidelist a:visited{ width:100%; height:100%; padding:10px 20px; border-bottom:1px solid #333333; background-color:#cccccc; color:#333333; text-decoration:none; } #sidelist a:hover{ width:100%; height:100%; paddint:0; margin:0; color:ffffff; background-color:#666666; } headerの幅を800px、mainの幅を600pxに指定したので ナビゲーションメニューとなるsideは 200pxに指定しましたが、 数値を減らしてみてもやはり崩れます。 FirefoxとNetscapeでも崩れずに 表示させる方法はあるでしょうか？ よろしくお願いします。 なお、ブラウザは全て最新バージョンです。
- ベストアンサー
- HTML
お礼
bodyにtext-ailgn:center;とmargin: auto;を併記してみたところ、(うちの)IE6とNetscape7とともに希望どおりのレイアウトになりました。 どっちのブラウザにもいい顔をしたかったので、大変助かりました。 見当違いなんてとんでもない。 非常に詳しく解りやすく、また大変的を射たご説明でした。 本当にありがとうございます。