p要素は記憶しないと意味がないよ～h1～h6要素、p要素～
段落、それは文章の基本単位
文章は基本的に段落で構成されています。段落というと抽象的で、掴みづらい代物な感じがしますが、ようは意味的にまとまっている文の塊というぐらいの解釈でよいと思います。実際のところHTMLにおける段落の考えは中学校で国語で勉強するような考えよりもゆるいですね。文が「。」で終わってなくても段落として見なすことができる、それぐらい大雑把な概念です。
そんなわけでHTMLにも当然ながら段落をあらわす要素があります。それがp要素です。使い方は以下のとおり。
<p> 段落を作るって結構大事なんだぜ。つーか結構ってレベルじゃないんだぜ。 なにしろHTML文書の80％は段落でできているといっても過言じゃないんだからな。 </p> <p> そんなわけでHTML文書の根幹をなしているのがp要素なんだぜ。もしp要素なしで書かれたHTML文書があったら、 その文書はks文書なんだぜ。みんなも気をつけろなんだぜ。 </p>
ほとんどの文章はp要素でマークアップしちゃってよいでしょう。これ以降教える要素はその例外といってもまぁ・・・過言でないと言えなくも・・・まぁ・・・ないかな。とにかくたいがいの文章はp要素でマークアップしてよいです。なんで同じことを二度も言うかは分かるよね、困ったときはとりあえずp要素、ってことです。・・・てきとーだなぁ。
p要素はブロックレベルの要素です。・・・がこいつの中にはインラインレベルの要素と素の文しか入れられません。そんなわけで段落の途中で別のブロックレベル要素(たとえばリストとか)を使いたくなったら、いったん段落を区切ってp要素の箱を閉じないといけません。その結果文の途中の「、」のところで段落が一区切りしてしまったりします。国語的な段落のイメージだとこの辺が変に思えますが、HTMLにおける段落は意味的にまとまってりゃ文が終わってなくてもOKという解釈なんだということで割り切った方がいいですね。
ところで、p要素には文章の段落という普通の使い方のほかにも、画像だけの段落というどちらかというとイレギュラーな使い方もあります。たとえばこんな感じ。
<p> <img src="text.png" alt="サンプル"> </p>
文法違反ではないです。むしろ文法違反を避けるためにこうやってるのです。img要素はインラインレベルだからブロックレベルの箱の中に入れないといけない、っていうやつです。前回やりましたね。復習、復習、と。
文法違反じゃない、って言うけど実際段落じゃないじゃないか、と言う人も結構いるでしょう。確かにこれは文章の段落ではないです。でも意味的に一つのまとまりをなしているのなら段落と考えてもいいじゃないか、ということでこういう書き方はよくやります。実際これを可とするか不可とするかはそれぞれの書き手の考え方次第ですね。無駄な意見の衝突は避けてもっと有意義な論議をしましょう、というのが私の考えです。
見出し、それは階層を生み出すこと
見出しって実生活で使うことが少ない言葉ですがHTMLでは大きな意味を持ちます。実生活で見出しといって思いつくものは新聞の見出しとかだと思います。たしかにHTMLの見出しもそんな感じのイメージですが、深追いするとなると＋αが必要となります。
見出し要素にはh1要素、h2要素、h3要素、h4要素、h5要素、h6要素があります。めんどくさいので今後はh1～h6要素と表記しときます。なんでこんなにあるんじゃい、と思うでしょう。こんなにあるのは当然理由があります。意味的な階層を作るためです。
階層というのはこんな感じのやつです。
まぁ考えるよりも実際にやってみた方がわかりやすいでしょう。ということで、次の文で実践してみます。
日本國憲法 日本國民は、正當に選擧された國會における代表者を通じて行動し、われらとわれらの子孫のために、 諸國民との協和による成果と、わが國全土にわたつて自由のもたらす惠澤を確保し、政府の行爲によつて 再び戰爭の慘禍が起ることのないやうにすることを決意し、ここに主權が國民に存することを宣言し、 この憲法を確定する。そもそも國政は、國民の嚴肅な信託によるものであつて、その權威は國民に由來し、 その權力は國民の代表者がこれを行使し、その福利は國民がこれを享受する。これは人類普遍の原理であり、 この憲法は、かかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。 日本國民は、恒久の平和を念願し、人間相互の關係を支配する崇高な理想を深く自覺するのであつて、 平和を愛する諸國民の公正と信義に信賴して、われらの安全と生存を保持しようと決意した。われらは、 平和を維持し、專制と隷從、壓迫と偏狭を地上から永遠に除去しようと努めてゐる國際社會において、 名譽ある地位を占めたいと思ふ。われらは、全世界の國民が、ひとしく恐怖と缺乏から免かれ、平和のうちに 生存する權利を有することを確認する。 われらは、いづれの國家も、自國のことのみに專念して他國を無視してはならないのであつて、 政治道德の法則は、普遍的なものであり、この法則に從ふことは、自國の主權を維持し、 他國と對等關係に立たうとする各國の責務であると信ずる。 日本國民は、國家の名譽にかけ、全力をあげてこの崇高な理想と目的を達成することを誓ふ。 第1章 天皇 第一條 天皇は、日本國の象徴であり日本國民統合の象徴であつて、この地位は、主權の存する日本國民の總意に基く。 第二條 皇位は、世襲のものであつて、國會の議決した皇室典範の定めるところにより、これを繼承する。 第三條 天皇の國事に關するすべての行爲には、内閣の助言と承認を必要とし、内閣が、その責任を負ふ。 第四條 1. 天皇は、この憲法の定める國事に關する行爲のみを行ひ、國政に關する權能を有しない。 2. 天皇は、法律の定めるところにより、その國事に關する行爲を委任することができる。 (中略) 第2章 戰爭の放棄 第九條 1. 日本國民は、正義と秩序を基調とする國際平和を誠實に希求し、國權の發動たる戰爭と、武力による威嚇又は武力の行使は、國際紛爭を解決する手段としては、永久にこれを放棄する。 2. 前項の目的を達するため、陸海空軍その他の戰力は、これを保持しない。國の交戰權は、これを認めない。 第3章 國民の權利及び義務 第十條 日本國民たる要件は、法律でこれを定める。 第十一條 國民は、すべての基本的人權の享有を妨げられない。この憲法が國民に保障する基本的人權は、侵すことのできない永久の權利として、現在及び將來の國民に與へられる。 (後略)
これをh1～h6要素の階層的な考え方でマークアップするとこんな感じになります。
<h1>日本國憲法</h1> <p> 日本國民は、正當に選擧された國會における代表者を通じて行動し、われらとわれらの子孫のために、 諸國民との協和による成果と、わが國全土にわたつて自由のもたらす惠澤を確保し、政府の行爲によつて 再び戰爭の慘禍が起ることのないやうにすることを決意し、ここに主權が國民に存することを宣言し、 この憲法を確定する。そもそも國政は、國民の嚴肅な信託によるものであつて、その權威は國民に由來し、 その權力は國民の代表者がこれを行使し、その福利は國民がこれを享受する。これは人類普遍の原理であり、 この憲法は、かかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。 </p> <p> 日本國民は、恒久の平和を念願し、人間相互の關係を支配する崇高な理想を深く自覺するのであつて、 平和を愛する諸國民の公正と信義に信賴して、われらの安全と生存を保持しようと決意した。われらは、 平和を維持し、專制と隷從、壓迫と偏狭を地上から永遠に除去しようと努めてゐる國際社會において、 名譽ある地位を占めたいと思ふ。われらは、全世界の國民が、ひとしく恐怖と缺乏から免かれ、平和のうちに 生存する權利を有することを確認する。 </p> <p> われらは、いづれの國家も、自國のことのみに專念して他國を無視してはならないのであつて、 政治道德の法則は、普遍的なものであり、この法則に從ふことは、自國の主權を維持し、 他國と對等關係に立たうとする各國の責務であると信ずる。 </p> <p> 日本國民は、國家の名譽にかけ、全力をあげてこの崇高な理想と目的を達成することを誓ふ。 </p> <h2>第1章 天皇</h2> <h3>第一條</h3> <p>天皇は、日本國の象徴であり日本國民統合の象徴であつて、この地位は、主權の存する日本國民の總意に基く。</p> <h3>第二條</h3> <p>皇位は、世襲のものであつて、國會の議決した皇室典範の定めるところにより、これを繼承する。</p> <h3>第三條</h3> <p>天皇の國事に關するすべての行爲には、内閣の助言と承認を必要とし、内閣が、その責任を負ふ。</p> <h3>第四條</h3> <ol> <li>天皇は、この憲法の定める國事に關する行爲のみを行ひ、國政に關する權能を有しない。</li> <li>天皇は、法律の定めるところにより、その國事に關する行爲を委任することができる。</li> </ol> <p>(中略)</p> <h2>第2章 戰爭の放棄</h2> <h3>第九條</h3> <ol> <li>日本國民は、正義と秩序を基調とする國際平和を誠實に希求し、國權の發動たる戰爭と、 武力による威嚇又は武力の行使は、國際紛爭を解決する手段としては、永久にこれを放棄する。</li> <li>前項の目的を達するため、陸海空軍その他の戰力は、これを保持しない。國の交戰權は、これを認めない。</li> </ol> <h2>第3章 國民の權利及び義務</h2> <h3>第十條</h3> <p>日本國民たる要件は、法律でこれを定める。</p> <h3>第十一條</h3> <p>國民は、すべての基本的人權の享有を妨げられない。この憲法が國民に保障する基本的人權は、 侵すことのできない永久の權利として、現在及び將來の國民に與へられる。</p> <p>(後略)</p>
このとき、意味的な階層のイメージは次のようになります。
h1～h6要素は、意味的な階層の一番上の見出しはh1要素、二番目の見出しにはh2要素、三番目の見出しにはh3要素・・・というように使います。 一番上の階層から六番目以降の見出しはどうするんだという声もあるでしょうが、その辺はcssで述べる(予定)のclass属性とかで対応するしかないと思います。
h1～h6要素はブロックレベル要素です。と言っても独立した文の塊になるんだ、という程度の解釈だけで十分でしょう。h1～h6要素の中にブロックレベルの要素を放り込むなんてことはまずしないでしょうから・・・。
階層のイメージはさっくり頭に入るようなものではないかもしれません。DOCTYPE宣言がstrict.dtdになっているようなwebページを探してソースを見て参考にしてみるとよいでしょう。あとはこの講座のページのソースなども参考になると思います。 h1～h6要素に限らず、HTMLの勉強のために人のソースを見るのは心がけとしてよいと思います。 ただ、世の中文法的にいいwebページばかりというわけじゃないですが・・・。
h1～h6要素とp要素、これだけで大半の文章は書けます。基本中の基本であるだけに特にh1～h6要素は奥が深かったりします。 英単語でもhaveとかtakeみたいな簡単な単語ほど様々なニュアンスを持っているものです。 ・・・とまぁ今回はこのあたりにしといて、次回はリストについてやります。まぁがんばれ。
次の講座:05.列挙！！～リスト三種～