HTMLいじったらデザインが崩れました。ホームページ作成に困っています。
- 初心者ながらも空いた時間を使い、コツコツ作成してきたホームページのデザインが突然崩れてしまいました。1週間も修復に悪戦苦闘しています。
- 特に、テーブルとテーブルの間に<p style='font-family: MS 明朝;font-size: 20pt'>ＰＩＣＵＰ<span> / 注目商品</span></p></div>を入れたいのと、サブメニューが下にずれこんでしまいます。
- また、CSSの一部も提供していますが、何かおかしな箇所があるかもしれません。どなたかご教授いただけると幸いです。
- ベストアンサー
HTML いじったらデザインが崩れました。
ホームページ作成について。初心者です。大変困っています。 初心者ながらも空いた時間を使い、コツコツ作成してきたのですが、ある日なにをどういじったのかデザインがガラッと崩れてしまい、修復不能なまま１週間戦い続けましたがもう駄目です。どなたかお分かりになる方、どうかどうかご教授願います。 テーブルとテーブルの間に <p style="font-family: MS 明朝;font-size: 20pt">ＰＩＣＵＰ<span> / 注目商品</span></p></div>を入れたいのと、サブメニューがかなり下にずれこんでしまったので、上に戻したいです。 ＨＴＭＬ↓（文字数が多いので一部省略しています） <std{border: 1px botted #000000;} .uenashi td{border-top:0px;} .hidarinasi td{border-reft:0px;} {width:230px;height:230px} </style> <STYLE> TABLE.dotBorder { border-collapse: collapse; border-style: dotted frame: void magin-left: 100px; } TABLE.dotBorder TD{ width: 200px; height: 50px; border: 1px dimgray dotted; } </STYLE> <body> <div align="center"> <div id="field_spc"> <div id="logo_mono"> <img src="img/monochrom5.png" alt="monochrom" style="margin: 0; paddin:0;"> </div> <!-- トップ枠 --> <div id="top_waku"> <img src="img/bords.jpg" width="950" height="500" alt="モノクローム"> </div> <!-- メインコンテンツ --> <div id="main_spc"> <Table class="dotBorder"> <tr align="right" valign="bottom"> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品 ７月３０日～発売予定"> 1.新商品</td> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品 ７月３０日～発売予定"> 2.新商品</td> </tr> <tr align="right" valign="bottom"> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品 ７月３０日～発売予定"> 1新商品</td> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品 ７月３０日～発売予定"> 2新商品</td> <!-- サブコンテンツ --> <div id="sub_spc"> <img src="img/menu.png"> <div class="midashi"> <span class="big">ＭＥＮＵ</span> </div> <div class="column"> <a href="./index.html">1.トップページ</a><br> <span class="hutomoji">2.テーマ</span><br> <a href="./link.html">3.リンク</a> </div> どなたかお願いします・・・ ＣＳＳはこちらです↓ body { background-image: url(); margin-top: 0px; margin-bottom: 0px; margin-left: 0%; margin-right: 0%; padding: 0px; text-align: center; line-height: 150%; font-family: ＭＳ ゴシック,sans-serif; color: #333333; font-size: 14px; } #field_spc{ width: 1000px; margin: 0px 0px; background-image: url(img/.jpg); padding: 0px 10px; } #logo_mono { width: 70px; height: 70px; margin: 0; margin-bottom: 0; padding: 0; } #top_waku { width: 950px; line-height: 350px; margin-top: 0px; margin-bottom: 20px; border: 3px ridge #ffff00; background-color: #ffffff; padding: 0px 0px 0px 0px; text-align:; } #menu_block { margin-top: 10px; font-size: 25px; font-family: cursive; } #news_1 { margin-top: 40px; margin-left: 20px; text-align: left; } #main_spc { width: 40%; margin-top: 0px; margin-bottom: 20px; margin-left: 60px; margin-right: ; padding: 0px 10px; text-align: left; float: left; } #sub_spc { width: 22%; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 20px; padding: 0px 0px; text-align: left; float: right; } #tb2 { width: 70%; margin-top: 0px; margin-bottom: 20px; margin-left: 60px; margin-right: ; padding: 0px 10px; text-align: left; float: left; } .fe { clear: both; } .ao_waku { background-color:gray; margin-top: 10; padding-bottom: 5; h2 { font-size: 18px; color: #ffffff; display: inline; } p { margin-top: 0px; } strong { font-size: larger; background-color: green; color: white; padding: 3px 5px; } .hutomoji { font-weight: 700; } .black { color: #000000; } .red { color: #ff0000; } .blue { color: #0000ff; } .gray { color: #808080; } .green { color: #008000; } .big { font-size: 18px; font-weight: 700; } .midashi { width: 90%; background-color: #dd9900; padding: 5px; border: 2px solid #dd9900; text-align: center; color: #ffffff; } .column { width: 90%; margin-bottom: 20px; background-color: #ffffff; padding: 5px; border: 2px solid #dd9900; text-align: left; line-height: 120%; color: #333333; } a:link { text-decoration: underline; color: #0000ff; } a:visited { text-decoration: underline; color: #0000ff; } a:hover { text-decoration: underline; position: relati
- monochro-me
- お礼率83% (5/6)
- HTML
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
ウェブ標準(HTML4.01strict+CSS2.1)の範囲内で書いてみました。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★Another HTML-lint gateway ( http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html ) ↑Lintを使いましょう。なにが間違っているかと共にどうすればよいかも示してくれる。100点でなくても良いが可能な限りそれに近づくように。 class名は、HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )の意味や使い方を参考にしています。そのため、このままHTML5の練習にもなる。 ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 細かいスタイルは指定してありません。 セレクタや、プロパティの書き方は自分で調べること セレクタの記述とカスケーディングをフルに活用しています。折角カスケーディングスタイルシートを使うのですからね。セレクタとカスケーディングはCSSの最も重要な仕組みです。 ・継承するものは出来るだけ上位に書いて継承させる ・上書きするときは詳細度を高くする ⇒セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) ⇒値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) ★HTMLには文書構造しか書いてないので、HTMLだけでなくスタイルシートも簡単でわかりやすくなる。 もちろん、あとでまったく異なるデザインに変更することも自由自在です。 そして、検索エンジンにも内容を的確に伝えられる--headerとかsection、nav,footerというclass名は理解していますよ。もちろん読み上げソフトも・・。印刷時には素のHTMLとして印刷されるよ。印刷プレビューテー確認 ★タブは＿に変換してあるので戻すこと <!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" media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,p,div{margin:0;100%;} div.header,div.section,div.footer{width:92%;margin:0 auto;max-width:950px;min-width:640px;} h1{text-align:center;} div.header:after{content:url(./img/bords.jpg);display:block;} div.section{position:relative;} #newProduct,p.watchGoods{width:70%;} #newProduct ol,#newProduct ol li{margin:0;padding:0;list-style-position:inside;position:relative;} #newProduct ol li{width:210px;float:left;position:relative;padding:210px 5px 5px 5px;border:dotted 1px gray;} #newProduct ol li img{position:absolute;top:5px;left:5px;} div.section div.nav{position:absolute;right:0;top:0;width:29%;} div.footer{clear:left;} div.section div.nav:before{content:url(img/menu.png);} --> </style> <style type="text/css" media="print"> <!-- div.header h1 img{display:none;} div.header h1:before{content:"モノクローム";} --> </style> </head> <body> <div class="header"> <h1><a href="/index.html"><img src="img/monochrom5.png" width="70" height="70" alt="モノクローム"></a></h1> </div> <div class="section"> <p class="watchGoods">ＰＩＣＵＰ / 注目商品</p> <div id="newProduct"> <ol> <li><a href="./product/fun101.html"><img src="img/fun101.jpg" width="200" height="200" alt="2012年モデル 場所をとらないポール型扇風機:">ポール方扇風機</a></li> <li><a href="./product/vacuum-cleaner52.html"><img src="img/bqc100.jpg" width="200" height="200" alt="2012年モデル 黒色のシックな小型掃除機:">小型掃除機</a></li> <li><a href="./product/fun100.html"><img src="img/fun102.jpg" width="200" height="200" alt="2012年モデル 転倒・子供の悪戯防止付:">安全強化扇風機</a></li> <li><a href="./product/fun99.html"><img src="img/fun103.jpg" width="200" height="200" alt="2012年モデル パステルカラーのベーシックな:">ベーシックモデル扇風機</a></li> </ol> </div> <div class="nav"> <h2>メニュー</h2> <ol> <li><a href="./index.html">トップページ</a></li> <li><a href="./product/">製品</a> <li><a href="./profile.html">会社概要</a></li> <li><a href="./link.html">リンク</a></li> </ol> </div> </div> <div class="footer"> <h2>文書情報</h2> <dl class="documentHistry"> <dt id="FIRST-PUBLISHED">First Published</dt> <dd>2005-06-10</dd> <dt id="LAST-MODIFIED">Last Modified</dt> <dd>2005-06-10 12:00:00 (JST)</dd> </dl> <address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> </div> </body> </html>
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞皆様へ：どうやって学ばれましたか？独学で学べるものでしょうか？ 皆さんは知りませんが、私は独学です。 書籍は古い・・・原稿を書き始めて仕上がって出版するまでに最低でも一ヶ月かかる。通常はもっとかかるでしょう。そして完成したとたんに日々、陳腐化していく。 そんな状態ですから、最新の情報を教えてくれる人はいない。日々追いかけていくのが大変で、教材が出来たと同時に日々過去のものになっていく。 いえね、私の立場からよくわかるのですが、基本的に教壇で教えられる内容は、とっても古いものです。大学でさえ・・、卒業研究生活に入ってはじめて最新の情報に触れる。 そしてこの世界の進歩はとても早い・・。しかし、それが普及するにはとてつもなく長い時間がかかる。現在ウェブ標準とみなされている1999年勧告のHTML4.01strict(transitinalやframesetじゃない)＋2011年勧告のCSS2.1の使われ方を見ていても、とてもじゃないけど活用しているとは思えない。 現在のほとんどのブラウザ(IEを除く)は、これらに対応していますが、それらをうまく使い切っているソースはほとんど見ません。 まあ、少なくともHTML4.01やCSS2.1の仕様書くらいは一通り目を通しておくと良いでしょう。そして今策定中のHTML5やCSS3の最新の情報を追いかけること。幸いに優れた邦訳も数ヶ月もすれば誰かが公開してくれる。 私はとっくに還暦過ぎましたが(^^)、幸いに昔からその方法なのでまだ乗り遅れてはいないと思う。そのうち付いていけなくなるかもね。
お礼
なるほど・・・奥が深いですね。でも、ものすごく興味が湧いてきました！小さいころから物を作ることが大好きで家具を作ったり、部屋のインテリアを定期的に変えてみたりしていましたが、html/cssなどに私の大好き要素がこんなにも詰まっていたとは知りませんでした。もっとはやく出会いたかったです。回答ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ちょっとだけ時間が取れたので、 示されたソースだけではすべてがわかりませんし、画像の意味もわかりませんから、想像を含みます。 示された内容から、HTMLは下記のような内容しかありません。これ以上、何も書く必要はありません。 ★非推奨の属性は使わない [例]<tr align="right" valign="bottom"> →<tr>→スタイルシートで [例]<div align="center"> 不要--スタイルシートで ⇒http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html#adef-align-CAPTION ★文書構造を示すclass名をつける [例]<div id="field_spc">→不要？？？ <div id="logo_mono">→不要？？？ <div id="top_waku">→class="header"とか <div id="main_spc">→class=section" 【重要】⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) ★tableをデザインのために使ってはならない <table class="dotBorder">→ダメ 【重要】⇒非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) 【重要】⇒ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 1999年勧告のHTML4.01にすでに 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 と書かれています。 推奨しない ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#deprecated ) あなたの書かれたHTMLは、下記のようなシンプルなもので必要十分なのです。これだったらスタイルシートもとても簡単になります。この程度だったらあなたは簡単に書けるはずですね。 1) 非推奨の要素・属性は使わない 2) (意味的な)文書構造をマークアップする。 3) 意味のない画像出来るだけ書かない。必要なときはalt=""とする これで画像なしでこのままブラウザでご覧ください。--それが検索エンジンが見ている姿です。 (注)タブを全角スペースに置換してあります。必ず戻すこと ★スタイルシートは、後でかいてみます。 <body> <div class="header"> <h1><a href="/index.html"><img src="img/monochrom5.png" width="70" height="70" alt="モノクローム"></h1> </div> <div class="section"> <div id="newProduct"> <ol> <li><a href="./product/fun101.html"><img src="" width="" height="" alt="写真の具体的な説明">商品名１</a></li> <li><a href="./product/vacuum-cleaner52.html"><img src="" width="" height="" alt="写真の具体的な説明">商品名２</a></li> <li><a href="./product/fun100.html"><img src="" width="" height="" alt="写真の具体的な説明">商品名３</a></li> <li><a href="./product/fun99.html"><img src="" width="" height="" alt="写真の具体的な説明">商品名４</a></li> </ol> </div> <div class="nav"> <h3>サイト内リンク</h3> <ol> <li><a href="./index.html">トップページ</a></a></li> <li><a href="./theme">テーマ</a></li> <li><a href="./link.html">リンク</a></li> </ol> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </body>
お礼
回答ありがとうございます。さっそくブラウザにて確認しました！こんなに少ない文字数でできてしまうのですね・・・本当にはずかしい質問だったとつくづく思います。逆に、このＨＴＭＬやＣＳＳについてもっと知りたい！と思うようになりました。現在作成中のhtml/cssは引き続き作成し、もう一度基礎から学んでいこうと思います。引き続きご指導お願いいたします。 皆様へ：どうやって学ばれましたか？独学で学べるものでしょうか？
- Yumikoit
- ベストアンサー率38% (849/2209)
＃２の回答者さんのおっしゃる通りです。 私も、スタイルシートやHTMLのマークアップを、テキストエディタで直すのですが、うっかり先のタグを消してしまったり、最後の”；”を忘れてしまったりします。 基本となる「お約束」が分かっていればミスの探しようもありますが、もともとのソースの構成を理解していないとなかなか難しいですよね。 というわけで気付いた部分のみ。 ◆ 冒頭：最初の<std ってところが途中で消えているのはわかるでしょうか。閉じタグから察するに、<style>と書きたかったのかな? <std{border: 1px botted #000000;} .uenashi td{border-top:0px;} .hidarinasi td{border-reft:0px;} {width:230px;height:230px} </style> ◆ <STYLE>タグの下。TABLE.dotBorder { } の中身 それぞれの指定分の最後、";" が消えています。 ◆ <body> の真下 <div align="center"> <div id="field_spc"> …とありますが、これらの閉じタグはどこにあるでしょう。 ◆ <!-- メインコンテンツ -->内のテーブル <table>の閉じタグがありません。 最後の行、新商品7月30日～ の<tr>の閉じタグがありません。 ◆ <!-- サブコンテンツ --> <div id="sub_spc">の閉じタグがありませんよ! ◆ 一番最後に、</body>の閉じタグがないですよ。 ◆ .ao_waku と、a:hoverのスタイルシート部の閉じ「 } 」が抜けています。 ■ 重箱の隅をつつくような指摘ばかりで申し訳ありません。 ■ ただ、実は誰かの作ったソースを改造して作るよりも、ここまでわけがわからなくなった場合には、＃２さんのおっしゃるように基本の構造を理解したうえで一から書きなおした方が実は早く解決するようにも思います。その方が分かりやすいしね。 ■ 無料のテキストエディタの中にも、例えば閉じタグがないかペアで探してくれる入力支援のついたHTMLエディタとかもありますので、そういったものもうまく組み合わせて使用するとミスは減ると思います。
お礼
回答ありがとうございます！めちゃくちゃなhmtlをお見せして申し訳ないです(＠_＠;) やはり、基礎をきちんと学んでいくのが一番の近道なのですね。どれほど時間がかかるかわかりませんが、頑張ってみます。生まれて初めて「勉強しよう！」と思いました。どうもありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
本人にもわからないものを提示されても、無理です。 根本的な部分で大きく間違っています。 HTMLは、文書構造をマークアップするものです。見出しなら<h1>見出し</h1>、大事なところなら<strong>ここは重要</strong>、それほど重要でなければ<span class="sub">補足</span>とか・・class名はそのページ内に複数存在する種類--たとえば<div class="header">で各セクションのヘッダーを現します。idはjavascriptやリンクのターゲットとなるそのページ内で一箇所しか存在しない部分<div id="DocumentInfo">とか・・ <div class="red">とか<div class="black"> 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より <div class="midashi"> <span class="big">ＭＥＮＵ</span> </div> なHTMLはありえません。 <h2>MENUE</h2> だけでよいはずです。 <strong>ここは大事</strong> としてスタイルシートで strong{color:red;} とすべきです。<font>が非推奨なのはご存知でしょうが、それを<span class="red">と書き直したって意味ないのですよ。 そんなHTMLを書くから、スタイルシートも手が付けられなくなります。 今から出かけますが、後で簡単なサンプルかいて見ます。HTMLもスタイルシートも10分の一で、わかりやすくなるはずです。
お礼
回答ありがとうございます。ですよね・・・めちゃくちゃなのは分かっていたのですが、手の着けようがなくなってしまいました。。
- secseek
- ベストアンサー率66% (12/18)
たぶん、一週間も悩まれるくらいなら、HTMLをきちんと勉強した方が早いと思います。 HTMLってのは、きちんと勉強するより付け焼き刃で修正する方が難しいという 割と珍しい言語ですので。 内容については、テーブルが一つしかないので 間に提示された要素を追加できないことと、 サブメニューらしきものが見当たらないところをみると、 ご提示の内容だけでは解決できそうにありません。
関連するQ&A
- レイアウト、フッターが崩れてしまいます。
横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; }
- 締切済み
- その他([技術者向] コンピューター)
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- 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による配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- HP作成で背景画像が表示されないです・・
いつもお世話になっております。 今回は、HP作成のことでご指導いただきたく投稿致しました。 説明が上手くできていないと思いますが 宜しくお願い致します。 参考書片手にCSSにトライしていますが 一部、背景画像が表示できず困っています。 ネットで調べていますと「float」を使っている場合について 対処法が色々掲載されているのですが 何か間違っているようで、どれを試しても 背景画像を表示することができません。 下記にhtmlとｃｓｓを簡単に貼り付けました。 説明不足がありましたら、ご指摘下さい。 Dreamweaver MX2004を使っています。 － html － <body> <div id="container"> <div id="header"> →背景画像表示されます。 <p>＊＊＊＊＊</p> </div> <div id="box"> <div id="left"> →背景画像表示されます。 <p>＊＊＊＊＊ </p> </div> <div id="right"> →背景画像表示されません。テキストは表示されます。 <p>＊＊＊＊＊</p> </div> </div> <div id="footer"> <p>＊＊＊＊＊</p> </div> </div> </body> － ｃｓｓ － #container { width:800px; height:400px; top:0px; text-align:center; margin-left:auto;margin-right:auto; text-align:left; } #header { position: static; top:0px; font-size: 11px; padding-top: 0px; color: #003366; padding-left: 10px; width: 800px; background-image: url(img/*****.jpg); background-repeat: no-repeat; height: 120px; line-height: 25px; } #box{ width:800px; height: 600px; margin: 0 auto; } #left{ width:190px; float:left; padding-top: 50px; text-align: left; height: 600px; background-image: url(img/*****.png); background-repeat: no-repeat; padding-left: 20px; font-size: 12px; padding-bottom: 0px; } #right{ font-size: 10px; height: 600px; width: 590px; background-image: url(img/******.png); float:right; } #footer{ width:800px; clear:both; text-align: center; font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE"; color: #CC3300; font-size: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 20px; }
- ベストアンサー
- ホームページ作成ソフト
- IE6でfloatされない。
IE6でfloatされない。 横幅950pxのコンテンツの中に divで3つのboxを作って横一列に並べているのですが ie7,8, firefoxでは意図した通りに表示されますがie6ではdiv id="c"（下記ソース）がfloatされません、どなたか解決策をご指導お願いします。 <div id="a"><img src="img/left.png" width="403" height="240" alt="スペース左" title="" /></div> <div id="b"><iframe name="iframe3" id="iframe3" frameborder="0" scrolling="no" src="home.html" title="******">*******</iframe></div> <div id="c"><img src="img/right.png" width="403" height="240" alt="スペース右" title="" /></div> css記述は下記の通りです #a{ 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 : 403px; height : 240px; float : left; display : inline; } #b{ 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 : 144px; height : 240px; float : left; display : inline; } #c{ 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 : 403px; height : 240px; float : left; display : inline; } #iframe3{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 144px; height : 240px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; } 宜しくお願いします。
- 締切済み
- HTML
- 中枠の太さを1pxにしたい
以下の HTML を書いたのですが、外枠の太さは1pxになっていますが、中枠が2pxになってしまいます。中枠も1pxで表示するにはどう修正すればいいでしょうか？ ご教授よろしくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> </head> <body> <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table2"> <tr> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Icon</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Name</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Effect</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 111111</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 444444</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 222222</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 555555</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 333333</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 666666</div></div></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- floatすると親要素より横にずれてしまいます
#contentsにある2つのボックスが左へ20pxほどずれてしまいます。 いろいろと調べてみたのですが解決できませんでした。 長文になってしまい申し訳ありませんが、ご指導よろしくお願いします。 <<CSS>> body { font-size:10px; margin: auto; padding: 0; text-align:center; min-width: 810px; max-width: 850px; height: 100%; } #wrapper { width: 830px; height:100%; margin-left:auto; margin-right:auto; padding-top: 10px; padding: 0; background-color: #FFF; } #header { width: 830px; height: 150px; margin: 0; padding-bottom: 0; min-height: 1%; overflow: hidden; line-height: 0px; background: url(back_top.gif) #F9F9F7 center top no-repeat; } img { display:block; } #logo { float: left; width: 450px; height: 78px; padding-top: 50px; padding-bottom: 0; margin-left: 40px; background: transparent; } #logo h1 { width: 450px; height: 78px; font-size:12px; margin: 0; padding-bottom: 0; background: transparent; } #navi { float: right; width: 310px; height: 50px; padding-top: 60px; margin-right: 30px; line-height: 0px; } #contents { width: 830px; min-height: 600px; margin: 0; background: url(back_main.gif) #F9F9F7 center repeat-y; } #contents #sub { float: left; width: 180px; height: auto; text-align: center; } ul { margin: 0; padding: 0; float: left; width: 180px; list-style: none; color: #794c2c; background-color: #EDE4EB; } li { display: block; margin: 0; padding: 0; font-size: small; } li span { display: block; font-size: x-small; } li#c01 a { background: url(c01.jpg) 7px 5px no-repeat; } li#c02 a { background: url(c02.jpg) 7px 5px no-repeat; } li a { display: block; min-height: 40px; padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; text-decoration: none; color: #aa8f78; background-color: #F3EEDE; } ul li a:hover { color: #794c2c; background-color: #F3FAD1; } /* Hides from IE-mac \*/ * html ul li a, * html ul li { height: 40px; line-height: 1.5; } /* End hide from IE-mac */ /* line-heightはli間の隙間をなくするために指定 */ #contents #main { float: right; margin-right: 50px; width: 500px; height: auto; background-color: transparent; } #footer { width: 830px; height: 100px; background: url(back_bottom.gif) #F9F9F7 center no-repeat; margin: 0; } <<html>> <body> <div id="wrapper"> <div id="header"> <div id="logo"><h1><a href="/"><img src="../../Documents/logo.png" width="450" height="78" border="0" alt="HOMEPAGE" /></a></h1></div> <div id="navi"><p>SAMPLE</p> <div id="srchBox">**yahoo検索窓** </div></div> <div style="clear:both;"></div> <div id="contents"><div id="sub"><ul><li> </li><li id="c01"><a href="c01.htm">c01<span>c01</span></a></li><li> </li><li id="c02"><a href="c02.htm">c02<span>c02</span></a></li</ul></div> <div id="main"><img src="../../Documents/001.jpg" width="400" height="354" border="0" /></div></div> <div id="footer"><table border="0" width="750" height="100" align="center"><tr><td width="250" height="70" align="center" valign="top">AAA</td><td width="250" height="70" align="center" valign="top">BBB</td><td width="250" height="70" align="center" valign="top">CCC</td></tr><tr><td colspan="3" width="750" height="30"> </td></tr></table></div> </div> </div> </body>
- 締切済み
- HTML
- CSSでロールオーバーを作って中央揃えにしたい。
CSSを使ってロールオーバーを作成しました。 がんばっているのですが、なかなか難しく、壁ばかりです。 なんとか、ロールオーバーは出来たのですが、その画像が左揃えになっていて、中央揃えにならないのです。 どなたか、お力をお貸しください。よろしくお願い致します。 HTML ----------------------------------- <link href="css.css" rel="stylesheet" type="text/css"> <div class="contents_box2"> <h3 class="no"><a href="info.html"><img src="contents_img2_1.jpg" alt="教室のご案内" width="215" height="53" /></a></h3> <p class="contents_text2">ああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2"><br /> <div class="rollover01"><a href="info.html"><img src="button2.jpg" alt="詳しくはこちら" width="172" height="29" /></a></div> <img src="contents_img2_3.jpg" width="215" height="18" /></div> -------------------- css↓↓↓ ------------- BODY { COLOR: #666666; TEXT-ALIGN: center; margin-top: 0px; font: 12px/130% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; VERTICAL-ALIGN: bottom; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; margin: 0px; padding: 0px; } .contents_box2 { FLOAT: left; MARGIN: 0px 12px 0px 0px; WIDTH: 215px; TEXT-ALIGN: left; padding: 0px; background: url(contents_img2_2.jpg) repeat-y; } .contents_text2 { MARGIN: 10px 16px 0px } .contents_detail { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 215px; PADDING-TOP: 0px; TEXT-ALIGN: center } .rollover01 { width:172px; height:29px; background:url(img/button3.jpg) no-repeat center bottom; text-align: center; } .rollover01 a { display:block; width:172px; height:29px; font-size:1px; line-height:1px; outline:none; text-align: center; } .rollover01 a:hover { text-indent:-9999px; } -------------------------------------
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSでレイアウトが崩れます
CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }
- 締切済み
- HTML
お礼
ORUKA1951さん、いつもありがとうございます！感謝です。兄貴と呼ばせてください。 たった今、確認しましたところ、素晴らしすぎて感動してしまいました。また、ORUKAIさんが貼ってくださったリンクも、お気に入りの「兄貴」フォルダの中へ保存し、随時勉強用に使用したいと思います。 こんなにも丁寧に回答してくださる方々がいるとは思いませんでした。いつの日かORUKAIさんレベルに追いつき、追い越してからのお尻ペンペンができるように日々奮闘していきたいと思います！ 皆様、本当に本当にありがとうございました！！