- ベストアンサー
HTMLいじったらデザインが崩れました。ホームページ作成に困っています。
- 初心者ながらも空いた時間を使い、コツコツ作成してきたホームページのデザインが突然崩れてしまいました。1週間も修復に悪戦苦闘しています。
- 特に、テーブルとテーブルの間に<p style='font-family: MS 明朝;font-size: 20pt'>ＰＩＣＵＰ<span> / 注目商品</span></p></div>を入れたいのと、サブメニューが下にずれこんでしまいます。
- また、CSSの一部も提供していますが、何かおかしな箇所があるかもしれません。どなたかご教授いただけると幸いです。
- 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ってのは、きちんと勉強するより付け焼き刃で修正する方が難しいという 割と珍しい言語ですので。 内容については、テーブルが一つしかないので 間に提示された要素を追加できないことと、 サブメニューらしきものが見当たらないところをみると、 ご提示の内容だけでは解決できそうにありません。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ORUKA1951さん、いつもありがとうございます！感謝です。兄貴と呼ばせてください。 たった今、確認しましたところ、素晴らしすぎて感動してしまいました。また、ORUKAIさんが貼ってくださったリンクも、お気に入りの「兄貴」フォルダの中へ保存し、随時勉強用に使用したいと思います。 こんなにも丁寧に回答してくださる方々がいるとは思いませんでした。いつの日かORUKAIさんレベルに追いつき、追い越してからのお尻ペンペンができるように日々奮闘していきたいと思います！ 皆様、本当に本当にありがとうございました！！