paddingとpositionの違いとは？
- html&cssの超初心者です。paddingとpositionの使い方について教えてください。
- div要素の中でpaddingを使うと要素内のコンテンツを移動させることができます。
- 一方、positionを使うと要素自体を移動させることができます。
- ベストアンサー
paddingとpositionが分かりません
html&cssの超初心者です。勉強している教本で下記のソースがあり、cssのdiv.introの「徒然なるままに」と「 MyWeb」の間が狭いので「徒然なるままに」の左側に余白を入れたいのですが、どうもうまくいきません。 padding-left: 10px; とかpadding: 0px 0px 0px 10px; と試みたのですがダメで、position: relative; left: 10px; と入力すると移動しました。このソースのそれぞれのdivの中でにpaddingで移動するところとpositionで移動する箇所があり、その理由がわかりません。どなたか教えてくれませんか？ よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html ; charset=Shift_JIS"> <title>代表的な段組を記述する</title> <style type="text/css"> body { margin: 0px; padding: 0px; } div.title { float: left; width: 200px; } div.title h1 { margin: 0px; font-size: 300%; font-family: "Times New Roman",Century,serif; background-color: #00aa00; color: white; text-align: center; } div.intro { font-size: 90%; padding: 0.5em; } div.navi { clear: both; background-color: green; color: yellow; padding: 3px; font-family: Verdana,sans-serif; } div.navi a { color: white; text-decoration: none; } div.menu { float: left; width: 25%; padding: 0.5em; margin-right: 0.3em; border-right: dashed 1px green; background-color: #ccffcc; } div.main { padding: 0.5em 1em; } div.main h2 { font-family: Verdana,Arial,sans-serif; margin: 0px; border-bottom: solid 3px #00cc00; } div.main p { line-height: 1.4; } div.footer { clear: both; background-color: green; color: white; padding: 3px; } div.footer p.returnlink { text-align: center; margin: 0em 0px 0.5em 0px; } div.footer p.returnlink a { color: white; } div.footer p.copyright { margin: 0px; font-size: 80%; font-family: Verdana,Arial,sans-serif; text-align: right; } </style> </head> <body> <div class="title"> <h1>MyWeb</h1> </div> <div class="intro"> 徒然なるままに、日記を書いてみたり駄文を書いてみたり…。掲示板へのネタ投稿も歓迎です。(^-^) </div> <div class="navi"> <a href="home.html">HOME</a> | <a href="prof.html">プロフィール</a> | <a href="diary.html">日記</a> | <a href="essay.html">エッセイ</a> | <a href="bbs.html">掲示板</a> | <a href="links.html">リンク</a> </div> <div class="menu"> <p>日記メニュー</p> <ul> <li><a href="200X08.html">200X年 8月</a></li> <li><a href="200X07.html">200X年 7月</a></li> <li><a href="200X06.html">200X年 6月</a></li> <li><a href="200X05.html">200X年 5月</a></li> <li><a href="200X04.html">200X年 4月</a></li> <li><a href="200X03.html">200X年 3月</a></li> </ul> </div> <div class="main"> <h2>200X年9月</h2> <p> 9月になりました。朝夕の電車内には（大学生を除く）学生の姿も多くなりました。 学生の夏休みは終わったようですが、私はまだ今年の夏休みを取っていません…。 ああー、いつ休めるのかなあ。(^_^;) </p> </div> <div class="footer"> <p class="returnlink"><a href="home.html">HOMEへ戻る</a></p> <p class="copyright">Copyright © 200X Sakura Kinomoto.</p> </div> </body> </html>
- skclamp
- お礼率20% (3/15)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
paddingは、そのボックスモデルの内辺を決めるだけで、内容そのもの(ここだとテキスト--インライン要素)のマージンを決めるものではありません。 floatする要素の外側を決めるのはmarginですが、そのボックスのサイズにmarginを加えたものの周囲の内容との隙間を決めます。 わからないときは、仕様書を確認するのが正確な知識を得られます。 ★ボックスモデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html ) ★9.5 浮動体（Floats） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#floats ) (注) この邦訳は、CSS2.0のものです。現在標準とされているCSS2.1( http://www.w3.org/TR/CSS2/ )で、いくつか変更がありますので注意してください。CSS2.1の邦訳はありません(知りません)。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
div.title { float: left; width: 200px; margin-right:20px; } だけで、とりあえず修正は出来ます。 ただ、あまり良いサンプルコードとはいえないので、対処療法に過ぎません。あまり嵌らないように。
補足
ORUKA1951様 早速のご回答有難うございました。 ご指示のとおり入力しましたところうまく「徒然」 前に10pxの余白が出来ました。超初心者で疑問が残るのですがdiv.intro内のpadding: 0.5em;は生きていて上下左右の余白を指定しているようですが、なぜ上部だけで左側の余白は移動しないのかわかりません。 本当にご回答有難うございました。
- ・真 綾・（@Ma-yan_bh1011）
- ベストアンサー率30% (79/257)
パディングってのは、ボックスの「内側」の空間。だから要素間の空間を調整するのには使えない。外側はmarginです。
補足
Ma-yan_bh1011様 早速のご回答有難うございました。div.title内にmargin-right: 10px;と入力しましたところうまく徒然」の前に10pxの余白が出来ました。超初心者で疑問が残るのですがdiv.intro内のpadding: 0.5em;は生きていて上下左右の余白を指定しているようですが、なぜ上部だけで左側の余白は移動しないのかわかりません。 本当にご回答有難うございました。
関連するQ&A
- ＣＳＳレイアウト positionについて
下記のタグにてpositionタグを使って指定した場合 ＩＥの文字サイズを変更しるとcopyrightと言うboxが ずれてしまいます。ずれない方法はありませんでしょうか？ お分かりの方のご回答をお待ちしております。 なお簡単なタグを記載してくれると幸いです。 body { margin-left:3em; margin-left:3em; } .mainspace { width:480px; position:absolute; left:260px; padding-top:10px; padding-bottom:10px; } .leftmenu { width:200px; height:280px; position:absolute; left:50px; padding:5px; } .rightmenu { width:200px; height:280px; position:absolute; left:750px; padding:5px; } .copyright { text-align:center; position:absolute; left:50px; top:480px; width:900px padding-bottom:10px; padding-top:10px; } ＨＴＭＬ <h1>タイトル</h1> <div class="mainspace"> <h2>タイトル</h2> <br> <h2>タイトル</h2> <br> </div> <div class="leftmenu"> <h3>メニュー</h3> <ul> <li><a href="">テスト</a></li> <li><a href="">テスト</a></li> </ul> <h3>メニュー</h3> <ul> <li><a href=""></a>テスト</li> <li><a href=""></a>テスト</li> </ul> <h3>メニュー</h3> <ul> <li>テスト</li> <li>テスト</li> </ul> </div> <div class="rightmenu"> <h3>サブタイトル</h3> <br> </div> <div class="copyright"> test </div>
- ベストアンサー
- HTML
- margin,paddingなどで困ったことがあります。
現在、HPを作っています。 そこで相談なのですが、FirefoxやOpera、IE8、IE8のIE7互換モードなどで表示の違いがありました。 その部分のソースはこちらです <div class="menu"> <span><h4>Link</h4></span> <p><a href="javascript:void(0)">リンク1</a></p> <p><a href="javascript:void(0)">リンク2</a></p> </div> そしてCSSのソース（一部）です。 div.menu{ font-size: 10pt; color: #000000; font-weight: bold; margin: 3px; padding: 4px; border: 4px groove #000000; width: 178px; background-color: #eeeeee; } div.menu span{ display: block; text-align: center; } div.menu h4{ color: #000000; font-size: 26px; padding-bottom: 10px; padding-top: 10px; } このCSSのソースのどこを修正すれば、正しい表示になるでしょうか？ 表示は送付画像のような表示です。
- 締切済み
- HTML
- 背景色を入れたいのですがよろしくお願いいたします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="author" content="xxxxxxxx" /> <meta name="keywords" content="xxxxxxxx" /> <title>xxxxxxxx </title> <link ref="stylesheet" type="text/css" href="cut.css" /> <style type="text/css"> body {margin: 0px 5em; } #container { width:800px; margin-left:auto; margin-right:auto; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; border-color:#000000; } #header {background-color:#ffffff;}←ここの色を黒に変えたいのですが変わりません。 どうすればいいのでしょうか？ h1 { margin-left:20px; color:#ffffff; font-size:1.25em; padding-top:30px;} ul {list-style-type:none; margin-left:100px; padding-left:0px;} li {display:inline; padding-right:20px; font-size:1.0em;} li a {text-decoration:none; line-height:2.2 } a { color:#000000} a:hover {color:#990000; } address a:hover {color:#990000;} p { font-size:1.25em; margin-left:50px; color:#ffffff;} .isu {text-align:right; margin-right:2px; } .moji {font-size:2em; line-height:200%; } .name { color:#ffff99; text-align:right; margin-right:50px; margin-bottom:50px; text-align:bottom;} .champ {text-indent:1em; font-size:2em;} .midasi { color:#ffff99; text-align:bottom; margin-left:100px; } .coment { color:#000000; text-align:left; margin-left:150px; line-height:2em; width:600px;} .http {font-size:0.9em; color:#000000; text-align:right; margin-right:0px; line-height:2em; padding-right:30px;} .denwa {color:#000000; text-align:right; line-height:2em; padding-right:30px;} hr {background-color:#000000; height:2px; width:250px; align-right;} .addless {text-align:right; color:#000000; padding-right:30px;} </style> </herd> <body> <div id="container"> <div id="header">←ここから <h1>xxxxxxxx </h1> <p class="isu"><img src="isuA.jpg" alt="xxxxxxxx" align="right" width="400px" height="250px" /> <br /> <p class="moji" >xxxxxxxx</p> <p class="champ">xxxxxxxx</p> <p class="midasi">xxxxxxxx</p> <p class="name">xxxxxxxx</p> <br /clear="all"></p> <br /> </div>←ここまでの背景色を黒に変えたいのですが変わりません。 どうすればいいのでしょうか？ <br /> <br /> <p class="http">xxxxxxxx</p> <p class="addless">xxxxxxxx</p> <hr width="250" size="10" align="right"> <p class="denwa"> (黒電話) xxxxxxxx</p> <ul> <li><a href="top.html">トップページ</a></li> <li><a href="profile.html">プロフィール</a></li> <li><a href="staff.html">スタッフ</a></li> <li><a href="ryoukin.html">メニュー・マップ</a></li> <li><a href="mail.html">お客様メール</a></li> </ul> <br /> <br /> <p class="coment">xxxxxxxxxxxxxxxxxxxxxxxx</p> <br /> <br /> <br /> <address>Copyright(C)<a href="mailto:saitou@gmail.com">Hair Salon Saitou</address> </div> </body> </html>
- ベストアンサー
- Windows XP
- 以下のソース（市販の本のもの）について質問です。
このソースをブラウザ表示して頂きたいのですが、ヘッダーの上のメニューはdisplayのinlineが使われているのですが、これをfloatのメニューに変えることはできますか？私が試しにfloatでやってみると、回り込みが起きてしまいます。clear both等も試しましたが・・・ シュチエーションとしては、最初はヘッダーの下にfloatを使った横並びのメニューをヘッダーの上のメニューに変更するというものです。画像は表示されませんので、悪しからずご了承ください。 - - - - - - - - - - - - - - - - - - - - - - - -ソ ー ス - - - - - - - - - - - - - - - - - - - - - - <html> <head> <title>SAMPLE</title> <style type="text/css"> a {color: #017acd} /* コンテナ */ div#container {width: 760px; margin-left: auto; margin-right: auto } /* ヘッダー */ div#header {background-color: #017acd; background-image: url(sky.jpg); padding: 28px 20px 100px; margin-bottom: 30px} div#header h1 {margin: 0} div#header p {color: #ffffff; font-size: 0.75em; margin: 0} /* メニュー */ ul#menu {font-size: 0.75em; margin-left: 0; padding-left: 0; margin-bottom: 7px; text-align: right;} ul#menu li {list-style-type: none; display: inline; } ul#menu li a {text-decoration: none; border-left: solid 1px #005087; padding: 3px 10px} ul#menu li.menulast a {border-right: solid 1px #005087} /* コンテンツ */ div#content {width: 564px; margin-left: auto; margin-right: auto} div#content h2 {background-color: #014471; background-image: url(bar-darkblue.png); background-repeat: no-repeat; font-size: 1em; color: #ffffff; line-height: 45px; padding-left: 12px; margin-bottom: 0} div#content h3 {background-color: #ffffff; background-image: url(maru-skyblue.png); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0; margin-left: 12px; margin-right: 12px} div#content p {font-size: 0.75em; line-height: 1.6; margin-top: 10px; margin-left: 12px; margin-right: 12px} /* フッター */ div#footer {background-image: url(line-blue.png); background-repeat: repeat-x; margin-top: 25px; padding-top: 8px} address {font-size: 0.75em; font-style: normal; text-align: center} </style> </head> <body> <!-- コンテナ --> <div id="container"> <!-- メニュー --> <ul id="menu"> <li><a href="link.html">トップページ</a></li> <li><a href="link.html">会社情報</a></li> <li><a href="link.html">サービス案内</a></li> <li><a href="link.html">お問い合わせ</a></li> <li class="menulast"><a href="link.html">ブログ</a></li> </ul> <!-- ヘッダー --> <div id="header"> <h1><img src="logo.gif" alt="Green Leaf" /></h1> <p>生活を楽しくする情報をもっと身近にお届けします</p> </div> <!-- コンテンツ --> <div id="content"> <h2>サービス案内</h2> <p>Green Leafは生活を楽しくするサービスを、もっと身近にお届けするために活動している企業グループです。情報サイトやショッピングサイトを通じてさまざまなサービスの提供を行い、みなさまをサポートいたします。</p> <h3>情報サイト「Green Leaf」</h3> <p>情報サイト「Green Leaf」では、「生活を楽しくするサービスをもっと身近に」をテーマに、日常生活で役に立つサービスの情報をお届けします。生活を楽しくするためには、「衣」「食」「住」を満たすことが大切です。そのために必要な情報を充実させました。最新のファッション事情から洋服のリサイクル情報、安全でおいしい食材にレシピ、それを味わえるレストラン、住まいを快適にアレンジするテクニック、職人に支えられた伝統の技などなど… 楽しみながら活用していただければと思います。</p> <p>また、「遊」を充実させる情報として、関東、関西圏を中心としたレジャーや癒しのスポットを紹介します。名所・旧跡に温泉、日帰り旅行からちょっとした贅沢な旅まで取り揃えていく予定です。</p> <h3>ショッピングサイト「Green Shop」</h3> <p>ショッピングサイト「Green Shop」では、情報サイト「Green Leaf」で紹介した "いいもの" や "おもしろいもの" を購入していただけるようにしています。</p> <p>そのほかにも、ショップ内のToy Boxコーナーではヨーロッパやアフリカの遊び心にあふれる玩具を、Candy Boxコーナーではカラフルでおいしいお菓子をたくさん扱っています。また、地域ごとの地場産野菜の宅配も承っておりますので、ぜひご利用ください。</p> </div> <!-- フッター --> <div id="footer"> <address>Copyright (C) Green Leaf, All rights reserved.</address> </div> </div> </body> </html>
- ベストアンサー
- CSS
- フッターの画像の位置づけ指定方法がわからない
ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; /*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ display: block; line-height: 25px; text-decoration: none; text-align:right background-img:url(.gif); padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 color: #8b1c62 } ul.sidemenu ul {margin: 0; padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; color:#ffffff; border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～ <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。
- 締切済み
- CSS
- 外部CSSがIEで無反映
Web制作初心者です。 ポートフォリオとしてサイトを2つくらい作ったのですが、2つとも Google Chromeで表示確認をしていて、出来上がってから Internet Explorerでも表示確認をしてみたら、IEでは 外部CSSが全く反映されていない状態でした。 何がダメなのか全くわかりません。 お手数ですがご助言お願い致します。 ------------HTML----------------- <!doctype html> <html> <head> <meta charset="text/html; charset=utf-8"> <meta name="descrption" content=""> <meta name="keywords" content=""> <link rel="stylesheet" type="text/style" href="common.css"> <link rel="stylesheet" type="text/style" href="index.css"> <title> Profile-TOP- </title> </head> <body> <div id="wrapper"> <!--*************ヘッダー部分*************--> <div id="header"> <h1>My Profile Site</h1> <!--ナビゲーション部分--> <div class="navi"> <ul> <li class="top">TOP</li> <li><a href="profile.html">Profile</a></li> <li><a href="design.html">Design</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!--/navi--> </div><!--/header--> <!--************コンテンツ部分************--> <div id="content"> <a href="profile.html"><img src="images/NY.png" alt="ny"></a> <p class="please">↑<br>Please click the image!</p> <p class="site">当サイトは私のプロフィールやポートフォリオを掲載しています。</p> </div><!--/content--> <!--*************フッター部分*************--> <div id="footer"> <p>Copyright © 2013 nnn All Rights Reserved.</p> </div><!--/fotter--> </div><!--/wrapper--> </body> </html> --------------CSS----------------- -----common----- /*----------body部分---------*/ * { font-family: serif; } body,html { background: url("images/wood_texture4.jpg") ; color: #ffffcc; margin: 0; padding: 0; line-height: 20px; height: 100%; } img { border: none; } /*--------wrapper--------*/ #wrapper { width: 900px; margin: 0 auto; padding: 0; } /*---------header---------*/ #header { background-color: #000000; margin: 0; height: 120px; padding-top: 1px; } h1 { float: left; font-size: 40pt; padding-top: 10px; padding-left: 30px; padding-right: 60px; width: 440px; margin-top: 0; margin-right: 30px; } .navi ul { margin-top: 0; } .navi ul li { list-style-type: none; float: left; width: 80px; margin-top: 28px; margin-right: 2px; padding: 6px 10px; text-align: center; background-color: #151515; font-weight: bold; } a:link { color: #cccccc; text-decoration: none; } a:visited { color: #cccccc; } a:hover { color: #ff6600; } /*------------content---------------*/ #content { background-color: #6e6e3c; clear: left; color: #000000; margin: 0; height: auto; } /*-------footer-------*/ #footer { background-color: #000000; height: 40px; padding: 10px; clear: both; padding-right: 20px; margin-top: 0; margin-bottom: 0; } #footer p { text-align: right; vertical-align: middle; } --------index.css--------- /*content*/ #content img { position: relative; left: 50px; } p { text-align: center; margin-bottom: 0; } .please { color: #ffffff; font-weight: bold; font-size: 15pt; } .site { padding-bottom: 20px; } /*現在のページナビ*/ .top { color: #990000; }
- ベストアンサー
- CSS
- css leftsideだけ色をつける方法
あるサイトのレイアウトを参考にしながらcssの勉強をしています。 html <body> <div id="page"> <div id="head"> <img src="./simpe01/img/logo_img300-60.gif" alt="log_img" width="300" height="60"> </div> <div id="navigation"> <ul> <li><a href="./index.htm">HOME</a></li> <li><a href="./contents/index.htm">コンテンツ</a></li> <li><a href="./link/index.htm">リンク</a></li> </ul> </div> <h1>○○</h1> <div id="leftside"> <p>新着情報</p> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </div> <div id="main"> <h2>ごあいさつ</h2> <div class="imgbox_f"><img src="./img/img_sample.jpg" alt="サンプル" width="200" height="257"></div> <p>画像は<div id="imgbox_f"></div>で囲むと写真右へ。</p> <p>あいさつ文を入力しおく。<strong>太字</strong>は<strong></strong>で囲む。</p> <ul> <li>箇条書き</li> <li>箇条書き</li> </ul> <h2>補足情報</h2> <p>サイトの使い方や、 注意事項を書いておく。 </p> </div> <!-- #foot 画面一番下 --> <div id="pagefooter"> <p>必要ならコピーライトや、サイトの付加情報を書くところ。 </ p> </div> </div> </body> css *{ margin: 0px; padding: 0px; } body { background-color: #FFFFF; font-size: 95%; line-height: 150%; text-align: center; color: #333333; margin: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #FFFFFF; width: 780px; margin: 5px auto; } div#head { padding: 10px 10px 5px 5px; margin: 0px; background: #FFFFFF; } div#navigation { padding: 10px; background: #E188FF; border-top: 1px solid #333333; border-bottom: 1px solid #333333; height: 25%; } div#navigation ul{ margin: 0px; padding: 0px; background: #FFFFFF; } div#navigation li{ float: left; padding: 0px; margin-left: 10px; color: #FFFFFF; list-style: none; } div#navigationu a{ color: #FFFFFF; text-decoration: none; } div#navigation a:hover{ color: #000000; background: #D7E1EC; } div#main { margin: 0px; border-left: 1px solid #CCCCCC; padding: 10px 0px; background: #FFFFFF; width: 560px; float: left; } div#main p{ margin: 0px 0px 20px 10px; } div#main ul { margin-left: 60px; margin-bottom: 1em; margin-right: 30px; } div#leftside { width: 200px; margin: 5px 0px 0px 5px; padding: 10px 0px; float: left; } div#leftside ul{ margin: 0px 0px 0px 5px; list-style: circle; padding-left: 2em; } div#leftside p{ margin: 0px 10px 10px; } div#pagefooter { border-top: 1px solid #333333; padding: 0px; text-align: center; clear: both; margin: 0px; } div#pagefooter p{ margin: 5px 0px; } strong { color: #CC3333; } h1 { font-size: 110%; padding: 25px 15px 5px; border-bottom: 1px solid #CCCCCC; background: #F3F3F3; font-weight: normal; } h2 { font-size: 110%; margin: 0px 20px 20px; color: #333333; border-bottom: 1px dashed #999999; padding: 0px 0px 5px; clear: both; } dl { margin: 0px 0px 50px 40px; } dt { font-weight: bold; } dd { margin-bottom: 10px; } .imgbox { margin: 0px 0px 1em 10px; } .imgbox img{ border: 1px solid #666666; } .imgbox_f { margin: 0px 10px 1em; float: right; } .imgbox_f img{ border: 1px solid #666666; } --------------------------------------------------------------- leftsideだけに色をつけたいのですが、どうしても右側が20px;分 あまってしまいます。色々いじってみたのですが改善されず、行き詰っています。 bodyのwidthが780px; leftsideが200px; mainが560px; 自分としてはmainの560を580に変えれば解決と思っていたのですが、 そうするとmainがleftsideの下にきて形がくずれてしまいます。 20px分はどの部分を変更すればきれいな形になるのでしょうか。 宜しくお願いします。
- ベストアンサー
- HTML
- HTMLやcssに詳しい方教えてください
HTML、cssに詳しい方、助言お願いします。 footerの部分なのですが、footerより上の部分（サイドのナビやメイン部分）にj Query、javascriptを入れる（入れたのはアコーディオン）と、footerの部分がおかしくなります（footerのbackground-colorが一部消えるなど） どなたか、もしおかしい部分があるのでしたら、おかしい部分の指摘をお願いします。xxxはテキストを入れている部分です。 footerのHTML <div class="footercolor clearfix"> <div id="footer"> <div class="footerbox1"> <ul class="footertext1"> <li><a href="../ranking.html">ｘｘｘ</a></li> <li><a href="../area-top/area.html">ｘｘｘ</a></li> </ul></div> <div class="footerbox2"> <ul class="footertext2"> <li><a href="../index.html">ｘｘｘ</a></li> <li><a href="../site.html">ｘｘｘ</a></li> <li><a href="../info.html">ｘｘｘ</a></li> <li><a href="../system.html">ｘｘｘ</a></li> </ul></div> <div class="footerbox3"> <ul class="footertext3"> <li><a href="../inquiry.html">ｘｘｘ</a></li> </ul></div> </div> <address class="copyright">Copyright (C) ｘｘｘ.com 2014 All Rights Reserved.</address> footerのcss .footercolor{ background-color:#FFCC99; } #footer{ width:960px; margin:0 auto; } .footerbox1{ width:320px; float:left; } .footerbox2{ width:320px; float:left; } .footerbox3{ width:320px; float:left; } .footertext1{ text-align:center; margin-top:12px; list-style:none; padding:3px; } .footertext2{ margin-top:12px; list-style:none; padding:3px; text-align:left; margin-left:80px; } .footertext3{ text-align:center; margin-top:12px; list-style:none; padding:3px; margin-left:50px; } .footertext1 a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .footertext2 a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .footertext3 a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .copyright{ clear:both; text-align:center; font-weight:bold; padding-top:50px; padding-bottom:10px; }
- 締切済み
- SEO
- Firefoxにpaddingが反映されない
ホームページ作成初心者です。 コンテンツ全体を罫線で囲って線と内容の間に余白を入れたいのですが、 IEでは余白ができるのにFirefoxでは線と内容がくっついてしまいます。どうすればIEと同じように表示できますか？ <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <style type="text/css"> body{color: #444444; background-color: #ffffff; margin-left: 3em; margin-right: 2em; margin-top: 0em; margin-bottom: 0em;} h1{font-size:1.1em; color: #663333;} p {font-size: 0.75em; color: #000000; line-height: 1.35em} div {font-size: 1em; color: #000000; line-height: 1.35em} a {color: #000000; text-decoration: none;} a:hover {color: #696969;} a:visited {color: #d2b48c;} ul {list-style-type: none; margin-left: 0em; padding-left:0em;} li {display: inline; padding-right: 3px; font-size: 0.75em;} div#box {border-style: solid; border-width: 1px; border-color: #336666; padding: 1em; } </style> </head> <body> <div id="box">○○</div> </body> </html>
- ベストアンサー
- HTML
- レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">©＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }
- 締切済み
- その他([技術者向] コンピューター)
お礼
ORUKA1951様 何度もご親切にお教え頂き有難うございました。 なんかうっすらと分かってきたような 気がします。 ★ボックスモデルで勉強してみます。 本当に有難うございました。