HTMLとCSSの正しい文章構造を知ろう！
- HTMLとCSSを使用した文章構造について詳しく解説します。
- 質問文章のコードは正しい形式で書かれています。
- 要素の配置やスタイルに関する具体的なコーディング方法も紹介します。
- ベストアンサー
htmlとcssの文章構造、これは正しいですか？
<h1>にテキストを入れることが必須で、 画像の上にマウスをどこに置いてもクリックすれば トップページに行く状態にしたくて下記コードを作りました。 下記コードはサンプルですが、 <!-- 質問の対象はここから --> <!-- ここまで --> の間でhtmlやcssの文書構造にしたがって正しく書かれているか心配です。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style> #container #header { width: 900px; height: 300px; margin: 0px auto; padding: 0px; top: 0px; left: 0px; float: left; display: block; } #container #header #sample{ height: 170px; position: relative; background-color: #333; /* goo質問用で実際は入れません。画像が表示されないため代わりに。 */ } #container #header #sample h1{ position: absolute; top: 0px; left: 150px; color: #fff; font-size: 11px; font-weight: bold; line-height: 130%; /* h1内の大文字と下の小さい文字との間隔をあけるため */ } #container #header #sample h1 span{ font-size: 22px; line-height: 220%; } #container #header #sample h1 a:link, #container #header #sample h1 a:visited, #container #header #sample h1 a:hover, #container #header #sample h1 a:active{ color: #fff; /* 画像の範囲内は全てリンクさせたいので、マウスにのせたときに色を変える必要はないので変化無し */ text-decoration: none; } #container #header #navigat { width: 900px; height: 40px; float: left; margin: 0px; padding: 0px; list-style-type: none; } #container #header #navigat li { width: 225px; float: left; } </style> </head> <body> <div id="container"> <div id="header"> <!-- 質問の対象はここから --> <div id="sample"> <h1><a href=""><span>サンプル</span><br /><span>サンプルサンプル</span><br />サンプルサンプルサンプルサンプルサンプルサンプル<br />サンプルサンプルサンプルサンプルサンプルサンプル</a></h1> <a href=""><img src="" alt="" /></a> </div> <!-- ここまで --> <ul id="navigat"> <li id=""><a href="">メニュー１</a></li> <li id=""><a href="">メニュー２</a></li> <li id=""><a href="">メニュー３</a></li> <li id=""><a href="">メニュー４</a></li> </ul> </div> </div> </body> </html>
- tekkenman7
- お礼率70% (150/212)
- HTML
- 回答数10
- ありがとう数4
- みんなの回答 （10）
- 専門家の回答
質問者が選んだベストアンサー
長文失礼。 >の間でhtmlやcssの文書構造にしたがって正しく書かれているか心配です。 文法については解決しているようですが、 「文法上は正しい」です。 ただし、意味が通るか、著者が意図した通りの意味になっているかは別問題です。 （後述、余談1参照） >No.4お礼 ><h1>で >テキストA～Cは<h1>に入れなければいけない >改行したい >違う大きさのテキストを混ぜたい >画像の上でクリックするとリンク先に移動 特にこの条件、『画像の上でクリックするとリンク先に移動』。 この画像は<h1>の中に入りますか？それとも外ですか？ （別の言い方をすると、 見出しの一部ですか？それとも、見出しには含まれない部分ですか？） 中であれば、 <h1>（略）<a><img></a></h1> という順番になりますが、 外であれば、 <h1>（略）</h1> <a><img></a> という順番になります。 --------------- ブロック要素（HTML5ではグループコンテンツ（grouping content、グルーピングコンテント））なしにインライン要素（HTML5ではフレーズコンテンツ（phrasing content、フレージングコンテント））が入る事はありません。 <div> <h1>見出し</h1> <img> </div> という順番ですので、<div>の中に入っている事にはなりますが、 <img>と並列する要素が<h1>ですので、 <div> <h1>見出し</h1> <p><img></p> </div> とした方がいいと思います。（<a>は別途、適切な場所に記述してください。） 全部にリンクを張る場合は、HTML5では <a><div>・・・</div></a> でも良いのですが、ブラウザの互換性の問題から、 <div> <h1><a>・・・</a></h1> <p><a><img></a></p> </div> とする方が良いと思います。 余談１--------------------------- <h1>というタグを付けた所が見出しになりますから、 <h1>サンプル</h1> <span>さんぷる</span> と書けば「サンプル」が見出しになりますし、 <h1>サンプル <span>さんぷる</span></h1> と書けば「サンプルさんぷる」が見出しになります。 どちらを見出しにしたいのか、という"意図"は、第三者にはわかりません。 ただ、HTMLに書かれている物を見て判断するだけです。 「サンプルさんぷる」を見出しにするつもりで、 <h1>サンプル</h1> <span>さんぷる</span> と書くと、文法上は正しくて"意図"が間違った書き方になります。 HTMLの文法というのは、 「このタグはこういう意味があります。」 「この順番で書きなさい、たとえば<span><h1>・・・</h1></span>はダメです。<h1><span>・・・</span></h1>は良しです。」 などということが規定してあるだけです。 タイトルが長いからダメなどという規定はありません。 むしろ、長くてもそれがタイトルなら、全部の中に入れないとダメです。 余談２--------------------------- <br>の使い方について、 http://okwave.jp/qa/q7031467.html このQAのNo.14でも書きましたが、 HTML5では、 詩と住所、左から書く言語、右から書く言語などの違いの場合に使うための物ですので、 文法に厳密にするなら、詩以外の文の区切りなどを理由に<br>を書く事は、文法違反という事になります。 （つまり、上記のサブタイトルのために<br>を使うのも、文法違反です。） HTML4/XHTMLでは、特に規定はありません。 他の方の回答で<small>が出てきましたが、 HTML5では、 <small>はスモールプリント、細目に使うための物です。（HTML仕様書の原文では「small print」という言葉が使われていますが、これは１つの熟語、法律の専門用語です。） 料金の明細や、法律関係の注意書き、たとえば著作権表記などに使うための物で、補足事項として使う場合は文法違反になります。 （一般の補足事項にはタグを書かないこと。 デザイン上（CSSルールを適用するため）必要なら、<span>を使用しなければなりません。） HTML4/XHTMLでは、特に規定はありません。（単に小さなフォントで表示するという物で、<font>などと同じ扱いです。）
その他の回答 (9)
- kurayuki1000
- ベストアンサー率0% (0/1)
質問されている場所についてですが、<h1>が長すぎます。 文法違反ではないのですが、パッと見てわかるような短いものをおすすめします。 質問範囲外の場所についてです。 DOCTYPE宣言を行いましょう。 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> と指定されているから、XHTMLでしょうか？ また、CSSを使用する場合 <meta http-equiv="content-style-type" content="text/css"> を指定する必要があります。 また、<style>にはtype属性を指定し、CSS部分はコメントで囲うように しましょう。 XHTMLサンプル <!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=UTF-8" /> <title>サンプル</title> </head> <body> <h1>サンプル</h1> サンプルへようこそ！<br /> 作者は、サンプルです。 </body> </html>
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
すみません、訂正です。 No.8の余談２の部分 >（つまり、上記のサブタイトルのために<br>を使うのも、文法違反です。） この上記のサブタイトルというのは、 例文として書いていた物を、著作権的にグレーっぽいので削除した部分が該当します。 この補足文は無視してください。 映画のタイトルなどで、 <h1>タイトル<br> ～サブタイトル～</h1> などとすると、（HTML5での厳密には）文法違反となります。 <h1>タイトル<span class="subtitle">～サブタイトル～</span></h1> などとして、スタイルシートで改行しているように見せかけなければなりません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞将来ページを増やしていく予定があるときは、一応全部、固有のIDを ＞つけて子孫セレクタでつなげて指定すれば後で変更とかミスとかしないだろう どんなIDをつけたか、いちいちHTMLを開かなきゃならない。 div.contaner div.header h1{} じゃ、本当にまずいのですか? ＞<!-- 質問の対象はここから --> ＞<div id="sample"> ＞<h1><a href=""><span>サンプル</span><br /><span>サンプルサンプル</span><br /> ＞サンプルサンプルサンプルサンプルサンプルサンプル<br />サンプルサンプルサンプルサンプルサンプルサンプル</a></h1> ＞<a href=""><img src="" alt="" /></a> ＞</div> ＞<!-- ここまで --> この説明は、回答(2)を再読してください。 「見出しの要素は、その章・節で述べられる話題を【短く記すもの】である。」 ^^^^^^^^^^^^^^^^^^^^^^^ ここに書かれている具体的な内容がわかりませんが、文字サイズを変更されていることから考えて、書きサンプルでは、最初の<span>が見出しではなかろうかと推測してあります。 【添付画像はそれぞれをLynxで表示させたところ】 背景画像に全体または部分的にリンクをつけたいです( http://okwave.jp/qa/q7064813.html#a2 )の回答と合わせてお読みください。 [サンプル]HTML4.01strict ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。 HTML5の場合は、DOCTYPEを変更し、<div class="nav">以外は、class名を要素(<div class="hgroup"></div>は<hgroup></hgroup>)に変更してください。 <!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"> <!-- html,body{margin:0;padding:0;} p{text-indent:1em;margin:0;line-height:1.4em;} div.header{ ＿width:90%;height:170px;min-width:450px;max-width:960px; ＿background-color:black;color:white; ＿position:relative; ＿margin:0 auto 40px auto; } div.header p.logo{position:absolute;top:0;left:0;margin:0;padding:0;} div.header div.hgroup,div.header div.abstract{margin:0 0 0 150px;} div.header h1,div.header h2,div.header p{margin:0;line-height:1.4em;} div.header div.nav{ ＿position:absolute;top:180px; ＿height:40px;width:100%; } div.header div.nav ul,div.header div.nav ul li{ ＿display:block; ＿margin:0;padding:0; ＿list-style:none; } div.header div.nav ul li.top{ ＿position:absolute; ＿top:-180px;left:0;width:100%; } div.header div.nav ul li{ ＿width:225px;margin-left:2px; ＿float:left; ＿text-align:center;line-height:30px; ＿} div.header h1 a{color:white;}/* 擬似クラスは不要 */ div.header div.nav ul li.top a{text-decoration:none;height:170px;background-color:transparent;} div.header div.nav ul li.top a span{visibility:hidden;} div.header div.nav ul li a{display:block;width:100%;height:100%;background-color:aqua;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<div class="hgroup"> ＿＿＿<h1><a href="menu0">サンプル</a></h1> ＿＿＿<h2>サンプル</h2> ＿＿＿<p class="logo"><img></p> ＿＿</div> ＿＿<div class="abstract"> ＿＿＿<p>サンプルサンプルサンプルサンプルサンプルサンプル</p> ＿＿＿<p>サンプルサンプルサンプルサンプルサンプルサンプル</p> ＿＿</div> ＿<div class="nav"> ＿＿<ul> ＿＿＿<li class="top"><a href="menu0"><span>メニュー0</span></a></li> ＿＿＿<li><a href="menu1">メニュー１</a></li> ＿＿＿<li><a href="menu2">メニュー２</a></li> ＿＿＿<li><a href="menu2">メニュー３</a></li> ＿＿＿<li><a href="menu4">メニュー４</a></li> ＿＿</ul> ＿</div> ＿</div> </body> </html>
- ・真 綾・（@Ma-yan_bh1011）
- ベストアンサー率30% (79/257)
たびたび失礼。#1=#4です。 ＞これもサイトでチェックとかできると楽ですが、ないですよね。 まあそれは仕方ないですね。<h1></h1>の内側にあるものが本当に見出しとしての文字や画像であるかどうかは機械には分かりませんので。 ＞<h1>で ＞テキストA～Cは<h1>に入れなければいけない ＞改行したい ＞違う大きさのテキストを混ぜたい ＞画像の上でクリックするとリンク先に移動 ＞ということで ＞<div id="sample"> ＞<h1><a href=""><span>テキストA</span><br /><span>テキストB</span><br />テキストC</a></h1> ＞<a href=""><img src="" alt="" /></a> ＞</div> ＞これしか方法が浮かびませんでした。 その条件からすると、その部分は「ただの見出し文字列(「htmlとcssの文章構造、これは正しいですか？」のような)」ではありませんよね？見出しというよりは企業ロゴやヘッダーに近い位置づけではないでしょうか。 そういう場合、これは必ずしも正しいとは言えずあくまで一般論であり私の見解なんですが…「全部画像にして<a><img></a>」がベターです。これによりHTML的によろしくない点も改善され、「画像をクリックしてページ移動」もすんなり実現できます。まあこれは、省略されている「<a href="">」の行き先が同一であると言う前提ですが。
- naokita
- ベストアンサー率57% (1008/1745)
#3回答者です（お礼拝見済み） ＞そうすると、画像をクリックしてページ移動ができないです。 h1の背景といったのは h1 a の事です。 アンカーは同一なのか別々なのかの方向性にもよるし、 画像の大きさや方向性が不明ですが 画像をクリックできる条件は満たす。 （クリッカブルマップでも出来ますし） ＞そんなに長くはないです。 h1が４行にもなるのは見出しとはいえないのでは？（見本だからかな？） <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style> body,h1,p{ margin:0; padding:0;} a img{ border:none;} #container{ width: 900px; margin: auto;} #header{ height:300px;} #header h1{ background: url(head背景) no-repeat; height:170px;} #header h1 a{ display:block;width:750px;padding-left:150px; height:100%; background: url(小画像) no-repeat; color:red;/* #fff */ font-size:11px;line-height:130%;text-decoration:none;} #header h1 a span{ font-size: 22px;line-height: 220%;} #header2{ background: url(head背景) no-repeat; height:300px;} #header2 a{ text-decoration:none;} #header2 p{ float:left; width:100px;} #header2 h1{ float:right; width:750px; height:170px;} #header2 h1 a{ color:red;/* #fff */ font-size:22px;line-height:2.2;} #header2 h1 a small{ display:block; font-size: 11px;line-height: 1.3;} #header2 ul#navigat{ clear:both;} </style> </head> <body> <div id="container"> <div id="header"> <h1><a href="/"><span>サンプル<br />サンプルサンプル</span><br /> 背景画像が被るほど<br />大きい場合</a></h1> <ul id="navigat"><li><a href="/">メニュー１</a></li></ul> </div> <div id="header2"> <p><a href="/"><img src="小画像" width="100" height="100" alt="小画像" /></a></p> <h1><a href="#">サンプル<br />サンプルサンプル <small>背景画像が被らない<br />小さい場合</small></a></h1> <ul id="navigat"><li><a href="/">メニュー１</a></li></ul> </div> </div> </body> </html>
- ・真 綾・（@Ma-yan_bh1011）
- ベストアンサー率30% (79/257)
#1です。 ＞このサイトで合格がでれば問題ないのですか？ ＞部分的におかしいときいたことがあったので 合格が出れば、「文法的には」当然問題ありません。あとは文書構造とマークアップがかみ合っているかどうかの問題です。 ＞(#2さんへのお礼欄) こちらも当然のことですが、#2さんレベルの知識がつくまでの間はそんなことはいちいち端から端まで気にする必要はありません。そんなことしてたら文書が出来上がらないということは既に質問者さんもお気づきだと思います。 ＞一応全部、固有のIDをつけて子孫セレクタでつなげて指定すれば ＞後で変更とかミスとかしないだろう・・・楽だし そのとおりです。子孫セレクタはともかく、後で混乱するくらいならばんばんidとclass振っちゃってください。 で、話は戻りますが。 <div id="sample"> <h1><a href=""><span>サンプル</span><br /><span>サンプルサンプル</span><br />サンプルサンプルサンプルサンプルサンプルサンプル<br />サンプルサンプルサンプルサンプルサンプルサンプル</a></h1> <a href=""><img src="" alt="" /></a> </div> HTMLとして正しいかどうかの話は済んだので私からの本音ですが、どうしてこんな構造にしないといけないのでしょうか？それがずっと気になっています。 なぜこんな構造なのか、本当にこんな構造でないといけないのか、それを考え直していただきたいのですがいかがでしょうか？
- naokita
- ベストアンサー率57% (1008/1745)
NO.2さんには失礼ですが、 1) は同じでなくても良いです。>HTML5 --------------- h1とトップ画像が被るにでしたら、 h1の背景画像にすれば良いのでは？ h1 そんな長い見出しですか？ それだけ長ければ、h1,h2とかh1,Pとかの方が最適な文章構造となるのでは？ height: 300px;ですが、文字サイズを「大」にした時に文章最終行がどうなりますか？ #container #header の margin: 0px auto; padding: 0px; top: 0px; left: 0px; float: left; display: block; これらに矛盾や不要はありませんか？ この辺の１つ１つのプロパティの意味を理解して利用していますか？ １つ１つ削除したりして動作確認をしてみましょう。
お礼
>h1とトップ画像が被るにでしたら、 >h1の背景画像にすれば良いのでは？ h1のcssに背景画像を指定するということですか？ そうすると、画像をクリックしてページ移動ができないです。 >h1 そんな長い見出しですか？ >それだけ長ければ、h1,h2とかh1,Pとかの方が最適な文章構造となるのでは？ >height: 300px;ですが、文字サイズを「大」にした時に文章最終行がどうなりますか？ そんなに長くはないです。 ただ、そのテキストをh1に入れることが条件とのことで。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞htmlやcssの文書構造にしたがって正しく書かれているか心配です。 だめです。 1) <title></title>と<h1></h1>内には基本的に同じものを書きます。 2) h1の内容は、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 見出しの要素は、その章・節で述べられる話題を短く記すものである。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-H1 )］より もし、このような文章を入れてしまうと「検索エンジンを欺こうとした」とみなされてしまう恐れがあります。 3) 文書構造とは、文書の内容の構造と言う意味です。 HTML5の[3.1. 新しい要素] ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) を読むとわかりますが、見出し(h1～h6)と組み合わされたsection、自己完結した記事であるarticle、本文と関係の薄いaside、複数の見出しの場合を示すhgroup、導入部やナビゲーションをグループ化したheader、文書情報や著作権を示すfooter、ナビゲーションを示すnav、挿絵や脚注を示すfigureが追加されました。 それは、HTML4.01で、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 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 )］より とされて、一般的に使われていたclass="header | article | aside | nav | footer"を、要素にしたものです。 そして、検索エンジンが理解しているものは、一般的な視覚系ブラウザではなく、Kynxで表示させたような姿なのです。 参照→技術に関するガイドライン ( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp#2 ) ＞</h1> ＞<a href=""><img src="" alt="" /></a> ＞</div> div内ですから、エラーにはなりませんが、次に<ul>というブロック要素が来ますから、DOMで、これは匿名ボックスとして </h1> <p><a href=""><img src="" alt="" /></a></p> </div> のように解釈されます。DOMの解釈はHTML5より前のブラウザは、解釈が一律ではありませんから、このようなブラウザの解釈に期待した書き方は避けるべきです。 ★以下はCSSについてです。 #container #header #navigat のような書き方は無意味です。#は一意セレクタ[詳細度B-1]ですが、もともと文書内に一箇所しか存在し得ない要素を示していますから、このような子孫セレクタ[ 半角スペース]でつなげる必要はありません。 この意味は、*#container *#header *#navigatと言う意味だということはわかってますよね。(*は全称セレクタ) 使うとすれば他のページで同じIDが、異なる要素に使われる可能性があるとき、(全称セレクタではなく)基点となるタイプセレクタにつなげる場合 h1#Top{color:red;}/* あるHTMLではh1にidが振られている */ div#Top{color:green;}/* あるHTMLではdivにidが振られていて色を変えたい */ ような場合か #Top span{}/* 一意セレクタの子孫であるspan */ くらいでしょう。 セレクタをグループ化するのなら、,コロンでつなげます。 スタイルシートのためだけに、やたらめったらIDを振るのは、良い方法ではありません。この場合、すべてのidは不要でしょう。 <body> <div class="header"> <h1>ページの内容を簡潔に示す見出し</h1> <div class="abstract"> <p>要約の記事</p><!-- brを使うべきじゃない --> </div> <div class="nav"> <ul> <li id=""><a href="">メニュー１</a></li> <li id=""><a href="">メニュー２</a></li> <li id=""><a href="">メニュー３</a></li> <li id=""><a href="">メニュー４</a></li> </ul> </div> </div> ・・だけで必要十分!! 必然的にスタイルシートも簡単になるはず。
お礼
>このような子孫セレクタ[ 半角スペース]でつなげる必要はありません。 >スタイルシートのためだけに、やたらめったらIDを振るのは、 >良い方法ではありません。この場合、すべてのidは不要でしょう。 将来ページを増やしていく予定があるときは、 一応全部、固有のIDをつけて子孫セレクタでつなげて指定すれば 後で変更とかミスとかしないだろう・・・楽だし という感じですが、極力使わないようにします。 ２）～３）は難しいですね。もっと勉強します。 一応、 <!-- 質問の対象はここから --> <div id="sample"> <h1><a href=""><span>サンプル</span><br /><span>サンプルサンプル</span><br />サンプルサンプルサンプルサンプルサンプルサンプル<br />サンプルサンプルサンプルサンプルサンプルサンプル</a></h1> <a href=""><img src="" alt="" /></a> </div> <!-- ここまで --> 問題ないレベルということでしょうか。
- ・真 綾・（@Ma-yan_bh1011）
- ベストアンサー率30% (79/257)
＞htmlやcssの文書構造にしたがって正しく書かれているか心配です。 http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html http://jigsaw.w3.org/css-validator/manual.html.ja あと、HTMLとCSSは分けましょう。
お礼
ありがとうございます。 このサイトでのチェック済です。 このサイトで合格がでれば問題ないのですか？ 部分的におかしいときいたことがあったので
関連するQ&A
- CSSによるレイアウトが崩れてしまう現象について
Adobe Dreamweaver CS4にて、ヘッダー、TOPメニュー、SIDEメニュー、コンテンツ、フッターというよくある構成でHPを作成しております。 レイアウトを組んでみたところ、Firefox4ではキチンと表示してくれるのですが、Internet Explorer6では、左メニューがやや右ズレをおこし、右のmainコンテンツが下に回りこんでしまうという現象となってレイアウトが崩れてしまいます。 もうひとつ、右mainの下の「株式会社●●」を右寄せに指定しているハズなんですが、どうしても左になってしまい、指定がきいてくれません。 この2つ原因がわからずに困っております。 お教えいただけませんでしょうか。よろしくお願い致します。 <body> <div id="page"> <!---ヘッダーここから-------------> <div id="header"> <div id="header_title"></div> <div id="header_info">TOPコメント…</div> </div> <!---ヘッダーここまで-------------> <!---TOPメニューここから----------> <div id="topmenu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="company.html">COMPANY</a></li> <li><a href="services.html">SERVICES</a></li> <li><a href="services.html">PRODUCTS</a></li> <li><a href="contact.html">CONTACTS</a></li> <li><a href="contact.html">help</a></li> </ul> </div> <!---TOPメニューここまで----------> <!---左メニューここから----------> <div id="left"> <div id="leftmenu"> <ul> <li><a href="index.html">Category1</a></li> <li><a href="company.html">Category2</a></li> <li><a href="company.html">Category3</a></li> <li><a href="company.html">Category4</a></li> </ul> </div> </div> <!---左メニューここまで----------> <!---メインここから--------------> <div id="main"> <div id="midashi"> <h2>CONTACTS</h2> </div> <div id="contents"> <p> </p> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 <br /> <br /> </p> <table width="500" bordercolor="#66CCCC" border="0" cellspacing="0" cellpadding="0"> <tr> <th bgcolor="#FFFFDF"> <p><span class="tx12pt_ore">サンプルテキスト。</span><br /> </p> <ul> <li>・サンプルテキスト</li> <li>・サンプルテキスト</li> <li>・サンプルテキスト<br /> </li> </ul></th> </tr> </table><br /> <br /> <span class="tx12pt_ore">【サンプルテキスト】</span><br /> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 </p> <br /> <span class="txtright">株式会社●●</span> </div> <!---ページトップここから------------> <div id="pagetop_back"> <a href="#top"> <img src="../all_img/mpage-top.gif" alt="ページトップへ" width="100" height="20" border="0" /> </a> </div> <!---ページトップここまで------------> </div> <!---フッターここから------------> <div id="footer"> <div id="copyright"> <h3>このページは、株式会社●● が運営しています。<br /> Copyright(c) ～～～～Ltd Institute. All Rights Reserved. </h3> </div> <ul> <li><a href="#">サンプルメニュー1</a></li> <li><a href="#">サンプルメニュー2</a></li> <li><a href="#">サンプルメニュー3</a></li> </ul> </div> </div> <!---フッターここまで------------> </div> </body> ≪CSS≫ #page { width: 780px; margin-right: auto; margin-left: auto; background-image: url(all_img/page.gif); } #header { width: 740px; height: 80px; margin-right: auto; margin-left: auto; background-image: url(all_img/header.gif); } #topmenu { width: 740px; height: 40px; margin-right: auto; margin-left: auto; background-image: url(all_img/topmenuber.gif); background-repeat: no-repeat; } #left { width: 178px; height: 1300px; float: left; margin-left: 20px; background-image: url(all_img/sideback.gif); background-repeat: repeat; } #main { float: right; height: auto; padding: 0; background-color: #FFF; width: 560px; margin-top: 20px; margin-right: 20px; } #contents { width: 500px; height: auto; margin-left: 30px; } #contents .txtright { color: #033; text-align: right; } #footer { width: 740px; height: 80px; clear: both; margin-left: auto; margin-top: 0px; margin-right: auto; }
- 締切済み
- CSS
- CSS #containerについて
えっと、CSSについての質問です。 最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。 最初は伸びていたのですが、 ヘッダーとフッターを横に１００％にしてから 様子がおかしくなりました。 減ったーフッターは横に全部伸ばしたくて、 コンテイナーは横は余白つけて下にのばしたいのです＞＜ どなたか原因がわかる方、対処法わかる方 いましたらお願いします＞＜ ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div><!-- header --> </div><!-- headerbg --> <div id="menu"> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> <li><a href="">めにゅー４</a></li> <li><a href="">めにゅー５</a></li> <li><a href="">めにゅー６</a></li> </ul> </div> <div id="main"> <div id="contents"> </div><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }
- 締切済み
- CSS
- 【CSS】li要素をfloatした際のブラウザ表示
はじめまして。 現在CSSでwebサイトを作成しています。 ナビゲーションにli要素を使用し、CSSで横並びになるようfloatさせているのですが、firefox・Safariでの表示がずれてしまいます。 思いつく限り検索して、幅の調整やposition関連、DTD変更なども試してみたのですが全く原因がわからず、お手上げ状態です。 DTD変更はこちらのサイト(http://2xup.org/log/2007/07/27-2111)を参考に、HTML 4.01 Transitional→XHTML 1.0 Transitionalを試してみました。 お手数おかけしますが、どなたかご教授お願いします。 ■参考 【HTML】 <div id="wrapper"> <div id="header" class="clearfix"> <h1>タイトル</h1> <ul id="menu"> <li>TOP</li> <li><a href="#">NEWS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">BBS</a></li> <li><a href="#">LINK</a></li> </ul> </div> </div> 【CSS】 #wrapper { margin:0 auto; padding:0; width:750px; } #header { background:url(image/bgtop01.gif) no-repeat; height:125px; } #header h1,li { float:left; text-align:center; } #header h1 { width:200px; margin:50px 25px 0 50px; background:#fc0; } #menu { width:425px; } ul#menu li { width:85px; margin-top:50px; background:#ffc; } .clearfix { min-height:1% } .clearfix:after { clear:both; display:block; visibility:hidden; height:0px; content: "."; } * HTML .clearfix { height:1% } 【サンプルサイト】 http://www.memorialhall.net/ky/index_sample.php どうぞよろしくお願いします。
- ベストアンサー
- CSS
- フロートするとメニューが落ちる IE6で不可
以下のようなhtmlを作成し、CSSを適用しました。 メニューを作成する為に、120×50のメニューボタンを横並びにする為、 フロートを使ったのですが、 FireFoxでは正常に表示されるのですが、 IE6だとメニューが一文字ずつ、落ちて表示されてしまいます。 どうすればいいのでしょうか。 ■html <div id="wrapper"> <div id="header"> <ul> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li><a href="#">d</a></li> <li><a href="#">e</a></li> </ul> </div> <div id="left"> </div> <div id="right"> </div> <div id="footer"> </div> </div> ■CSS body { text-align:center; font-size:small; } #wrapper { text-align:left; margin:0 auto; width:600px; } #header { } #left { float:left; width:200px; } #right { float:left; width:400px; } #footer { clear:both; } #header li a { display:block; float:left; width:120px; height:50px; }
- ベストアンサー
- HTML
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
- cssのulタグについて質問です。
cssの初心者ですがよろしくお願いします。 以下内容です。 #headerの中にulタグで float:left; display: inline; を使って横のメニューを作りました。 その下に幅いっぱいの画像を入れたかったので 一度 <div class="clear"></div>で区切って<div id=""></div>を使って画像を入れました。 そして、更にその下に上で使ったulタグをコピーしてclassを変更して新しい横のメニューを作ったのですが ２段目の１番左の画像だけマウスオーバーの画像だけが小さくなってしまいました。（横に短くなっている） 画像の大きさは元の画像もマウスオーバーの画像も同じ大きさです。 cssで指定している画像の大きさも間違いありません。 試しに上のメニューを<div id="header">にして <div class="clear"></div>で区切って 下のメニューを<div id="gnavi">にして分けてもその画像だけが小さくなっています。 htmlはこれです <div id="header"> <ul class="yama"> <li class="logo"><a href>ロゴ</a></li> <li class="kyouiku"><a href="">教育</a></li> <li class="syoukai"><a href="">紹介</a></li> <li class="shizen"><a href="">自然</a></li> <li class="mura"><a href="">村</a></li> </ul> <div class="clear"></div> <div class="line"></div> <ul class="rei"> <li class="name"><a href="">あいうえお</a></li> <li class="abc"></li> <li class="map"><a href="">マップ</a></li> </ul> </div> <li class="name"><a href="">あいうえお</a></li>これが問題のタグです。 文字が足りなかったのでcssの一部ですが /* rei */ #header ul.rei{ float:left; } #header ul.rei li{ float:left; display: inline; } で <li class="name"> のcssですが #header ul.rei li.name { display: block; width:295px; height:51px; } #header ul.rei li.name a { display: block; background: url(../img/name.jpg) no-repeat top left; text-indent:-9999px; height:100%; width:100%; } #header ul.rei li.name a:hover { display: block; text-indent:-9999px; height:100%; width:100%; background: url(../img/name_om.jpg) no-repeat top left; } という風にしています。 初心者のため使い方が間違っているところが多々あると思いますがよろしくお願いします。
- ベストアンサー
- CSS
- HTML CSS テーブルの表示方法
HTML CSS テーブルの表示方法 JSP・CSSを使用して、テーブルの下に文字を表示したいと思っています。 諸事情有りまして、tableタグは使用せずCSSで解決したいと思っています。 以下よりjspです。 <body id="top"> <div id="container"> <div id="innerContainer"> <div id=header"> <h1><a href="logo.htm"><img src="images/logo.gif" alt="ロゴ" name="logo" id="logologo" /></a></h1> <ul id="header_menu"> <li><a href="map/take.htm">テイク</a></li> <li><a href="map/index.htm">地図</a></li> </ul> </div> </div> </div> <form name="myForm" onsubmit='toList()'> <%= new java.util.Date() %> <Input Type="submit" Value="送信""> </form> </body> 以下よりcssです。 body { width: 1100px; height: 2000px; background-color: lightGreen; } #header { width: 210px; margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto; border: 5px; text-algin: center; } #logologo { width: 150px; height: 50px; border: none; margin: 1px; float: left; text-algin: left; border: solid 5px; } #header_menu { width: auto; height: auto; border: none; margin: 1px; float: left; text-algin: left; border: solid 5px; } この状態ですと、テイクの真横に現在日時と送信ボタンが表示されてしまいます。 この日時と送信ボタンをロゴの下に表示されるようにするにはどのように記述すればよいでしょうか。
- ベストアンサー
- HTML
- html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容
html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容を持っていきたいのですが、どうしてもうまくいきません！ 解決できる方がいましたら、どうかご教示願います！ <style type="text/css"> <!-- * { padding : 0 ; margin : 0 ; } #wrapper { width : 700px; margin-left : auto ; margin-right : auto ; background-color : #eeffff ; } #header { width : 700px; height : 150px ; background-color : #335555 ; } #navigation { /* background-color : #cceeee ; */ width : 300px; float : left ; } #navigation h2 { width : 150px; background-color : #99bbbb ; } #navigation ul { width : 150px ; } #navigation li { width : 150px ; height : 30px ; } #navigation a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #content { background-color : #eeeeee ; width : 350px; float : right ; } #subcontent { width:200 float : left ; clear :both ; } #subcontent h4 { width : 150px; background-color : #99bbbb ; } #subcontent ul { width : 150px ; } #subcontent li { width : 150px ; height : 30px ; } #subcontent a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #thirdcontent { background-color : #eeeeee ; width : 500px; float : right ; } #footer { background-color : #335555 ; width : 700px ; clear : both ; } //--> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>pppppppppppppppppppppppppppp</h1> </div> <div id="navigation"> <h2>pppppppp</h2> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppp</a></li> <li><a href="#">pppppppp</a></li> </ul> </div> <div id="content"> <h2>welcome to my hp</h2> <br> <h3>ppppppp</h3> <p>ppppppppppp</p> <h3>pppppppp</h3> <br> <p>pppppppp</p> </div> <div id="subcontent"> <h4>この横にカテゴリーを配置させたいのです</h4> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">ppppppppp</a></li> </ul> </div> <div id="thirdcontent"> <h4>カテゴリー(これを一段上に)</h4> <br> <h5>pppppppppp</h5> <p>ppppppppp</p> <h5>ppppppp</h5> </div> <div id="footer"> <br> </div> </div> </body> </html>
- ベストアンサー
- HTML
- <li>の先頭に出るスペースの埋め方を教えてください！
DWを使いリストでロールオーバリンクするメニューを作っているのですが、どういうわけか最初の<li>の前に大きなスペースが出てしまします。また、FireFoxで確認をすると、メニューが入っているdiv(#navigation)の上に空白が出来てしまいます。この問題を解決するにはどうすればいいのでしょうか？ ちなみにHTMLは↓ <body> <div id="all"> <div id="header"></div> <div id="navigation"> <ul class="sample"> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> </ul> </div> <div id="main"></div> <div id="main2"></div> <div id="footer"></div> </div> </body> ---------------------------- そしてスタイルシートは↓ #all { background-color: #00FF00; width: 750px; position: relative; height: auto; margin-right: auto; margin-left: auto; } #navigation { background-color: #FF0000; height: 50px; width: 750px; position: relative; clear: right; } #main { height: 270px; width: 750px; position: relative; background-color: #FFFF99; } #footer { background-color: #999999; height: 50px; width: 750px; position: relative; clear: right; } #ul.sample { width: 100%; } #header { background-color: #999933; height: 200px; width: 750px; position: relative; clear: left; } a.sample { text-align: center; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 16px; text-decoration: none; color: #FFFFFF; background-image: url(img/blue-spy.JPG); height: 35px; width: 125px; padding-top: 15px; float: left; } a:hover.sample { background-image: url(img/sky.jpg); } ul.sample li { list-style-type: none; float: left; } #navigation li { float: left; height: 50px; width: 125px; } です。 本当に困っています。分かる方いましたらぜひ教えて頂けませんでしょか？
- 締切済み
- CSS
- 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
お礼
>合格が出れば、「文法的には」当然問題ありません。 >あとは文書構造とマークアップがかみ合っているかどうかの問題です。 これもサイトでチェックとかできると楽ですが、ないですよね。 idとclassを気にせずどんどん使うようにします。 >>> HTMLとして正しいかどうかの話は済んだので私からの本音ですが、どうしてこんな構造にしないといけないのでしょうか？それがずっと気になっています。 なぜこんな構造なのか、本当にこんな構造でないといけないのか、それを考え直していただきたいのですがいかがでしょうか？ >>> <h1>で テキストA～Cは<h1>に入れなければいけない 改行したい 違う大きさのテキストを混ぜたい 画像の上でクリックするとリンク先に移動 ということで <div id="sample"> <h1><a href=""><span>テキストA</span><br /><span>テキストB</span><br />テキストC</a></h1> <a href=""><img src="" alt="" /></a> </div> これしか方法が浮かびませんでした。