女子の「頭皮」のお悩み解決の選択肢とは?

質問させていただきます。

ホームページを作っているのですが、h1タグで囲ったテキストをサイトのデザインに合わせてサイズを少し小さくしました。

その結果h2のタグの方が大きくなってしまったのですが、これはh1よりh2の方が重要だとクローラーに認識されてしまうのでしょうか?

他の方の質問を探してみたのですが、hタグは「領域」が重要だとおっしゃる方がいました。

つまりh2の方がサイズが大きい=領域が大きいとなってしまい、クローラーを混乱させてしまうのでしょうか?

サイト内にh1を超えるサイズのテキスト(hタグ以外でも)があってはいけないのでしょうか?

それとも「h1」という宣言が大事で、大きさや領域は関係ないのでしょうか?


わかる方アドバイスを頂けたらうれしいです。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

 ウェブ上に膨大に存在する、あやふやな--大半は屑--の中から、正しい情報を得ようとするのは無駄です。

藁の山から針を探すより難しい。
 まず仕様書を読めば理解できるはずです。
HTML 4による文書の設計( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
見出し: H1、H2、H3、H4、H5、H6要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 はそのごく一部で、全文を通して読んでおくこと。【ウェブ開発するなら必須】

 googleのガイドには『Lynx などのテキスト ブラウザを使用して、サイトを確認します(ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります)。( https://support.google.com/webmasters/answer/357 … )』と明記してあります。
 一度でも御自身の製作されているページをLynxで見たことありますか??

 h1→h6は見出しのレベルを表すものですが、文書構造を示す<DIV>と併用することで、割り明確になります。DIVの用途は
『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
 でしたね。!!!
 HTML4.01では明確でなかったために、HTMLではDIVを極力使わず、文書構造を示す要素でアウトラインを示すようになります。(HTML4.01では理解されなかった)
 HTML5の仕様書を読まれると分かるように、h1はひとつのsection(HTML4だと<div class="section">など)にひとつだけh1~h6が入ることになります。

>つまりh2の方がサイズが大きい=領域が大きいとなってしまい、
 その情報が誤っているか、あなたの理解が誤っているかです。googleのガイドは無論、HTMLの仕様書にも、HTMLは文書構造を示すとしか書かれていない。ここでいう領域とは、文書構造--アウトライン上の範囲ですよ。

<div class="article">
 <div class="header"><!-- このarticleのヘッダ -->
  <h1>見出し</h1>
 </div>
 <div class="section">
  <h2>見出し</h2><!-- このsectionの見出し -->    ↑
  <p>記事</p>                       |
  <div class="section"> ↑
   <h3>見出し</h3><!-- このsub sectionの見出し -->
   <p>記事</p>       |
  </div>           ↓h3の領域
  <div class="section">
   <h3>見出し</h3>
   <p>記事</p>
  </div>
 </div>                        ↓h2の領域
 <div class="footer>
  <h2>見出し</h2>
 </div>
</div>
 において、上図であることは検索エンジンに明確に理解できますよ。

根本的な部分から学びなおされたほうが良いですし、そのほうが近道です。
>ホームページを作っているのですが、
 ウェブサイトですよね。⇒ http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% …
  利用者の立場なら問題ないけど作る立場になると
 「ウェブページをつくっているのですが」

>h1タグで囲ったテキストを
 見出しのうち、そのページの最上位の見出しを示すタグです。
 「レベル1の見出し(h1)を」

>サイトのデザインに合わせてサイズを少し小さくしました。
 デザインの都合上、フォントサイズを小さくした

 その場合、検索エンジンにはどのように理解されるか

 と言うことだと思います。

(回答)
 SEOとは「検索エンジン最適化」と言う意味で、検索エンジンがページの内容を文書構造から正確に理解できるように最適化するという意味です。
 従って、
★その文書全体の内容を的確に示す見出しをつけて<h1></h1>でマークアップすること。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^<title></title>の内容と同じものになることが多いはずです。
★検索エンジンに正しく理解できるようにきちんとアウトラインを意識して・・
 HTML5では、統一されていればすべてh1でも良い。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 <section>
  <h1></h1>
   <section>
    <h1></h1>
     <section>
      <h1></h1>
 でもよい。HTML5ではアウトラインはsectionの階層で解釈するので・・
 が!!!、やはり階層でh1→h6とするほうが良い。
(アウトライン)とは、目次を作るときの「章立て」と考えると良い。

 領域とはこの階層のことですから、よりひろい範囲を示す見出しでしたら、それなりの階層であるべきです。
★視覚系ブラウザで、どのように見せるか--フォントサイズ---は関係ありません。

 
    • good
    • 0
この回答へのお礼

ORUKA1951さん回答いただきありがとうございます。

>ウェブ上に膨大に存在する、あやふやな--大半は屑--の中から、正しい情報を得ようとするのは無駄です。藁の山から針を探すより難しい。
 まず仕様書を読めば理解できるはずです。

遅ばせながら記載いただいた仕様書を読ませて頂きました。ユーザー目線でウェブページを作る事が大前提で、上位表示されるための小細工なんて二の次なんだなと感じました。おっしゃるとおり、ウェブ上の多岐に渡る信ぴょう性に欠ける情報に振り回されてました。

>HTML5では、統一されていればすべてh1でも良い。

これは初耳でした。h1は各ページに一つしか記述できないものとばかり思っていました。仕様も日々変わっているのですね


>やはり階層でh1→h6とするほうが良い。

まずは私もこの記述方法でやってみようと思います。

>視覚系ブラウザで、どのように見せるか--フォントサイズ---は関係ありません


大変参考になりました。ありがとうございました。

お礼日時:2013/07/26 00:38

h1を小さく表示していますが、そこそこのキーワードで上位表示されています。


おそらく、文字サイズは重要ではないと思います。

そもそも文字サイズはブラウザによっても多少異なりますし。
    • good
    • 0
この回答へのお礼

vsdvihsさん回答ありがとうございます。


>h1を小さく表示していますが、そこそこのキーワードで上位表示されています。
おそらく、文字サイズは重要ではないと思います。


なるほど。文字サイズは関係ないのですね。参考になりました。

>そもそも文字サイズはブラウザによっても多少異なりますし。

確かに。自分のページを初めてfirefoxで見たときはビビりました。サイズも小さいし、フォントもかすれてました。

アドバイスありがとうございました。

お礼日時:2013/07/26 00:47

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q  これの意味教えて下さい。

これの意味教えて下さい。
タグの
<tr>
<td></td>
</tr>
中に入っている
意味はなんですか?

Aベストアンサー

空白(半角スペース)として使用されることが多いですが、
を使用すると改行されません。

たとえばOK WaveのOKが行末あたりに来たときに、
(1)OKとWaveの間を半角スペースとする場合
~~~OK<改行>
Wave~~~

となりますが、
(2)OKとWaveの間をとする場合
~~~<改行>
OK Wave~~~

となります。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qヘッダーの上にほんのわずかに隙間ができる

ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。
ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます(1~2px程度です)。ヘッダーボックスにCSSで設定しているのは
margin-left:auto;
margin-right:auto;
width:1000px;
のみです。
bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・
<!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">

<head>
<meta http-equiv="&rdquo;Content-Type&rdquo;" content="&rdquo;text/html;" charset="utf-8&rdquo;" />

でございます。教えてgooのトップ(http://oshiete.goo.ne.jp/)も一番上("質問&回答 (Q&A) コミュニティ - 教えて!goo"のところです)は画面上部にぴったりくっついていますよね。どうすればこのような形にできるのでしょうか?どなたかアドバイスをお願いします。

ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。
ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます(1~2px程度です)。ヘッダーボックスにCSSで設定しているのは
margin-left:auto;
margin-right:auto;
width:1000px;
のみです。
bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・
<!DOCTYPE htm...続きを読む

Aベストアンサー

<body>タグの属性に topmargin="0" を指定してみて下さい。
隙間がなくなると思います。

同様に<body>タグに leftmargin="0" なんて指定したら左にピタっとくっついたページになりますよ^^

<!-------------------------------------------------------->

<html>
<head>
<title>詰めテスト</title>
</head>
<body topmargin="0">
<div style="border:1px solid blue">上詰めテスト</div>
</body>
</html>

<!-------------------------------------------------------->

Qhtml で 変数を定義できますか?

html(できればjava不使用)で変数に文字列をいれてつかう、またはそれに近いことはできないでしょうか?

例**************************
$color1="#000000"

<tr bgcolor=$color1>内容1<tr>
<tr bgcolor=$color1>内容2<tr>
****************************
みたいな感じです

Aベストアンサー

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!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:orika1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
.parson1:before{content:"田中";}
p.age1:after{content:"36歳";}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<p class="parson1">は男の子</p>
<p class="parson1 age1">の年齢は</p>
<p>私の彼氏は<span class="parson1">君だよ</p>
</body>
</html>

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!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>
<met...続きを読む

Q

CSSの質問です。

<ul>と<li>でリストマークを消すために
list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか?

どちらに設定してもリストマーク消えますけど。
どちらに設定したら規格上違反とかありますか?

Aベストアンサー

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef-list-style )]より

 OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

 このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

 listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
 そこで、私は、
div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
といったんリセットしてから、様々な指定を付け加えていくことにしています。

 文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values fr...続きを読む


このカテゴリの人気Q&Aランキング

おすすめ情報