- ベストアンサー
HTMLとCSSの正しい文章構造を知ろう！
- HTMLとCSSを使用した文章構造について詳しく解説します。
- 質問文章のコードは正しい形式で書かれています。
- 要素の配置やスタイルに関する具体的なコーディング方法も紹介します。
- 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/2280)
すみません、訂正です。 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は分けましょう。
お礼
ありがとうございます。 このサイトでのチェック済です。 このサイトで合格がでれば問題ないのですか？ 部分的におかしいときいたことがあったので
お礼
>合格が出れば、「文法的には」当然問題ありません。 >あとは文書構造とマークアップがかみ合っているかどうかの問題です。 これもサイトでチェックとかできると楽ですが、ないですよね。 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> これしか方法が浮かびませんでした。