• 締切済み

<H1>を使わずに<H2>以下を使用するのは邪道?

通常は、 <H1>見出し1</H1> <H2>見出し2</H2> <P>本文</P> <H2>小見出し2</H2> <P>本文</P> … こんな使い方が正しいのだと思いますが、<H1>に 該当する部分が、スライスした画像をテーブルで レイアウトしたもの等、上下に余白が入って欲しくない 場合、<H1>タグを使わないで<H2>タグを使っています。 でもやはり、この方法は邪道でしょうか。 それなら<H2>の部分を<H1>にした方がよいのでしょうか?

noname#19399
noname#19399
  • HTML
  • 回答数4
  • ありがとう数4

みんなの回答

noname#5841
noname#5841
回答No.4

個人的にはきちんとH1から始めた方が良いと思います。 見た目についてはCSSの設定で余白は変えられるので、そちらでやっておけば良いかな、と。 NN4.xの場合は、マージンの設定より行間の設定で処理すると上手くいったと思います(すみません、今確認しきれないんですが)。 NN4.xはかなり厄介ではありますが、「クセ」を飲み込めば、結構なんとかなります。 頑張って下さいね。

noname#19399
質問者

お礼

ss_sionさん、回答ありがとうございました。 line-heightも指定してみましたが、うまくいきませんでした…;結局、@importを使って、NN4.*のときは全然違うデザインにすることにしました。 NN4.*には本当に苦労させられます…(苦笑)

  • mat-21
  • ベストアンサー率56% (91/162)
回答No.3

もし、ウェブアクセシビリティを推奨し、W3Cの論理で行くならば、邪道というより間違った論理でHTML構造になってしまいます。特にデザイン重視で、HTMLの論理を無視すれば、すべて<div>などの配置タグと<table>をつかったレイアウトでデザインすれば、ブラウザ表示には何の問題はありません。つまり、<h2>が先だろうが<h1>が<h2>のブロック内にあろうが、問題はありません。しかし、W3Cの理論上は、正しい文法でHTMLを組む事を推奨しています。よって、HTMLではなく、一つの書類だと考え、HTMLを組んでいけば必然と正しい文法になっていくかと思います。あとは、スタイルシートを使用し、デザインすれば良いかと思います。 もちろん、レイアウトをテーブルでするのではなく、スタイルシートを使用して、レイアウトすれば、それなりに「プロが作っている」「この人はよく知っている」などのことがおきるかもしれません。 「<H1>に該当する部分が、スライスした画像をテーブルでレイアウトしたもの等、上下に余白が入って欲しくない場合、<H1>タグを使わないで<H2>タグを使っています。」 上記の意味がよくわかりませんが、スタイルシートを使用しないで通常のHTMLでは、<h1>も<h2>も上下に一行空きますよね。ちなみに<p>も上下に空きます。スタイルシートを使用しても<NN4.x>では、バグと言うよりその頃の<NN4.x>はスタイルシートに関して他のブラウザより、不備が多かったので、このような現象がおきてますね。 もし、スタイルシートを使用するならば、NN4.xは無視して、IE及びNN6以降を推奨するようにしたほうが無難かもしれません。

noname#19399
質問者

お礼

mat-21さん回答ありがとうございました。 正しい文法でかくことを、これまで怠ってきたので、今後はきちんと書きたいと思っていました。やはり、<H1>がなくていきなり<H2>があるのは間違いでしょうか; NN4.*に関しては、多少のズレは気にしないようにします。

noname#19399
質問者

補足

><H1>に該当する部分が、スライスした画像をテーブルでレイアウトしたもの等、上下に余白が入って欲しくない場合、<H1>タグを使わないで<H2>タグを使っています。 分かりづらくてすみません。 本来 <H1>見出し1</H1> <H2>見出し2</H2> <P>…</P> となるような部分を、H1の上下に余白が入ってほしくないために 見出し1 <H2>見出し2</H2> <P>…</P> このようにしているのですが、やはりダメですか?という質問でした。

  • UKY
  • ベストアンサー率50% (604/1207)
回答No.2

H1を使わずにいきなりH2を使ったり、H2を抜かしてH1の次にH3を使ったり、というようなことは、確かに邪道と考える人もいますが、HTMLの文法としては問題ありません。 しかし、《レイアウトのために》H1からH2に変えるというのはよろしくないと思います。 というのも、H1やH2というのは、単に大見出しであるか小見出しであるかというような見出しの「ランク」あるいは「レベル」を区別するものであって、フォントを大きくするとか太字にするとかの書式の設定は、個々のブラウザの判断に任されているからです。 つまり、ブラウザによって同じH1でも見え方が変わるかもしれないということです。極端な話をすると、ブラウザAでH1を表示したときとブラウザBでH2を表示したときとが同じになるということさえありえます。 レイアウトを気にするなら、タグを変更するよりもスタイルシートを使って書式を設定するほうが文法的ですし、確実ですよ。

noname#19399
質問者

お礼

UKYさん、回答ありがとうございました。 文法的には問題ないんですね。 レイアウトについては、できるだけスタイルシートを使ううようにと思っていたのですが、H1に関しては、マージンを0に指定しても、NN4.*が思ったように表示してくれず…悩んでいました。 多少のズレも関係ないデザインができるように頑張ります。

  • hana-hana3
  • ベストアンサー率31% (4940/15541)
回答No.1

HTMLは、あなたのイメージした体裁を表現するためのものです。 ですから、何が先で何が後と言うような、特別なルールはありません。 ただし、ブラウザによって見栄えが変わるタグもありますから、その点だけ留意する必要があります。 思い通りに、自由に書いて見て下さいね。

noname#19399
質問者

お礼

hana-hana3さん、回答ありがとうございます。 最近、ウェブアクセシビリティについて考えるようになりまして、これまでデザイン重視だった自分のサイトを反省していたところでした。 自分の表現したいこと(見栄え)も大事だし…難しいですね。

関連するQ&A

  • <H>タグの見出しと<P>タグの本文の間隔について

    初めてのホームページ作成に挑戦してます。 スタイルシートでデザインを調整しているのですが、 <H>タグの見出しと<P>タグの本文の間隔をCSSで二つの要素のマージンを0、パディング0にしても文字一つ分の間隔が空きます。ある一定の間隔以上縮めることができません。 また<H>タグと<TABLE>タグの間隔も<P>タグ以上に大きく間隔が開いてしまいそれ以上縮めることができなくて困ってます。 こういうものなんでしょうか? <DIV>タグなら間隔を好きなように調節でます。全て<DIV>タグで見出しも本文も書きたいくらいです。表は無理ですが・・・。

    • ベストアンサー
    • HTML
  • hタグを使わずに小見出し

    hタグは h1,h2,h3,h4 の順に書くべきだと分かってはおりますが、 例えば以下のように、大きいコンテンツの中でh2ブロック→h3ブロックと続き、 h2ブロックは、いわゆるコンテンツの中の序章です。 その際、序章の中の小見出し(<●●●>部分)のタグはどうするのが適当でしょうか。 <h2>の中にいきなり<h4>は変ですよね。 <h2>の中の見出しも<h3>でしょうか? そうした場合、<h2>の中にある<h3>と後から出てくる<h3>ブロックが 同レベルだと認識されてしまいませんでしょうか。 それとも<p>、<strong>、<div>等が適当でしょうか? -------------------------------------- <h1>第1の見出し</h1> <div id="contents">  <div class="section">   <h2>第2の見出し</h2>   <●●●>第2に関連する小見出し</●●●>    <p>テキストテキストテキスト</p>   <●●●>第2に関連する小見出し</●●●>    <p>テキストテキストテキスト</p>  </div>  <div class="section">   <h3>第3の見出し</h3>    <p>テキストテキストテキスト</p>   <h3>第3の見出し</h3>    <p>テキストテキストテキスト</p>  </div> </div> -------------------------------------- 検索してもみたのですが「hタグは順番通りに書くべし」といった記事ばかり引っかかり うまく見つけられませんでしたので、ここに質問させていただきます。 また、分かる方には基本なことかもしれませんが、 私も一応調べ、それでも分からなく質問しておりますので 「こんなこと基本的なこと」や「もっと勉強しろ」等の 攻撃的な文言は避けて頂きたくお願いします。

    • ベストアンサー
    • CSS
  • html5での、h1タグの余白について

    モバイル端末用のページをhtml5+CSS3でコーディングしています。 基本的にリキッドレイアウトで、imgタグについてはwidth:100%; vertical-align:top;を設けています。 また初期化用CSSとして、以下URLのCSSを読み込ませています。 https://code.google.com/p/html5resetcss/downloads/detail?name=html5reset-1.6.1.css&can=2&q= img(width:100%)をh1タグで括っているのですが、iPhoneで検証してみると、pタグ内に余白ができて しまいます。 h1に対して、CSSで余白がでるようなことはしていません。 また、横向きにすると余白はでず、縦向き時のみ余白が出ます。 このような現象ってご存知で、解消方法はありますでしょうか。

  • <h1>、<h2>と<p><div>の行間を狭くする方法

    お世話になります。 ホームページを作成する場合、見出し<h1>または<h2>の下に<p><div>で本文を記述すると、見出しと本文の間が空いてしまいます。 この間を狭く調整する方法を探しています。 よろしくお願いします。

  • ブログの記事で見出し(?)を付けたいです

    FC2ブログを初めて1ヶ月位なんですが 専門用語が分からない為 こういう表現しか出来ませんが 記事に見出しと、余白を付けたいんですが 方法が全く分かりません それで表示したい文章が こういう内容なんですが これは、見出し1つに文章1つで 更に、右に余白を付けて、左に揃えたいんです ただ、これを 1つだったり繰り返したいも考えたいんです ------------------------------------------------------- 見出し文章 ああああああああああああああああああ     いいいいいいいいいいいいいいいいいいい    ううううううううううううううう    えええええええええええ    おおオおおおおおおおおおおおおおおお  ------------------------------------------------------ それで現在は応急的に このタグを付けて、見出しだけ見易い様に、してあります <h2>文字</h2> 従って、上記で言うと 「見出し文章」だけは太く大きめの文字には反映してます ただ、文章に関しては 例えば引用文用のタグで <blockquote>文章</blockquote>と入れましたが ここのURLの様に表示されず ​http://www.htmq.com/html/blockquote.shtml​ 文章の周りに枠が付きます しかし、文章が全く反映しないんです タグの付け方は <h2>見出し文章</h2> <blockquote>本文</blockquote>です

  • css の h2 の最初

    外部スタイルシートを使っているのですが、そこで、h2のことなのですが、見出しの最初をたとえば☆にしたいと思います。 もちろん、htmlのタグに<h2>☆見出し</h2>と書けばいいのですが、できれば、CSSで☆の部分だけ自動的に入るようにしたいのですが、そのようなことは可能でしょうか? 可能だとすればどうすればいいか、教えてください。

    • ベストアンサー
    • HTML
  • h1~h6要素の背景色が範囲外までなってしまう

    見出しの要素の背景色を「#ddffdd」にしたところ、<h3>~</h3>の部分だけでなく<p>~</p>の部分まで背景色が適用されてしまいました。 背景色は、見出し要素(h1~h6)にしか指定していないのですがなぜでしょうか? 回答よろしくお願いします。 ソースは一部省略していますが、次の通りです。 ■HTML <div class="kukaku4"> <h3>■説明</h3> <p>文章1<br />文章2<em>重要</em>。</p> </div> ■CSS h2, h3 { color: blue; background-color: #ddffdd; }

    • ベストアンサー
    • HTML
  • 【SEO対策】Hタグの使い方(H1,H2~)教えて下さい。

    ↓今、作ろうとしているHPのレイアウトです。 わかるかなぁ・・・、 --------------------    <h1>ヘッダー</h1> -------------------- <h2>メニュー1</h2>|<h3>メニュー4</h3> <h2>メニュー2</h2>| <h2>メニュー3</h2>|<P>ここに詳細</P> <h2>メニュー4</h2>| <h2>メニュー5</h2>| <h2>メニュー6</h2>| <h2>メニュー7</h2>| <h2>メニュー8</h2>| -------------------- 上記のように「h2タグ」を連発するのはSEO対策として 問題ないのでしょうか?(スパム?) もし問題があれば上記以外にどの様にレイアウト すれば良いですか? 教えて下さい。よろしくお願い致します。

  • Hタグを改行禁止にしてspanのように使いたい

    Hタグは見出しタグなので、通常自動的に改行されてしまいますが、spanやstrongタグのように文中内に含める(Hタグの後に続く文字列が改行されない)ことは実現可能でしょうか? SEOを考える上でHタグが使用したく、パンくずナビゲーションのキーワードをHタグで囲いたいというのが目的なのですが。

    • ベストアンサー
    • HTML
  • h1、h2タグの付け方について教えて下さい

    h1、h2タグの使い方について質問させて下さい。 h1、h2タグがseo対策に有効であり、かつ見出しの大きい順にh1、h2と使っていくものだという事はわかりました。 フォルダ内に CSS書類を作ってこれを添付したいのですが、以下のような場合、h1、h2タグの設定はどうしたらよいでしょうか。ソフトはDreamweveMX2004使用。タグ打ちだけでは作れないので、Dreamweverで書き込んだソースを必要に応じて書き直し等しています。 【ホームページの構成】 ・index.htmlページはFlashで作った、swfファイル一つと(C)表示の一文のみ。swfファイル中のENTERボタンで2ページ目にリンク。 ・2ページ以降は同じパターンのページが、上部メニューバーで5ページ各リンク。(2挨拶、3商品説明、4アクセス~など) ・2ページ以降は各ページのタイトルバーの形が同じなのでこれに見出し設定をしたい。タイトルバーは文字色、余白などは全て同じだが、背景色のみ各ページごとに変えている。(教えて!gooの紺色地に白抜き文字のような形です。各ページごとに紺色地が別色になります) 【質問】 ・h1はindex.htmlに設定すると思うのですが、テキストは(C)の一行しかありません。他のページでは最下部に(C)表示を置きます。h1はどこに設定したら良いですか?画像にh1を設定する事があると聞きますが、swfにh1を設定することになるのでしょうか? ・タイトルバーはDreamwever/新規CSS/セレクタタイプ/タグ/h2で共通の文字色、文字サイズ、ボックスなどを設定して背景色のみ、各ページ設定する。この場合、2ページ以降はh1タグが無くなってしまいますーこの形は正しいでしょうか? ・hタグの使い方を考えるとサイトの構成に問題があったと思いますが、この構成で作ることになってしまいました。CSS添付ではなく各ページ毎に設定するべきなのでしょうか。もしそうならその時のh1,h2はどう設定したらよいでしょうか? どうか方法を教えてください。よろしくお願いいたします。

専門家に質問してみよう