• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：W3CのHTML結果とCSS結果の問題点を改善策を教えてください。）

HTML結果とCSS結果の問題点を改善策を教えてください

xenotacticの回答

  • ベストアンサー
回答No.1

HTMLに関してはよくわかりません。 「It is neither a bug in the validator, nor in your document. 」 とあるので、ValidationServiceのバグでもないし、HTMLのバグでもない、つまり気にする必要がないということではないでしょうか（よくわかりません、nerther A nor BはAでもBでもどちらでもないという意味ですので…） CSSに関してはわかります。 floatを指定している要素には必ずwidthを指定しなければいけないという意味です。ただしinput等は例外。 ul#topmenu liにfloatを指定しているのでしたら、ul#topmenu liにwidthを指定しなければいけません。質問内容に書かれているのはul#topmenu liではなくul#topmenu li aですね。 HTMLの文法チェッカーでしたらHTML-lintも使ってみてください（両方使うといいです）

rescue99
質問者

お礼

ありがとうございます。 HTML-lintはW3Cの前に実行しました。 HTML-lintで先にチェックしたのでワーニング１つとなっております。 大変助かりました。ありがとうございましたｍｍ

この回答がついた質問に戻る
  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連する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、CSSについて。テーブル背景がズレる。

    こんにちは。よろしくお願いします。 HTMLとCSS、2つのファイルを作成しています。 HTMLでテーブルを作成し、<td><div=名前></div></td> として、テーブルの中身はCSSにまかせています。 複数列、複数行ありますがdiv名はひとつずつ違うのが付いています。 CSSでは、 div#名前 { width: 20px; height: 20px; margin: 0px; padding: 0px; background: url(画像名.gif); } 　　・ 　　・ 　　・ htmlを表示させてはcssのpxを調節し、 きれいな背景画像付きのテーブルが完成した！と思ったのですが、 ブラウザの文字サイズを最大に変更すると崩れてしまいました。 pxではなくて%で指定してみても崩れます。 解決策をご存知の方、教えてくださると有難いです。 よろしくお願いします。

  • 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
  • HTML、CSSについて分からないことがあります

    下記の2パターンのコードを書きました。 一番目のコードのように、CSSファイルでdivの中に、text-decoration: noneと書いたのですが、うまく実行されませんでした。しかし2番目のCSSファイルのように、＜a＞で指定するとうまくできました。 質問ですが、 (1)<a>で区切らずに、<div>ではできないのでしょうか？ ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; } a { text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーHTML－－－－－－－－－－－－－－－－ <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>About Me</title> </head> <body> <img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/> <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/> <div> <a href="https://facebook.com">Join us<span>Facebook<span> </a> </div> </body> </html>

  • HTML、CSSについて分からないことがあります

    下記の2パターンのコードを書きました。 一番目のコードのように、CSSファイルでdivの中に、text-decoration: noneと書いたのですが、うまく実行されませんでした。しかし2番目のCSSファイルのように、＜a＞で指定するとうまくできました。 質問ですが、 (1)<a>で区切らずに、<div>ではできないのでしょうか？ ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; } a { text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーHTML－－－－－－－－－－－－－－－－ <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>About Me</title> </head> <body> <img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/> <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/> <div> <a href="https://facebook.com">Join us<span>Facebook<span> </a> </div> </body> </html>

    • ベストアンサー
    • CSS
  • 【CSS】HTML要素の指定

    お手柔らかにお願いします。 HTMLを下記のように記述しました。 ---------- <section id="login"> 　<h1>ログイン</h1> 　　<form> 　　　<label for="my_id">ID</label> 　　　　<input id="my_id" type="text" size="10" maxlength="10"><br /> 　　　<label for="my_pass">パスワード</label> 　　　　<input id="my_pass" type="password" size="10" maxlength="10"><br /> 　　</form> 　<a><p>ログイン</p></a> 　<p><a>パスワードを忘れた方はこちら</a></p> </section> ---------- 上記の”<a><p>ログイン</p></a>”に対して、画像を差し込みたいと思っています。 p要素にid名やclass名を入れれば簡単にできるのですが、HTMLは変更せず、CSSのみで要素を特定したいと思っています。 こちらのサイト（http://web-dd.net/?p=278）を参考にCSSを以下のように書いてみましたが、うまくいきませんでした。 ---------- #login label { 　　　display: inline-block; 　　　font-size: 0.8em; 　　　text-align: right; 　　　vertical-align: middle; 　　　width: 70px; 　　　margin: 5px 0 5px 5px; } #login input { 　　　display: block; 　　　float: right; 　　　width: 80px; 　　　margin: 5px 10px 5px 5px; } #login br { 　　　clear: left; } #login > form + p { 　　　overflow: hidden; 　　　text-indent: -10em; 　　　background: url(img/btn_login.png) no-repeat; 　　　width: 90px; 　　　height: 30px; } #login a + p { 　　　font-size: 0.7em; 　　　text-align: center; 　　　margin: 15px auto 10px auto; } ---------- ”#login > form + p”という要素の指定が間違っているのかも、と思っていますが、formの部分をh1やinput、brなどにしてもうまくいきませんでした。 あまり難しいことは勉強中なのでわかりませんが、どこをどう直せばいいのか、わかりやすく説明してくださるとうれしいです。 よろしくお願いします。

    • 締切済み
    • CSS
  • HTMLで横幅をCSSで設定できません。

    HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。 はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。 しかし、<div id="header">で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。 <div id="header">の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。 わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }

    • ベストアンサー
    • HTML
  • 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
  • CSSがHTMLに反映しない

    CSSをはじめて使う者です。XPでIEを使っています。 解説サイトの最も簡単そうなプログラムをコピペし、 HTMLファイルと外部CSSファイルを同じフォルダ（デスクトップにあるtopフォルダ） に入れてHTMLを開いたのですが、CSSを全く読み込まず、HTMLのテキストしか表示されません。 ★HTMLデータ（top.html） ------------------------ <HTML> <HEAD> <link rel=stylesheet type="text/css" href="C:\Documents and Settings\Administrator\デスクトップ\top\top.css"> </HEAD> <BODY> <div class="selecter">文字が赤くなり、左に5pxの罫線が引かれます。</div> </BODY> </HTML> ★CSSデータ（top.css） ------------------------ .selecter { color:#ff0000; border-left:solid 5px #ff9900; } ・他のサイトにはHTMLファイルのstylesheetに""があったので付けてみたのですが、意味なしでした。 ・他のサイトの形が異なるCSSも試したのですが同様の状態だったので、HTMLのHEADの部分が怪しいと思い、ファイル名指定を"top.css"に変えたりしたのですが、意味なしでした。 ・CSSは最初メモ帳で書いたのですが、拡張子がどうしてもCSSになってくれなかった（top.css.txtになる）ので、ワードパッドで書いて保存したら、拡張子は正常にCSSになりました。ただ何故かアイコンが、プログラムが見つからない時に表示される奴になっています…。 スタート地点から躓いていて非常に恐縮なのですが、何卒よろしくお願いいたします。

  • 【CSS】HTML直書き→外部ファイルにしたい

    HTMLにCSSを適応する方法としていくつかあると思いますが、 こんな風に↓ <div style="height:90px; width:300px; text-align:center; float:left;"> HTMLソース内に『直書き』してあるものを外部CSSに書き直すには どうしたらいいですか？ 当方、他の外部CSSをちょこっといじって変更したり HTMLの簡単な更新経験程度の知識しかありません。 タグ名｛プロパティ：値｝みたいなルールは分かるのですが、 すべてを最初から書くのが初めてで、何から手を付けていいのか 分かりません。 こうしてみたら？とか、私ならこうする、という アドバイスを頂けると助かります。 お詳しい方、回答よろしくお願いします！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する