- 締切済み
【CSS】HTML直書き→外部ファイルにしたい
HTMLにCSSを適応する方法としていくつかあると思いますが、 こんな風に↓ <div style="height:90px; width:300px; text-align:center; float:left;"> HTMLソース内に『直書き』してあるものを外部CSSに書き直すには どうしたらいいですか？ 当方、他の外部CSSをちょこっといじって変更したり HTMLの簡単な更新経験程度の知識しかありません。 タグ名｛プロパティ：値｝みたいなルールは分かるのですが、 すべてを最初から書くのが初めてで、何から手を付けていいのか 分かりません。 こうしてみたら？とか、私ならこうする、という アドバイスを頂けると助かります。 お詳しい方、回答よろしくお願いします！
- question_xxx
- お礼率0% (0/10)
- HTML
- 回答数6
- ありがとう数1
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.4です。 実際の例を見るのが最も分かりやすいでしょう。いつも、こういう時に使っている簡単なサンプルをあげておきます。 ★タブは＿に置換してあるので戻す。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★Another HTML-lint 5( http://www.htmllint.net/ ) のDATA入力(右上)でチェック済み ★外部に持ちだせば、同じ文書構造のHTMLには一つのスタイルシートだけでHTMLを一切触らずにデザインを変更できます。 [例] ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) でchrome以外のブラウザで[表示メニュー]→[スタイル)シート)]で、スタイルシートを変えるだけでデザインが変えられることが実感できるでしょう。 ★プロパティはすでに御存知ですから、カスケーディングの仕組みを身につければよいです。CSSと言うくらいカスケーディングはCSSの肝です。実はコレを知らずにスタイルシートを使うのは早すぎる・・と言われるくらい。 その意味でもHTMLのstyle属性での指定はまずいのです。詳細度が[1,0,0,0]になりますから、外部スタイルシートではデザインを変更できません。 【サンプルの見方】 /* ここから、ひとつの宣言ずつ追加してみる。(行頭の/* をひとつずつ消していく */ 以降の/* を一行ずつ消していく。 先に紹介した仕様書と照らし合わせながら・・ <!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> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- /* 分かりやすいように着色 */ body{background-color:gray;} div.header{background-color:yellow;} div.section{background-color:white;} div.aside{background-color:lime;} div.nav{background-color:aqua;} div.footer{background-color:fuchsia;} /* ここから、ひとつの宣言ずつ追加してみる。(行頭の/* をひとつずつ消していく */ html,body{ /* margin:0; /* padding:0; } p{ /* margin:0; /* line-height:1.6em; /* text-indent:1em; } div.header,div.section,div.footer{ /* width:80%;min-width:640px; /* padding:5px 10px; /* margin:0 auto; /* position:relative; } div.section div.nav, div.section div.aside{ /* font-size:0.9em; /* width:180px; /* padding:5px; /* position:absolute; /* top:0; /* height:100%; } div.section h2,div.section p,div.section ul{ /* margin:0 200px; } div.section div.nav{ /* left:0; } div.section div.aside{ /* right:0; } div.section div.nav p, div.section div.aside p{ /* margin:0; } div.section p:first-letter{ /* font-weight:bold; /* font-size:1.5em; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>ここに本文記事を書く</p> ＿＿<p>HTMLには、デザインに関することは書かず文書構造だけ書くようにすると、後々のメンテナンスも楽になります。ほかじゃない、一番助かるのは自分ですね。</p> ＿＿<p>HTML5の場合は、これらのclass名がそのまま要素になります。</p> ＿＿<ul> ＿＿＿<li><div class="header">～</div><br>⇒<header>～</header></li> ＿＿＿<li><div class="section">～</div><br>⇒<section>～</section></li> ＿＿＿<li><div class="aside">～</div><br>⇒<aside>～</aside></li> ＿＿＿<li><div class="nav">～</div><br>⇒<nav>～</nav></li> ＿＿＿<li><div class="footer">～</div><br>⇒<footer>～</footer></li> ＿＿</ul> ＿＿<div class="aside"> ＿＿＿<h3>本文とは直接関係しないasideな記事</h3> ＿＿＿<p>ここには参考サイトなど直接本文と関係ないが、あると良い情報など。</p> ＿＿</div> ＿＿<div class="nav" id="siteMap"> ＿＿＿<h3>ナビゲーション</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/products">Products</a></li> ＿＿＿＿<li><a href="/manual">Manual</a></li> ＿＿＿＿<li><a href="/profile">Profile</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2013-08-02 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- play_with_you
- ベストアンサー率37% (112/301)
横だけど。 ＞HTMLにカスケード（連結）させるので これは嘘なので真に受けないように。 Cascadeの意味は「滝」だし、「滝が流れ落ちるように効果を上から重ね合わせていける」から「カスケーディングスタイルシート」ですから。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そのまえに、HTML自体を復習しておくほうが良いでしょう。すでに、ある程度HTMLを理解されているなら、ここいらで一度復習して抑えておくと良いです。 そこで、 ⇒HTML 4.01仕様書(邦訳) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) を「通し」で、読んでおかれると良いです。なぜ、『HTMLソース内に『直書き』してあるものを外部CSSに書き直す』のか？を理解して、目的をもたれたほうが上達が早いです。 実際に、スタイルシートに関しては ・構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 「広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる」 ・14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 『著者はひとまとまりの文書には共通のスタイルシートを利用する。 この場合、スタイルルールを文書内部に分配することは、1つの外部スタイルシートにリンクすることよりも実際に効率が低下する。なぜなら外部スタイルシートにリンクした場合、大部分の文書にとっては、ローカルのキャッシュにスタイルシートが既に存在するからである。優れたスタイルシートが公有されることで、この効果は増大するだろう。 』 ・14.3 外部スタイルシート( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.3 ) 『・著者及びWebサイト管理者が、複数文書間(及び複数サイト間)でスタイルシートを共有できる。 ・著者が、文書に変更を加えることなくスタイルシートを変えられる。 ・ユーザエージェントが、メディア記述子に基づき、スタイルシートを選択的に読み込める。』 などが目的です。 外部に置く方法は、引き続いて 外部スタイルシート 優先スタイルシートと代替スタイルシート 外部スタイルシートの指定 カスケードするスタイルシート メディア依存のカスケード 継承とカスケード に詳しく書かれています。 ★とりあえず、簡単な練習として、HTMLの<head></head>内に記述する練習をされると良いでしょう。 上の説明で言うと ・著者が、文書に変更を加えることなくスタイルシートを変えられる。 ・ユーザエージェントが、スタイルシートを選択的に読み込める。 ますから、 <head></head>内に <style type="text/css" media="screen"> <!-- h1{ color: red } p{ color: blue} --> </style> のように書きます。 h1やpはセレクタ(選択子/識別子)と呼ばれるもので、このセレクタによって、HTML内のどの要素にスタイルを適用するかを指定します。 [例] div.section p{ font-size:0.9em; } は、ブラウザのみ!!classにsectionをもつdiv内のp要素について、10%小さな文字を指定しています。印刷には適用されません。 一番のポイントは、このセレクタの書き方です。 ・REC-CSS2 邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html ) の ⇒5.セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) ⇒6.値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) このセレクタの書き方を覚えることが「文書構造とプレゼンテーションを切り離す」ポイントになります。
- naokita
- ベストアンサー率57% (1008/1745)
参考書を一冊買った方が良いよ。 そのまま各種独自にすすめると痛い目に合うから・・・というか無駄な失敗を繰り返すよ。 CSSには、貴方の方法のstyle属性（インラインCSS）という方法以外に、 link要素 style要素 の３種類の方法があって、貴方のいう外部CSSは、link要素を利用する方法。 セレクタやプロパティを理解しているのなら、 １、CSSファイルを作って ２、CSS書いて ３、linkさせる これだけ。 その場合、順不同だけど、 htmlファイルのhead内に、外部CSSを参照するlinkを指定する。 <link href="import.css" media="screen" rel="stylesheet" type="text/css"> ↑↑↑↑↑ 参照パス/ファイル名を指定 で、 メモ帳にでも、そのCSSの記述を書いて、 例、body{ background: yellow;} その同じ名前（上記例：import.css）で、CSSとして保存 HTMLにカスケード（連結）させるので、カスケーディングスタイルシート（CSS）と云う。
CSSの書き方がわからないのであれば、CSSを解説しているサイトを参考にしてみてはいかがでしょうか？ ちなみに、私が参考にしているサイト→http://www.htmq.com/ CSSの基本や法則を知っておけば、あとはプロパティなどを調べるだけでなんとかなると思います(笑) 他にもたくさんのサイトがあるので、自分に合ったサイトを探してみてください(＾＾)
- play_with_you
- ベストアンサー率37% (112/301)
インラインから外部ファイルへ移行するのにあたり、「どうしたら」という方法はありません。 タグ名、ID、クラスを利用し、その要素を識別できるような状態にしてからCSSを書くしかありません。 <div style="height:90px; width:300px; text-align:center; float:left;"> これが ●● { height:90px; width:300px; text-align:center; float:left; } となるのは分かりますね？ ●●の部分は、この<div>の部分（以下「A」）を識別できるような何かを自分で組みます。 タグ名に限らずIDやクラス、またはその組み合わせを記載します。 どちらにせよ、つまりはあなたのサイト構造がわからないとこれ以上いえません。 とりあえず例として #wrapper div{} 「A」の外にID="wrapper"が付いたブロックがあり、wrapperの直下の要素は「A」だけである場合。 #contents{} 「A」にID=""contents"を振る場合。 などがあります。 ちなみに、先々のことを考えて、「CSSのためのIDやクラスはいけない」ということは一応覚えておきましょう。 別にブラウザはそんなとこまで判別できないのでちゃんと表示してくれますが、原理主義の人がうるさくなるので知識としては知っていてください。
関連するQ&A
- HTML CSSを、教えてください。
お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか？ （オレンジ画像 width＝100 height＝50 でお願いします。） 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }
- 締切済み
- CSS
- HTML、ＣＳＳ が、なかなかうまくいきません。
お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。
- 締切済み
- CSS
- CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
- CSSで全体をセンタリングしたい
navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ？レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか？ ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------
- ベストアンサー
- CSS
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- 外部ＣＳＳからクラスを呼び出すとき
ＣＳＳスタイルシート初心者です。 ネットショップを運営しているのですが、ほぼ同じレイアウトの商品紹介ページが多数あるため、外部ＣＳＳファイルを読み込ませて統一したいと思っています。 Ｈ１などのＨＴＭＬタグはちゃんと外部ファイルで設定して読み込ませることができるのですが・・・、 .text01{ text-align : left; margin-left : 10px; font-size : 14px; } 上記のように自分が作ったクラスをＨＴＭＬソースの中でどのように呼び出してよいのかいまいちわかりません。 本を読んでいると埋め込み方は、<div class="text01">・・・</div>のような感じで<div>でくくって記述するように書いてあるのですが、外部ＣＳＳの場合もこのような形で記述してよいのでしょうか？ ホームページビルダーを使っていて、上記のように指定すると、ＣＳＳがテキストに適用はされるのですが、なぜか上記で表示した部分が赤色でエラーになっていることを示してしまいます。 何か文法的に誤っている所があるのでしょうか？ どなたか是非アドバイスを宜しくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
- 制作したHTMLとCSSがうまく表示されません・・
3日間色々いじってますが、解決法がわからないため助けてください。 素人なもので、状況説明がわかりづらくてすいません。 WinVistaを使用して、無料テンプレート（配布元：http://pondt.com/内おすすめテンプレート左上 ビルガラス画像のものNo.18を使用）をKompozerで加工しました。 外部cssも使用してますが、フォルダからhtmlを開くと、IEでは正常に表示されますが、firefoxではうまく表示されません。 FFFTPでアップしたHPでは、IE・firefoxそれぞれ違った形に崩れてしまい、うまく表示されません。 （URL http://i.gmobb.jp/aki_enyce/） トップページはまだまともに表示されてますが、他ページが崩れています。 外部cssの一部を抜粋して記載します。 本当に困っています。どなたかお教えいただけますでしょうか。 よろしくお願い致します。 ≪CSS 各ページ共通部≫ div#wrapper{ margin: 0 auto; text-align: left; width: 100%; line-height: 1.8; } div#wrapBg{ border-top: 1px #dedede solid; background: url(../../../images/haikeimain.jpg) no-repeat top; } div#header{ width: 960px; height: 79px; margin: 0 auto; text-align: left; background: url(../../../images/haikeiheader.jpg) no-repeat top; } div#header h1{ float: left; width: 116px; margin: 0px 0px 0px 0px; padding: 0px 0 0 0px; } div#header h2{ float: left; margin-left: 30px; margin-right: 10px; padding-top: 20px; } div#footer{ text-align: center; margin-top: 30px; padding-top: 5px; padding-bottom: 5px; background-color: #D3B688; } ≪トップページ以外の共通ページ（ヘアカタログページを除く）≫ div.wrapBox{ width: 960px; margin: 0 auto; padding: 30px 0; } div#mainContents{ width: 700px; float: right; } /*---- hair catalog画像 ----*/ div#mainContents div.topicsBox{ float: left; margin-left: 20px; margin-bottom: 40px; } div#mainContents div.firstItem{ float: left; margin-left: 30px; margin-bottom: 40px; } /*---- map 画像 ----*/ div#mainContents div.mapBox{ background: url(../../../images/illure/map.png) no-repeat; width: 695px; height: 425px; } div#leftContents{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: url(../../../images/baner/shiroki.gif) no-repeat top; width: 200px; float: left; padding: 0px; font-size: 15px; font-weight: bold; }
- ベストアンサー
- HTML
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- 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
