• ベストアンサー

html における文章構造

1ページの中にあるテキストの文章構造をh1,h2,pと、タグをつけていく中で、h2のテキストにリンクをつけ、そのテキストをタイトルとして、新規ページを作る際、そのh2のテキストは、新規ページ内ではh1でタグつけするべきなのでしょうか。 文章構造は各ページごとに考えるべきなのか、 それとも、サイト全体で考えるべきなのでしょうか。 また各ページで考えた際、CSSが雑多なものになってしまわないでしょうか。

  • HTML
  • 回答数4
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • bunoo
  • ベストアンサー率60% (3/5)
回答No.4

あるテキスト内ではh2とタグをつけたテキストであっても、移動した後の新規ページで、そのh2が、h1を使う大見出しとしてふさわしいのであればh1にしてもいいと思います(私はそうしています)。私の場合は、トップページでは各記事のタイトルに対してはリストタグをつかい、リスト化した上でリンクを貼っていますが、個々の記事ページでは記事のタイトルをh1で書いています。なので、私は「文書構造は各ページで考える」派です。 また、各ページでデザインが違うとしても、classをうまく使えば、一枚の外部スタイルシートのみで思い通りのデザインにすることも可能です。確かにCSS文書は長くなりますが、コメントをつけたり、カテゴリごとに分けたり↓ ------------------------------ [site.css] /* ここから○○のカテゴリのページに対してのデザイン */ h1.top{ ほにゃらら } p.sky{ なんとか } /* ここまで○○ */ /* ここから××のカテゴリのページに対してのデザイン */ h1.midasi{ どかーん } p.monkey{ ずこーん } /* ここまで×× */ ---------------------- こんな感じにすれば、雑多という感じにはなりません。

kansu-ke
質問者

お礼

具体例までいただきありがとうございました。

その他の回答 (3)

回答No.3

>文章構造は各ページごとに考えるべきなのか、 それとも、サイト全体で考えるべきなのでしょうか。 一応、決まり事はないですが、 かと言って、サイトという単位を表す物も物理的には無いのも・・・・・。 今回の例のリンクですが、 作成時はサイトの概念があったとしても、 閲覧時はページ毎に処理され・・・。 少なくとも各ページのリンクを辿って読み込まないとページの関係は判りません。 まぁページ関係を表す属性は規則上はありますが・・・・・。 結局、ページをどの様に表す考えでいるのかという作者の考え次第かと。 別に、見出しの存在しない文書だけのページとか、 ある表したい物の中の一部をそのページにしたと考えるとか・・・。 表す物に見出しがないのに無理に h1 , h2 とかを使う方が問題。まぁ自分で見た目が悪いから h1, h2 を使いたいと感じるなら、それは見出しが無い事が作り手の意思とずれているという事で・・・。 後は、小見出しか大見出しかという内容の問題・・・。 と、いずれにしても HTML の規則から決まる事ではなく、そこに表したい内容から決まる物です。 まぁその内容の問題で、ページはどこから読まれるか判らないというかある程度独立している作りが良いとなるので >文章構造は各ページごとに考えるべきなのか 単ページしか読まなかった事を想定して、それが望ましいと。 >サイト全体で考えるべきなのでしょうか。 この「サイト全体」をどの様にして閲覧者に伝えるのか? 現状では「サイト全体」って、作り手の自己満足にしか効果がありません・・・。 >各ページで考えた際、CSSが雑多なものになってしまわないでしょうか CSS はデザインです。文章構造とは別物です。CSS が雑多となるならば、意味にとらわれていないデザインという処でしょうか。 この疑問から逆に気になるのが、デザインによって要素を使い分ける感覚があるのでは? ページAで h1 を用い、ページBで見出しをと考える時、別にページAの h1 より小さくしたいとかデザインは別で h1 か h2 を意味で選べば良く、またページBの見出しは小さくしたいとかなら、ID を付加するなりして CSS でデザインすれば良い事・・・・・。 尚それを「CSSが雑多なものになってしまう」とは言わない。というか、先に CSS ありきは誤りかと・・・。 尚、サイト全体で考えつつも単ページの閲覧を考慮した場合、全ページに h1 : サイトタイトル h2 : コンテンツタイトル h3 : ページタイトル h4 : 大見出し h5 : 中見出し h6 : 小見出し を必ず記述するしかなく、そうするとページによって「h1 : サイトタイトル」のデザインを変えたいのが自然で(とは言っても、意味的には一番上だから h1 タグを使わないといけないし・・・。) で、自然と CSS でデザインが増え、まぁ雑多とは言わないけどいろいろ記述が増えるのは仕方がないかと・・・。

kansu-ke
質問者

お礼

詳細なご指摘ありがとうございました。

  • aqucent
  • ベストアンサー率39% (78/200)
回答No.2

> 新規ページを作る際、そのh2のテキストは、新規ページ内ではh1でタグつけするべきなのでしょうか。 HTMLでは特に定義されていないようですので、クリエイターのポリシーによると思います。 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.5 私の場合は、h1要素から順にマークアップしています。 h1要素にページタイトル、h2要素に大見出し、h3要素に中見出し...というように。 統一性を考慮して、サイト全体のスタイルを適用しています。 各要素には最も使われるスタイルを宣言しておき、章節番号を特定せずに使うスタイルはクラスで宣言しておきます。 クラスのおかげで、それほど煩雑なソースにはなっていないと思います。 蛇足ですが、「h1要素 → h3要素」のように章節番号を飛ばして宣言することは推奨されていませんのでご注意下さい。 http://openlab.ring.gr.jp/k16/htmllint/explain.html#heading-order

kansu-ke
質問者

お礼

サイト自体を本や雑誌と違う、個々の文章のアーカイブという位置づけなら各ページ毎にh1からタグ付けすべきでしょうね。ご回答ありがとうございました。

  • pi8027
  • ベストアンサー率11% (6/53)
回答No.1

一つの文書には其の文書の構造があるのだから、其れを適切にマークアップするべき。 と云うか、h2要素が存在する文書にh1要素が存在しない筈が無い。

kansu-ke
質問者

お礼

たしかにh1あってのh2ですね。ページ単位かサイト単位かの判断はディレクター次第なのでしょうか。

関連するQ&A

  • CSSでのリンク指定(?)

    現在、外部CSSで、<h1>タグの背景にタイトル画像を表示するように設定しています。 HTML上の<h1>タグ内では、タイトルに値するテキストを入れていますが、ブラウザの表示できない所においやってあります。 その表示されているタイトル画像(h1で表示している部分)に他ページへのリンクを設定したいのですが、こうした場合のリンク設定はどのようにすればよろしいのでしょうか? CSS内で設定することは可能なのでしょうか? それとも、HTML上でなんらかの形でリンク設定を行うものなのでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 外部CSS。ページ全体の背景色や文字色を変えたい。

    これまでは各ページごとに、このようなタグをかいていました。 <BODY bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000"> ページ全体の「背景色」「テキスト色」「リンク色」「既読リンク色」「選択中リンク色」です。 だけどこれからは、外部CSSで同じことを指定するようにしたいです。 ですが、調べてもなかなか明確なタグが分かりません。 宜しければ教えて下さい。

  • PHPインクルード自の各ページ独自設定

    某ポータルサイトを運営しております。 全ページにPHPのインクルードを使って共通して入っているヘッダーにて <h1>タグが入っています。 <h1>タグの内容は<?php echo $h1; ?> にしており各ページにて <?php $h1 = "内容"; ?> というふうにして、文言は各ページにて変えるというふうにしております。 今回はそこにリンクを各々設定したいのですが、 <h1>タグの場所はインクルードしたヘッダーのデータの中です。 そこにリンクをつけても全ページが同じ リンクになってしまいます。 今の構造は崩さず、各々に違うリンクを入れることは可能でしょうか? それとも、 一つ一つのページにもう一個、<h1>だけが入ったヘッダーを上乗せしていかなければならないでしょうか? お願いします。

    • ベストアンサー
    • HTML
  • hタグの右横に画像を表示

    hタグ(今回は<h3>タグ)の右横に、「new」の画像を表示したいと思っています。 <h3>タグは1ページの中に複数出てきて、それぞれ文字数も異なります。 全てに「new」がつく訳ではなく、任意のものだけに表示です。 css の background image で試してみたのですが 当然のことながら、left か right かの指定なので、どちらかに極端に寄ってしまいます。 right 指定で%で指定していけば、なんとなくバランスよくはできますが あくまでなんとなくであって、 更にタイトルの文字数によって変わってきてしまうので 個別にcssを指定していかなければなりません。 (そういうものなのでしょうか。) ※例えば「new」画像が左置きなら、 background image を使って、hタグの css に padding-left:100px; などとすれば済みますよね(画像の分だけpaddingで空きを作る)。 でも右側に画像を置くとなると、こんなにも面倒なものなのでしょうか。 hタグのタイトルから右横に(例えば)20px空きをつくり画像を配置、 ということが簡単には出来ないものでしょうか。 それとも <h3>テキストテキストテキスト<img src="********"></h3> なんてことをしてもいいものでしょうか。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • h1,h2タグに背景画像

    よろしくお願いします。 このページでoff-leftというテクニックを知りました。 http://www7.plala.or.jp/zeroxstyle/use_xhtmlandcssoffleft.html h1タグなどに背景画像として文字画像を表示させ、テキストはCSSのtext-indentで画面の外に追いやるというものです。 確かにこれなら見た目も綺麗だし、文章構造もすっきりしたアクセシブルなサイトになりますが、googleからSEOスパムと判定されるのではないか疑問です。 実際にこのテクニックを使っているサイトってあるのでしょうか? 素直にh1タグにalt属性つきの画像を入れたほうが無難でしょうか・・・・?

    • ベストアンサー
    • SEO
  • サイト説明のタグ付けについて

    XHTML+CSSでサイト構築を勉強している者です。 XHTMLのマークアップで疑問があったので質問させていただきます。  XHTMLの参考書を見ると【サイトの大見出し<h1>の次に配置するのは文書 構造的にサイトの説明文40~80文字程度が良い】と書いてあります。 例 <body> <div id="wrap"> <h1>サイトタイトル<h1> <p>このページは○○についての紹介ページです。…</p>  この場合、検索エンジン表示結果リストのタイトル下に説明が出ること と、サイトの概要が文書構造的にすぐ出てくるのでSEO的にも良いと書いてあります。  しかし、アメーバブログやSEO対策をしてあるように見えるサイトは次のようにマークアップしています。 例 <body> <div id="wrap"> <h1>サイトタイトル<h1> <h2>このページは○○についての紹介ページです。…</h2>  概要に<p>を使わず、<h2>を使っています。  確かに中見出しとして文書構造的には良いと思うのですが、<h2>内に80 文字を入れようとすると不自然な感じがします。  <h1>のすぐ後に<h2>を置き、サイト概要を入れるメリット、デメリット はあるのでしょうか。  よろしくお願いします!  

  • 【stylus拡張機能】既リンクに色をつけたい

    Chromeでstylusという拡張機能を使って、 既リンクの場合に色をつけたい(CSSを上書きしたい)と思っています。 つけたいのがnoteというページの記事一覧で、HTMLは添付画像のような構造になっています 既リンクとなった際に色をかえたいのは、h3が指定されている「タイトル」の文字の色です。(もし無理なら「本文」) a:visited {color: #FFEEFF !important ;} a:visited h3 {color: #FFEEFF !important ;} a:visited div {color: #FFEEFF !important ;} a:visited div h3 {color: #FFEEFF !important ;} みたいな感じ指定してみたのですが、どの形でも、タイトルの文字色は変わりませんでした。(aタグとh3タグが別の層にあるから?) 他のサイトでは上手くいっているので、stylus自体は正常に動いていると思います。 CSSを理解しておらず、指定の仕方がおかしいからだと思うので、どのように指定したら良いか、分かる方居られましたら教えて頂けますでしょうか。 宜しくお願いいたします。

    • 締切済み
    • CSS
  • cssが長くなってしまう。他に良い方法は?

    サイトのレイアウトをCSSで行なっているのですが、例えばノーマルなテキストの色・スタイル、リンクの色などの設定がぺージ(コンテンツ)ごとに違います。なので「pタグ内のスタイルはこれ」と絶対的に定めることが出来ません。 全ページでテンプレートを使用していて、それが既に外部CSSを1つ呼び出しています。コンテンツごとにCSSを用意するのがスマートに思えますが、そうすると外部CSSを複数指定することになります。どこかでこの方法は推奨されないと聞いたんですが、本当ですか? もしそうである場合、その1つのCSSに全ページ分のスタイルを記述することになりますが、それもまたCSSのソースがバカでかくなってしまいます。 これはどうするべきでしょうか?

  • こちらのサイトは一体どのような構造になっているのでしょうか?

    現在、SEOを考えたブログのカスタマイズを勉強しているのですが、 こちらの「美肌を目指す女性のための美肌の秘訣Q&A」というサイト↓ http://www.synchronicityreiki.com/bihada/ を見て、どのような作り方をしているのか知りたくて質問しました。 というのも、TOPページを少し下にいくと たくさんテキストリンクがあるのですが、 例えば「佐伯チズさんファン、必見!」というリンクをクリックすると 「佐伯チズさんファン、必見!」というタイトルのサイトが出てきます。 これは別に新しく「佐伯チズさんファン、必見!」というサイトを 作ってリンクしているのかな? と思ったのですが、 URLを見ると一つのサイトの中の1ページのようです。 (他のリンクも同様に同サイトの中の1ページのようです) しかしソースを見ると、タイトルタグは「佐伯チズさんファン、必見!」となっていて、別のサイトのようでもあります。 これは一体どのようにして作られているのでしょうか?

  • Googleロボットがトップページ以外のページを見に来てくれない

    あるサイトを2006年8月下旬に公開し、GoogleにURLを登録しました。 何ヶ月かして、一応トップページはインデックスに登録されたようです。 しかし、トップページからリンクしているその他のページはクロールされた形跡がありません。 ちなみにメタタグの検索ロボット制御は"index,follow"にしてあります。 この場合、トップページの構造自体に問題があると思えるのですが、以下にトップページの概要を記述しましたので、どのあたりがクロールしてくれない原因になっているのかご教授いただけませんか。 よろしくお願いいたします。 ・テーブルレイアウトではなくCSSレイアウトを採用 ・テキストは一切なく、画像のみで構成されている ・その他のページへのリンクは、テキストリンクではなく画像リンク(リストタグでマークアップし、Aタグのalt属性に代替テキストを入れてある) ・サイト名の画像など、重要な文言の画像は<h1>タグなどでマークアップ(<h1>タグなどで<img>タグを囲んでいる状態) ・JavaScriptを使ってFlashを表示させている箇所がある ・Googleウェブマスターツールを利用し、sitemap.xmlとrobots.txtをアップロードしている ・インデックス登録はされているが、サイト名で検索してもひっかからない ・被リンク数はゼロ ・ページランクは割り当てられていない ・ドメインは7年前から取得していたが、上記の日付までは何もなかった ・Yahooでは、サイト名で検索すると1位で、サブページもクロールされているようである ・MSNでは、Googleと同じように全く検索にひっかからない (自分的には、2番目と3番目あたりが怪しいのではと思っていますが、 テキストを入れることやテキストリンクにすることはできる限り避けたい状況です。)

専門家に質問してみよう