表示位置について
- 初心者のため、表示位置の設定について質問があります。
- 画面一杯にボックスを作成し、左右に余白を出したいですが、中央ではなく左側に表示されてしまいます。
- また、テキストで「white space」を活用したいのですが、どこに書き込めばいいか分かりません。
- ベストアンサー
表示位置について
初心者ですが、ソフトを使っていなければ 此処で質問をした方が良いと言われたものですからよろしくお願いします。 <style type="text/css"> <!-- body{background-color:#ffffdd} div.box{margin:5px; width:740px;height:1000px;padding:10px; background-color:#fff;border:4px solid #008080;} --> </style> <body> <div class="box"> </div></body> 800×600の画面一杯に、こういうボックスを作って、 最大画面で見る時は、よく有る企業のページのように、左右に余白が出るようにしたいのですが、 どうしても、中央ではなく左側に表示されます。 後、テキストで"white space"を活用したいのですが、何処にどう書き込めばいいか解りません。 質問が判りづらくてスミマセンが、教えて頂けますか。
- motomi88
- お礼率68% (45/66)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
bodyの属性に text-align:center; と入れてください。 但し、div.boxにtext-align:center;が継承されてしまいますので、div.boxの属性に text-align:left; を追加してください。 white-spaceはnowrapとかで使用したいのであれば、自動改行をして欲しくない区間だけに、記述すれば良いです。 ------------- <style type="text/css"> <!-- body{ background-color:#ffffdd; text-align:center; } div.box{ text-align:left; margin:5px; width:740px; height:1000px; padding:10px; background-color:#fff; border:4px solid #008080; } --> </style> <body> <div class="box"> ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ <span style="white-space:nowrap">この区間は自動改行しません。</span> ほげほげほげほげほげほげほげほげほげほげほげ </div> </body> -------------- こんな感じ。 もちろん、タグ内にＣＳＳを直接記述したくないのならば、それ用のクラスを作れば良いです。
関連するQ&A
- モバイルサイト＜3キャリア＞：auでwidth指定が無効化される？
モバイルサイト＜3キャリア＞：auでwidth指定が無効化される？ ３キャリア共通仕様のHTMLサイトを作成しています。cssはインラインで使用しています。 あ行 あ い う え お か行 か き く け こ... のような「あいうえお表」を挿入したいのですが、タイトルのとおりauで表示が崩れます。 実現したい仕様は添付画像の【docomo,Softbank】のような形で、この2キャリアでは問題なく表示されています。 が、【au】で見ますとそれぞれの要素のwidth指定が無視され、100%表示されてしまっているようです。 該当部分のソースは、以下のとおりです。 <div style="background-color:#FFF; padding:5px; margin:0;"> <div style="background-color:#FFF; padding:5px; margin:0; width:10px; height:15px; display:inline;">あ行</div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><a href="list_a.html"><font color="#FF0066">あ</font></a></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">い</font></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">う</font></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">え</font></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">お</font></div> </div><!--a end--> 思いつくままにスタイルを追加したので、その中に両立しないものがあるのかなと思うのですが、なにぶんまだ不勉強で・・・ tableで組み直すことも考えたのですが、それぞれのboxをborderで囲みたいのと間隔を空けたいため、ソースが今以上に膨大になってしまう気がして踏ん切りがつきません。 ここを直せばいい、tableでも組める等、お知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- この部分の画像を入れるには・・？？
<!--＊ はじめ ＊--> <table><tbody><tr><td> <div style="border:1px solid #ff6699;width:400px"><div style="border-width:3px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb #fff;background:#ffcccc;padding:4px"><div style="border:3px dotted #fff;padding:4px"><div style="border-width:3px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbb"><div style="border:1px solid #ff6699;background:#fff;font-size:13px;color:#ff6699;padding:15px"> <img src="写真ＵＲＬ" width="幅(ピクセル)" height="高さ(ピクセル)" border="0" align="left" style="margin:0 7px 0 0"> <b>ＨＮ</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>職業／学校</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>住んでるとこ</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>性別</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <b>年齢</b> ☆ プロフィール <hr style="border-style:solid;color:#ff6699;height:1px"> <!--＊ おわり ＊--> すいません。上記のタグは、ＨＰ用のプロフィールなんですが、写真を入れることのできるプロフィールなんです。。 が、上のほうに、写真ＵＲＬというのが、あって、多分そこに写真を入れるんですが、写真ＵＲＬって何ですか？マイピクチャーに入れてる写真を使うのですがＵＲＬなんかないです。。 どうしたらいいんでしょうか？
- ベストアンサー
- レンタルサーバ・ASP
- Opera（10.10）でのスタイルシートの表示について
Opera（10.10）でのスタイルシートの表示について Operaでのスタイルシートの「border」の表示について質問させて下さい。 これは例ですが、HTMLとCSSを以下のとおりに設定しているとしますね。 ------------------------------------------------------------------ <body> <div id="layout"> <div id="box1"> <p>ボーダーのテスト</p> </div> </div> </body> ------------------------------------------------------------------ *{ margin : 0px; padding : 0px; } #layout{ width : 800px; height : 600px; padding : 10px; margin-left : auto; margin-right : auto; background-color : #FFF; } #box1{ width : 780px; height : 580px; padding : 10px; border-top : solid 1px #D1D1D1; border-left : solid 1px #D1D1D1; border-right : dashed 1px #D1D1D1; border-bottom : dashed 1px #D1D1D1; background-color : #FFF; } ------------------------------------------------------------------ このように設定した場合、「id="box3"」のボーダーは上と左が直線、 右と下が点線と表示されるのが正しい表示だと思います。 しかし、Operaで閲覧した場合なぜか「border-left」のみ表示されません。 「border-left」を「solid」から「dashed」に変更すると表示されます。 borderに合わせてwidthもちゃんと横に伸びているので、 CSSが適用されていないわけではないと思います。 また、「border-left」を「dashed」から「solid」に変更した場合には、 「border-top」と「border-right」の両方が見えなくなってしまいます。 どちらの問題も、IE6やFirefox（3.5.7）では指定通り正しく表示されました。 Operaでも同様に正しく表示させるにはどうすればよいのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- Safariでheight:100%のボックスを表示したいのです
Safariでheight:100%のボックスを表示したいのです。MacIE・WinIE・FireFox・Operaでは出来たのですが、どうしてもSafariだけheight:100%のボックスが出来上がらず・・・。 以下、記述したCSSとHTMLです。 HTML--------- <body> <div id="main"> <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 </div> </body> </html> CSS--- /* \*/ html{ height:100%; } /* \*/ body{ height:100%; width:80%; margin:0px auto; padding:0px; } div#main{ background-image:url(../images/contents_bg.gif); border:solid 1px #760014; border-width:0px 1px; height:100%; min-height: 100%; margin:0px auto; padding:0px; border:1px solid #ff0000; } body > #main{ height: auto; } h1{ margin:0px auto; padding:0
- ベストアンサー
- HTML
- スタイルシートで画面を上下に分割，高さを上部はpxで指定，下部は残り全部にする方法
画面を上下に分けて，上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い，次のようにしてみたんですがうまくいきません． <html> <body style="margin:0px; padding:0px;"> <div style="width:100%; height:100px; background-color:#ccf;"> 画面上部 </div> <div style="width:100%; height:100%; background-color:#fcc; "> 画面下部 </div> </body> </html> 要は下部の「残り全部」のやり方がわかっておらず，全体的な高さが100px+100%になり，表示画面より下に100pxはみ出してしまいます． 次のようにdivを入れ子にするとうまくいくんですが，内部に表示させる内容によっては不具合が出るので，どうしてもdivどうしが独立した形で実現させたいです． <html> <body style="margin:0px; padding:0px;"> <div style="width:100%; height:100%; background-color:#fcc; "> <div style="width:100%; height:100px; background-color:#ccf;"> 画面上部 </div> </div> </body> </html> 他の質問サイトでも尋ねてみたのですが，質問の意味を理解してもらえずに別に問題はないという回答を１件頂いたのみで解決できませんでした．また，テーブルではなく必ずスタイルシートで実現したいです．対策をご存知の方，ご教示よろしくお願いします．
- ベストアンサー
- HTML
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- CSSでheight:100％の際の画面外の表示
初歩的な質問で申し訳ございませんが、 よろしくお願いいたします。 CSSでレイアウトする際に、 body { width:100%; height:100%; margin:0px; padding:0; background-color:#000; min-height: 100%; } html{ height:100%; } #wrap { background-color:#fff; margin:0 auto 0 auto; width:500px; height:100% } <body> <div id="wrap">テキスト</div> </body> この様にした場合に上記HTMLソースの様に テキスト量が少なく画面がスクロールしない場合は 縦100%で画面内に綺麗におさまり問題ないのですが、 テキスト量が多くなり画面外にはみ出た場合、 ウィンドウサイズ部分のみ背景色が#fffで スクロール後のウィンドウ外は背景色が#000になってしまいます。 これを対処する方法をご教授願えますでしょうか。 既出の質問であれば回答の場所に導いていただければ 非常に助かります。 何卒、よろしくお願いいたします。
- ベストアンサー
- HTML
- ホームページテンプレートダウンロード
ホームページのテンプレートをダウンロードしました。 内容は下記のとおりです。 しかしこのままアルファエディットに貼り付けてもイメージ通りになりません。 他にimageフォルダが付いていてgifが４つあったのですが これをどこかに貼り付けなければならないのでしょうか？ 教えてください。よろしくお願いします。 @charset "UTF-8"; /* --------------------- * FONTSIZE MODEL * * --------------------- * 63% -> 10pxに相当 * 70% -> 11pxに相当 * 75% -> 12pxに相当 * 82% -> 13pxに相当 * 88% -> 14pxに相当 * 94% -> 15pxに相当 * 100% -> 16pxに相当 * 107% -> 17pxに相当 * 113% -> 18pxに相当 * 119% -> 19pxに相当 * 125% -> 20pxに相当 * --------------------- */ /* ========BASIC======== */ * { font-family:Verdana, Helvetica, sans-serif; color:#333; } body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; background:#EFEFEA; } br { letter-spacing:normal; } a { color:#333; text-decoration:none; } a:hover { color:#DF8713; text-decoration:none; } img { border:0; } h1,h2,h3,h4,h5,h6 { margin:0; } /* ========TEMPLATE LAYOUT======== */ div#top { width:778px; margin:0 auto; border-left:1px solid #ccc; border-right:1px solid #ccc; background:#fff; } div#header { width:774px; margin:0 2px; background:#4f3333; } div#menu { width:774px; margin:0 2px; background:#ccc; } div#contents { clear:both; width:774px; margin:0 2px; padding:10px 0; } div#main { float:left; width:554px; padding:0 5px; } div#sub { float:right; width:200px; padding-right:5px; } div#footer { clear:both; width:774px; margin:0 2px; } /* 回り込み解除 */ div#contents:after { content:""; display:block; height:0; clear:both; visibility:hidden; } /* ========HEADER CUSTOMIZE======== */ div#header h1 { margin:0; padding:0 10px; font-size:150%;/* 24px相当 */ color:#fff; line-height:80px; } div#header h1 a { color:#fff; } div#header h1 a:hover { color:#DF8713; } /* ========MENU CUSTOMIZE======== */ div#menu ul { margin:0; padding:0; } div#menu li { float:left; font-size:82%;/* 13px相当 */ color:#333; list-style-type:none; } div#menu li a{ display:block; margin-right:1px; padding:0 20px; color:#fff; line-height:2.5; background:#9C6565; } div#menu li a:hover{ color:#fff; background:#DF8713; } /* 回り込み解除 */ div#menu ul:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } /* ========MAIN CONTENTS CUSTOMIZE======== */ div#main a { color:#DF8713; } div#main a:hover { border:0; color:#DF8713; border-bottom:1px solid #DF8713; } div#main h2 { margin-bottom:3px; padding:2px 2px 2px 5px; font-size:94%;/* 15px相当 */ font-weight:bold; border-left:5px solid #4E3333; background:url(images/bg_h2.gif); } div#main h3 { margin-bottom:2px; padding-left:25px; font-size:82%;/* 13px相当 */ background:url("images/bg_h3.gif") 0 50% no-repeat; } div#main p{ margin:0 0 1em 0; font-size:82%;/* 13px相当 */ } /* ========SUB CONTENTS CUSTOMIZE======== */ div#sub .section { margin-bottom:10px; padding:10px; background:#DEDDD0; } div#sub h2 { padding-bottom:5px; text-align:center; font-size:94%;/* 15px相当 */ font-weight:bold; color:#fff; border-bottom:1px solid #93847B; } div#sub ul { margin:0; padding:5px 0 0 10px; } div#sub li { margin:0; padding-left:12px; font-size:82%;/* 13px相当 */ background:#DEDDD0 url("images/bg_list.gif") 0 50% no-repeat; list-style:none; } /* ========TOTOP CUSTOMIZE========= */ div#totop { padding:10px; text-align:right; font-size:82%;/* 13px相当 */ } div#totop a{ padding:0 0 0 12px; background:url("images/bg_totop.gif") 0 60% no-repeat; } /* ========FOOTER CUSTOMIZE======== */ address{ padding:20px 0; text-align:center; font-style:normal; font-size:75%;/* 12px相当 */ color:#333; border-top:1px solid #ccc; }
- 締切済み
- ネットトラブル
- 直接書き込むCSSを外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- テーブルの上と左に白い線を付けたい
下記に書いたのHTMLについて質問があります。 説明が下手かもしれませんが、宜しくお願いします。 このHTMLを書いたら外側が黒枠のテーブルっぽいのがが出るんです、 見出し部分の「ここにタイトル」という緑部分の、上と左部分が白色になってる部分があるんですが、これって新規で作る場合はどんな手順で作ればいいのでしょうか？ 当方使用しているソフトはDreamweaver8です。 <table><tbody><tr><td> <div style="background:#000;font-size:13px;color:#000;padding:1px"><div style="border-width:1px;border-style:solid;border-color:#fff #80dd99 #80dd99 #fff;background:#90eeaa;text-align:center;padding:3px"> ＊ ここにタイトル ＊ </div><div style="margin-top:1px;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;background:#fff;padding:8px"> ここに本文 </div></div> </td></tr></tbody></table>
- ベストアンサー
- HTML
補足
直ぐに答えて下さって、有難うございます。 タグを書いて貰えたから、よく解りました。 white-spaceは、字下げに使えないのかと思ったのです。 例えば 見出しを改行して、こういうレイアウトにしたい時に、使えないものかと。 「あああああああああ ええええええええええええ」