tabによるスペースの障害と、cssのDIV id=○○ seo対策における<h○>タグ について

質問

現在、ブログで公開していた記事をやめて、HPで作り直そうと思い、メモ帳とExcelを使って、サイトを作ってみようとしているところです。
初心者です。

Excelを立ち上げて、htmlをセルに記述します。次のセルには、タイトルを。その次のセルには本文を。などというように、1行をコピーして、メモ帳に貼り付け、拡張子をhtmlで保存し、IEでプレビューすると、ちゃんと表示されるのですが、
そのソースを右クリックで表示すると、セルをまたいだ箇所に、tabの空白が入っていて、非常に見にくくなっています。
IE以外のブラウザで確認したことがないのでわかりませんが、
HTMLのソースに、必要以上にtabによる空白が入っていても、問題はないのでしょうか？

もうひとつ、質問があります。
cssの、ボックス指定についてなのですが、
外部スタイルシートの記述は以下のようになっています。

#left1 {
position:absolute;
top:0px; left:0px; margin:0;
padding: 4px; border: 1px #666 solid;
width:120px; height:120px;
background:#FFFFCC;
}
#menu1 {
position:absolute;
top:0px; left:134px; margin:0;
padding: 0px;
width:522px; height:130px;
}

このように指定したボックスが11個あります。
htmlの記述は、<div id="left1">～</div>
などのようにしています。
span class id などの違いがよくわかりません。

1枚のHTMLファイルの中に、こんなにたくさん<div id="～">
を使ってはいけないなどの決まりはあるのでしょうか？

最後の質問です。
見出しタグについてなのですが、
<h1><h2><h3><p>
と、文章をつなげた後、
<h2><h3><p>
のように、一度<h3>を出現させた後に、また<h2>を使用してもいいのでしょうか？

理解不足で申し訳ありません。
どなたか、それかひとつでもいいので、教えていただけますでしょうか。
よろしくお願いいたします。

回答No.2

d-_-b_kenken · ベストアンサー

▼ idとclass
そのページで１カ所だけに適用させたいスタイルは「id」を使い、ページ内で２カ所以上に適用させたいスタイルは「class」を使う決まりになっています。
同じページ内で使い回し出来るのが「class」、使い回し出来ないのが「id」ということです。

▼ spanとdiv
　「span」はインライン要素、対して「div」はブロックレベル要素。
ブロックレベル要素とは、「（通常）改行を伴う表示上のまとまり」として扱われるもので、内容として別のブロックレベル要素やインライン要素を含むことができます。（見出し（h1～h6）、段落（p）、リスト（ul,ol,dl）、ブロック引用（blockquote）、アドレス（address）、hr、整形済み要素（pre）、テーブル要素、div要素など。）
但し、p要素のように内容にインライン要素しか持てないものやpre要素のようにさらに内容が限定されるもの、hr要素のように内容を持たないものもあります。
　インライン要素とは、主としてブロックレベル要素の内容として、特定の部分になんらかの役割や機能を持たせる要素 で、その内容に文字データあるいは他のインライン要素を持つことができますが、ブロックレベル要素を含むことはできません。（リンク（a）、強調（strong,em）、img、br、span要素など。）

＞　そこからさらに
　　h2→p→h3→p
　　と、繰り返してもよいのでしょうか？

問題ありません。正しい文書構造になっています。

＞　<h1><h2><p><h3><p><h2><p><h3><p>
　　のようになり、<h3>が出現した後に、また<h2>が出現するようになります。
　　まるで順番を無視したような形になってしまうので不安です。

これも問題ありません。
hタグの用法として注意しなければいけないのは、
<h1>～<h2>～<h4>
のような構造は正しくないという点です。
<h2>からいきなり<h3>をとばして<h4>になっているのは文書構造として間違っています。<h1>がなく<h2>から始まっているページなどもダメです。
階層が下がる時は、順番通りにしなければいけないということです。
逆に、階層が上がる時の順番は関係ありませんので、下のような構造は問題ありません。
<h1>
　<h2>
　　<h3>
　　　<h4>
　<h2>
　　<h3>
　<h2>
　　<h3>

お礼

ありがとうございました。
<h○>の使い方に不安があったので、教えていただいて安心できました。

spanやdivのインライン要素やブロックレベル要素などについて、まだまだ不安が残りますが、これから勉強していきたいと思います。
ありがとうございました。

回答No.7

noname#19175

> 初心者です。
何の初心者ですか？
EXCELの初心者、ということで良いでしょうか。それともHTMLの初心者ですか？はたまた日本語の初心者でしょうか？

あえてEXCELを「使わなければならない」というのでなければ、
HTMLを直接書くか、HTMLのオーサリングソフトを利用されたほうがいいのではないでしょうか？

ほかの方もおっしゃってますが、Microsoft Office系のソフトでウェブページを作るのはお薦めできません。
理由はいろいろありますが、その理由により、「EXCELを使わなければならない」ということも考えられますので、何とも言えませんが。

自分のブログをHTMLに書き換える方法で一番手っ取り早いのは、
MozillaやNetscapeなどの編集機能もついた統合ブラウザでそのページを表示して、
そのまま編集画面を表示してそこで編集することじゃないでしょうか？
（広告や画像など、自分が著作権を持っていない部分を削除する必要があります）

Mozillaでそのページを表示、Ctrl+E（MacはCommand+E）で編集画面が出ますので、そのままワープロ間隔で編集できます。
http://www.mozilla-japan.org/products/mozilla1.x/

> 1枚のHTMLファイルの中に、こんなにたくさん<div id="～">
> を使ってはいけないなどの決まりはあるのでしょうか？
このような規定はありませんが、
あまりに多すぎると、表示に時間がかかるなどの問題が出てきます。
できるだけシンプルな方が（人にもブラウザにも）理解しやすいです。

> h1で、そのページのタイトルを決め、（h1は1回しか使ってはダメだと聞きました。）
そんなことはありません。
ページのタイトルとページの中の見出しは別物です。
タイトルはさしずめ第一巻○○、第二巻○○といったものになりますので、
見出しではありません。

もちろん、作者が違えば考え方も変わります。

大見出しをタイトルに昇格（？）させることもできます。
その場合は、<h1>で書かれた見出しを、<title>の所に書き直して、
<h2>～以下をそれぞれ<h1>～に書き直せばよいことですし、結果的に<h1>が１ページに１つだけ、ということにもなるかもしれません。
逆に、第一巻、第二巻もないのなら、小説のタイトルをページタイトルにしても良いでしょう。

> <h1><h2><h3><p>
（誤）
第一章　(<h1>)
　第一節　(<h2>)
　　第一項　(<h3>)
第二章　(<h1>)
　　第一項　(<h3>)

というふうに、間をとばすことは出来ません。

（正）
第一章　(<h1>)
　第一節　(<h2>)
　　第一項　(<h3>)
　　　本文 (<p>)
第二章　(<h1>)
　第一章　(<h2>)
　　本文 (<p>)

つまり、<H3>の次に<H1>や<H2>が来ても問題ありません。

（日本語では一般的に３～４種類の見出しですが、ＨＴＭＬという言語では７種類（<H1>～<H7>）あります。
また、<h1>から始めなくても、<h3>から始めても良いです。）

それ以外の点については、ほかの方の回答をご参考ください。

参考URL：

http://www.mozilla-japan.org/products/mozilla1.x/

お礼

初心者であるのは、ご指摘いただいた、Excel　HTML　日本語、すべてです。
はじめに申し上げず、不愉快な思いをさせてしまったのでしたら、大変申し訳ありませんでした。
それにもかかわらず、質問にお答えいただきありがとうございます。

教えていただいたMozillaをインストールしてみました。
ブラウザはIEしか使ったことがなかったので、戸惑いましたが、文字の大きさひとつから違って見えることに驚きました。
人にもブラウザにも優しいページを目指して、頑張ろうと思います。
ありがとうございました。

回答No.6

koutarou504

＞HTMLのソースに、必要以上にtabによる空白が入っていても、問題はないのでしょうか？
TAB は空白でしかなく、空白は連続しても無視というか１つとして扱われます。
ソースを診やすくする目的で、無駄な空白や TAB を入れる事は良くあります。

＞span class id などの違いがよくわかりません。
SPAN は要素で CLASS, ID は属性。
CLASS, ID は微妙に命名規則からして異なり、CSS での優先度も ID の方が CLASS より上。（CLASS は要素より上）。ただし ID は HTML の規則上、単一のソースで名前は一意でなければならない。

＞見出しタグについてなのですが、
＞<h1><h2><h3><p>
＞と、文章をつなげた後、
＞<h2><h3><p>
＞のように、一度<h3>を出現させた後に、
＞また<h2>を使用してもいいのでしょうか？
技術的な事だけなら、何も気にせずどうぞという事なのですが・・・。
意味的というと少々面倒で、どのレベルという事まで考えないといけなくて。
まずタグはその内容の意味によって選択します。対象となる内容が意図する物ならそのタグでなんら問題ありません。で問題とするべきはタグではなく対象となる内容です。
全体の見出しのない文章に最初のページに出てきた段落の見出しだからと言って <H1> タグを用いるのは誤りです。もし <H1> の有無を問題にするのならいきなり <H2>, <H3> などが出る事を問題にするのではなく、<H1> に当たる見出しが無い事が良い事か検討するのが本来です。
そして今回の例示では、後に出てくる見出しが適切な位置に配置されているかが問題で、先に別の見出しがあるかどうかはあまり関係ありません。
（というか、見出しを付けるからには、それなりの内容の塊を意識していると思いますが、<H2> の塊の中に 別の <H2>, <H1> があっても変でしょう。）

<h1>1.大見出し</h1>
<h2>1-1.中見出し</h2>
<h3>1-1-1.小見出し</h3>
<p>1-1-1-段落</p>
<h2>1-1-2.小見出し</h2>
<h3>1-1-2-1.見出し</h3>
<p>1-1-2-1-段落</p>
これは何か変でしょう・・・。
つまり順番の問題でなく意味の問題かと・・・。

参考URL：

http://www.doraneko.org/webauth/css1/19961217/Overview.html#class-as-selector

お礼

順番ではなく意味の問題ですね、本当にその通りだと思います。
次はSEO対策とばかり、方向を間違っていたように思います。
ありがとうございました。

回答No.5

UKY

id と class の違いは単純に一回しか使えないか何度でも使えるかというようなものではなくて、もっと根本的に違います。少なくとも使う回数によって使い分けるものではありません。

http://deztec.jp/x/01/tips/page/p0045.html
http://web.xii.jp/iec/html/memo/id-class
http://www.tg.rim.or.jp/~hexane/ach/awht/awht07.htm

厳密には HTML の id/class と CSS の id/class は分けて考えるべきなのですが、難しいので触れないことにします。

あと、h1 が一回しか使えないというのは嘘で、二回以上使おうと思えば使えます (文法上は)。
しかし、h1 は文章の中で一番大きな見出し、つまりタイトルに相当するものなので、結果的に一度しか使わないということなのです。文章の中にタイトルが二回以上出てくるなんて事は普通はありえないですからね。

お礼

教えていただいたURLを拝見いたしました。
ありがとうございます。
例がとてもわかりやすく参考になりました。
ありがとうございました。

回答No.4

noname#19206

ExcelみたいなMS Office系のソフトウェアは、
作成したファイルに使用者の情報が入るのであまりお勧めできません。
他のソフトウェアをお試しください。

ワープロ感覚でWebページを作成できるソフトウェアはフリーでも幾らかありますよ。

お礼

使用者情報について、考えていませんでした。
ありがとうございます。
ページすべてのデータをExcelで管理していたので、間にタグを入力したら便利かと思っていました。
横着せずに頑張ります。ありがとうございました。

回答No.3

cyokokichi

#2の方が既に回答してくれていますので必要ないと思いますが、例のソースの見出しを取り出すと
<h1></h1>
<h2></h2>
<p>や<dl><ul><li>
<h2></h2>
<p>や<dl><ul><li>
<h2></h2>
<p>や<dl><ul><li>
<h3></h3>
<p>や<dl><ul><li>
<h3></h3>
<p>や<dl><ul><li>
<h2></h2>
<p>や<dl><ul><li>
<h2></h2>
このようになっていますよね。
大見出しが有って、各一まとまりの段落やリストの見だしがあってときにはその中に小さな見出しが有るイメージになっていると思います。
ですからご質問の使い方はHTMLとしては問題はないと思います。

この辺りは、文章を作るときの感覚で不自然さがなければほとんど問題はないです。
body内に出現できるほとんどのタグは、文章の各部分を表す記号と解釈すると自然にご質問されている形になってしまうと思います。
逆にHTMLの意味合いに応じて見出しをつけるならご質問されている形にするしかないと思います。

ただ、心配なのは検索エンジンのことと思いますので、W3Cのページを例にさせていただきました。
私も検索エンジンについてははっきり言えないものですから。

それと、念のために私の感覚からすると<h2><h3>をくっつけるのは不自然に感じますけどね。

お礼

ありがとうございました。
コンテンツに見合うような正しい文法を身につけて、これから頑張りたいと思います。
ありがとうございました。

回答No.1

cyokokichi

Tabは連続していても、1つの空白になると思います。
せめてIE6では問題ありません。

大雑把に言ってidとclassの違いは、1つのファイルで同じ値を付けられるのがclassです。
付けられないのがidです。
例えば
<div id="a">
が1つのファイルの中で2回書いてはいけないけどclassだったらOKです。
値（"a"の部分）が違っていたら何度出てもOKです。

http://www.w3.org/TR/html4/
このページのソースを見てください。
h1とh2が続いていますので問題ないと思います。
しかも、ページランクが9ありますので、検索エンジンスパムにもならないと思いますよ。

お礼

ありがとうございました！
補足部分にも答えていただければ幸いです。

補足

ありがとうございます！
idとclassの違いは、大変よく理解できました。
あ！そうだったんだ！　と、納得できて、とてもうれしく思います。
tabの問題も、これから安心して対処できそうです。
ありがとうございました。

教えていただいたURLのソースを見たのですが、
h3の後にh2はないように、思えました。

h1で、そのページのタイトルを決め、（h1は1回しか使ってはダメだと聞きました。）
その後に

h2で小見出し（？）をだし、それに対する本文(p)があり、
さらに小見出しh3→本文(p)があるとして、

そこからさらに
h2→p→h3→p
と、繰り返してもよいのでしょうか？

全体で見ると、
<h1><h2><p><h3><p><h2><p><h3><p>
のようになり、<h3>が出現した後に、また<h2>が出現するようになります。
まるで順番を無視したような形になってしまうので不安です。

お時間のあるときに、教えていただければうれしく思います。
よろしくお願いします。