- 締切済み
p社 ネットショップオーナ－３のcssについて。
お伺いしたいのですが、ネットショップオーナ－３のレイアウトの件につきまして、 モジュールの間隔を10ピクセルにすると、ページの上マージンまで10ピクセル空いてしまいます。 これをなくすには下記内容の『MCommon.css』を編集すればよいらしいのですが なにを書き込んで良いやら分かりません。もし分かる方がいらしたら 教えていただけると幸いです。 -------------------------------------------------------------------- <!-- form{ margin : 0em ; } input { font-size : 9pt; } textarea { font-size : 9pt; } select { font-size : 9pt; } --> --------------------------------------------------------------------
- bitoh_kun
- お礼率0% (0/1)
- インターネットビジネス
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ryo2501
- ベストアンサー率46% (15/32)
これだけの情報では、正確な事は言えませんが body { margin : 0; padding : 0; } が無いのが原因かと思われます。 htmlで文章だけ記述してIE等で確認すれば解りますが、デフォルトの状態では縦横何pixかmarginが出来ているので、上記を追加して余白を無くせばいいのではないでしょうか。
関連するQ&A
- CSS） emでのサイズ指定
CSS初心者です。 何のサイズをem単位で指定できるのか調べたくて、適当に h1,h2,h3,h4,p { font-size: 2em; margin: 1em; padding: 1em; margin-border: 1px; border-color: #000000; ligh-height: 1em; border-width: 1px; } としました。 すると、すべてのフォントサイズが同じになりました。 それぞれのヘディングが倍のサイズになると思っていたのですが、なぜこうなってしまったのでしょうか？ また、マージンのサイズ、パッデイングのサイズを視覚的に確認したいのですが、どうすればいいのでしょうか？
- ベストアンサー
- CSS
- CSSで一般的でSEOに有効な値（単位）は？
お世話になります。初めて質問させていただきます。 CSSで使う「font-size」や「margin-top」等の属性の値（単位）は「em」「pt」「px」等、色々ありますが・・・ 【例1】 H1{ font-size: 12px; 【例2】 H1{ font-size: 12pt; 【例3】 H1{ font-size: 1em; 上記以外にも色々と値（単位）が有りますが、どれが一般的でSEOに有効ですか？（H1に限りません） また、CSSでの各種の属性に有効な値等が説明してあるHPなどありますか？ 教えて下さい。よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- css フォームのプルボタンを使う場合
cssでselect（プルダウンメニュー）を定義すると、 その後のフォーム（例えばテキストフィールド）のレイアウトが崩れます。 お詳しい方、ご教授いただければ幸いです。 ======================================= html側の記述です ======================================= <form accept-charset="UTF-8" action="/mmm" > <div style="margin:0;padding:0;display:inline"></div> <div class="field"> <label for="vvv">氏名</label> <input id="vvv_name" name="vvv[name]" size="30" type="text"> </div> <div class="field"> <label for="xxx">好きな果物</label> <select id="xxx" name="site[ftp_id]"><option selected="selected" value=""></option> <option value="1">りんご</option> <option value="2">さくらんぼ</option></select> </div> <div class="field"> <!--＃ここのレイアウトが崩れます--> <label for="yyy">好きな動物</label> <input id="yyy" name="yyy[yyy]" size="30" type="text"> </div> </form> ======================================= cssの記述です ======================================= * { margin: 0; padding: 0; } .field { width:500px;} .field label { width:230px; float:left; color:#FFFFFF; background-color:#001207; display:block; height: 2em; line-height :2em; margin-top:10px; } .field input { width:200px; float:left; color:#FFFFFF; margin-top:10px; height: 2em; } .field select { width:200px; float:left; color:#FFFFFF; margin-top:10px; height: 2em; } どうぞよろしくお願い致します。
- 締切済み
- CSS
- ＣＳＳでマージンを残しつつ中央そろえにする方法について
こんにちは、Ｐｈｏｅｎｉｘ００１と申します。 趣味でホームページ製作をしている者です（ただし割と初心者です）。 先日、ネットサーフィンをしてホームページ作成の参考になるサイトを探していた所、 http://www.gardenxgarden.com/ というサイトを発見いたしました。 このサイトはサイトのサイズが横８００ｐｘだと思うのですが、１２００ｐｘで開くと左右に均等にマージンがあり、ウィンドウを小さくするとマージンからなくなり、さらにウィンドウを小さくしてもページが崩れないように出来ています。 私はこのようにマージンを作りつつ中央にサイトがあり、ウィンドウを小さくするとマージンからなくなるページは始めて見たので是非自分でもやってみたいのですが、ＣＳＳの設定はどうやるのでしょうか？ 練習用にＨＴＭＬとＣＳＳのソースを作りましたので、これでやり方を示していただけると幸いです。 ＨＴＭＬ、ＣＳＳ内容がメニューとコンテンツの（参考サイトのページ３分割ではなく）２分割です。マージンのやり方なので問題はないと思います。 なるべく間違いがないように骨組みは（マージン以外）作ったつもりですが、間違えていたらご容赦ください。 どうぞ、よろしくお願いいたします。 ■練習用ＨＴＭＬ <head> <title>マージンがあり、ウィンドウを小さくするとそこからなくなっていくサイトを作るには？</title> <link rel="stylesheet" type="text/css" href="index.css" media="screen,print"> </head> <body> <div id="main">■■←Ｍａｉｎで全体を覆いますよね？使用しない場合は消してください。 <div id="head"> <h1>マージンのあるサイト</h1> </div> <div id="menu"> <h2>リンク</h2> <ul> <li>マージン</li> <li>作りたいです</li> </ul> </div> <div id="content"> <p>マージンがあるのに中央にそろえられて、ウィンドウを小さくするとマージンから消えていくサイトは始めてみました。是非創ってみたいです。解答しやすくなるようにコンテンツのデータを入れてあります。</p> <h2>案内</h2> <p>ＨＴＭＬ、ＣＳＳが分かる方、解答をお願いいたします。</p> <dl> <dt>マージン</dt> <dd>ページの余白のこと</dd> <dt>やり方</dt> <dd>分からないです</dd> <dt>作る意欲</dt> <dd>沢山あります。</dd> </dl> </div> </div> ■ＨＴＭＬ終了 ■練習用ＣＳＳ（いらないものは消して、いるものは追加してください。ｈ１、ｈ２は分かりやすくなるように入れています。） body { background-color: white color: black; margin-left : auto ; margin-right : auto ; } h1 { font-size: 1.6em; background-color: #480; color: white; padding: 0.2em; } h2 { font-size: 1.0em; border: 1px solid #480; padding: 0.2em; } p { line-height: 1.6em; } div#main { float: middle; width: 800px; } div#menu { float: left; width: 9em; background-color: white; margin-right: 1em; padding: 0.4em; } div#menu h2 { font-size: 1em; } div#menu ul { font-size: 0.9em; list-style-type: none; margin-left: 0; padding-left: 0.5em; } div#menu li { margin-bottom: 0.4em; } div#content { float: left; width: 80%; } div#content h2 { font-size: 1.2em; border: 1px solid #800; padding: 0.2em; } div > *:first-child { margin-top: 0; } ■ＣＳＳ終了
- ベストアンサー
- HTML
- ＣＳＳエラーについて教えて下さい。
ホームページのＣＳＳエラーをＷ３Ｃでチェックしました。 すると６つのエラーが出ました。 それぞれの意味がわからないので教えていただけませんでしょうか。 該当のファイルはｒｅｓｅｔ．ｃｓｓだと思いますので、コピペします。 8 body 文法解析エラーが発生しました ;*font-size:small; 8 body 文法解析エラーが発生しました ;} 22 input, textarea, select 文法解析エラーが発生しました {*font-size:100%; 22 input, textarea, select 文法解析エラーが発生しました ;} 24 pre, code, kbd, samp, tt 文法解析エラーが発生しました ;*font-size:108%; 28 dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, input, textarea, p 文法解析エラーが発生しました [:100%;} /* ƒfƒtƒHƒ‹ƒg’l */ /**************************************************/ div] /**************************************************/ /* ブラウザ別デフォルト値リセット */ /**************************************************/ /* リセット */ /**************************************************/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} body{font:13px/1.231 "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;*font-size:small;} table{border-collapse:collapse;border-spacing:0;font-size:inherit;font:100%;} td{vertical-align:top;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} strong{font-weight:bold;} ol,ul,li{text-align:left;list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;} q:before,q:after{content:'';} abbr,acronym{border:0;font-variant:normal;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} input,textarea,select{*font-size:100%;} legend{color:#000;} pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;} /* デフォルト値 */ /**************************************************/ div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,textarea,p{text-align:left;} h1,h2,h3,h4,h5,h6,dt{font-weight:bold;} p{line-height:1.6em;} img{display:block;} body{color:#333;background:#FFF;text-align:center;} a:link{color:#069;} a:visited{color:#069;} a:hover{color:#F60;} a:active{text-decoration:none;} /**************************************************/
- ベストアンサー
- CSS
- ネットスケープのＣＳＳエラー
ネットスケープ4.78(win)を使っています。 フォームを設けて、その中で<textarea>を設置したのですが、 <div class="type1"><textarea></textarea></div> というような形でcssをかけたら、フォーム全体 というか、テーブル全体のレイアウトがおかしくなりました。 送信ボタンがテキストエリアの中に入ったり。 <textarea>にかけたcssの中身（クラス）は .type1 {font-size:12px; line-height:14px; color:#000000;} です。 <textarea>にはＣＳＳをかけないほうがいいのでしょうか？ どのようなＣＳＳなら安全でしょうか？ ちなみに <input type="text">には同様のＣＳＳをかけても大丈夫でした。 どなたか、教えてください。
- ベストアンサー
- HTML
- IEでCSSが適用されません。
現在作成中のページがあるのですが、IEで作成状況をF12で確認すると、 全くCSSが反映されず、グチャグチャに表示されてしまいます。 FireFoxでは、問題なく表示されるのですが・・ div, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote { font-size:100%; font-weight:normal; list-style-image:none; list-style-type:none; margin:0; padding:0; } dl { font-size:100%; font-weight:normal; list-style-image:none; list-style-type:none; margin:0; padding:0; } dt, dd { margin-bottom:2px; margin-top:2px; } 上記をCSSに組み込んで、リストタグの中黒を消すようにしているのですが、IEでは中黒が表示されたままです。 どうすれば良いのでしょうか。 教えて下さい！！
- 締切済み
- その他([技術者向] コンピューター)
- 上下マージンの取り方（CSS）
スタイルシート（CSS)に携わる方々へ、 皆様の知恵を拝借したく、質問させていただきます。 段落間（P,UL等）の上下マージンの取り方についての質問です。 （A）予め段落の上マージンをゼロにリセットし、段落間は下マージンで操作 例： p,ul { margin-top:0; margin-bottom:1em; } /* リセット */ .hoge { margin-bottom:0.5em; } /* 上の段落に指定 */ （B）予め段落の下マージンをゼロにリセットし、段落間は上マージンで操作 例： p,ul { margin-top:1em; margin-bottom:0; } /* リセット */ .hoge { margin-top:0.5em; } /* 下の段落に指定 */ サイト構築において、（A）か（B）で悩んでいます。 皆様の意見を「具体的な理由」もあわせてお教え下さい。
- 締切済み
- HTML
- 【CSS】HTML要素の指定
お手柔らかにお願いします。 HTMLを下記のように記述しました。 ---------- <section id="login"> <h1>ログイン</h1> <form> <label for="my_id">ID</label> <input id="my_id" type="text" size="10" maxlength="10"><br /> <label for="my_pass">パスワード</label> <input id="my_pass" type="password" size="10" maxlength="10"><br /> </form> <a><p>ログイン</p></a> <p><a>パスワードを忘れた方はこちら</a></p> </section> ---------- 上記の”<a><p>ログイン</p></a>”に対して、画像を差し込みたいと思っています。 p要素にid名やclass名を入れれば簡単にできるのですが、HTMLは変更せず、CSSのみで要素を特定したいと思っています。 こちらのサイト（http://web-dd.net/?p=278）を参考にCSSを以下のように書いてみましたが、うまくいきませんでした。 ---------- #login label { display: inline-block; font-size: 0.8em; text-align: right; vertical-align: middle; width: 70px; margin: 5px 0 5px 5px; } #login input { display: block; float: right; width: 80px; margin: 5px 10px 5px 5px; } #login br { clear: left; } #login > form + p { overflow: hidden; text-indent: -10em; background: url(img/btn_login.png) no-repeat; width: 90px; height: 30px; } #login a + p { font-size: 0.7em; text-align: center; margin: 15px auto 10px auto; } ---------- ”#login > form + p”という要素の指定が間違っているのかも、と思っていますが、formの部分をh1やinput、brなどにしてもうまくいきませんでした。 あまり難しいことは勉強中なのでわかりませんが、どこをどう直せばいいのか、わかりやすく説明してくださるとうれしいです。 よろしくお願いします。
- 締切済み
- CSS
補足
ご回答有り難う御座います。 『MCommon.css』に body { margin-top : 0px; padding-top : 0px; } という記述は試したことがあったのですが やはりレイアウトは変わりませんでした。 ちなみにですが、レイアウトをhtmlで確認した場合、 メタタグからbodyの始まりは下記のようになっております。 <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel=stylesheet type="text/css" href="nso_style.css"> <link rel=stylesheet type="text/css" href="MCommon.css"> <!--<script type="text/javascript" src="MCommon.js"></script>--> </head> <body id="T1_1_body">