ホームページを作られる方をサポート致します
ホームページ作成＞HTMLでの作成②
見出し要素と文字の大きさ
見出し要素のレンダリングは閲覧者が使用するソフトウェアによって異なります。
HTMLの仕様書では表示方法については一切触れられておりません。
HTMLでは、「大見出し」、「中見出し」、「小見出し」というように６つの見出し要素が定義されています。
一般的な視覚系ブラウザでは h1 (第一見出し要素) が一番大きく描画されるように設計されています。
以下 h2 (第二見出し)、h3 (第三見出し)という順で文字の大きさを一回りずつ小さくさせています。
あなたの環境では、以下の h1～h6 までの要素はどのように見えるでしょうか。
第１見出し要素 h1
第２見出し要素 h2
第３見出し要素 h3
第４見出し要素 h4
第５見出し要素 h5
第６見出し要素 h6
このような文字の大きさの変化に着目して、それぞれの見出し要素を文字の大きさのコントロールとして利用するのは間違いです。
見出しはあくまで「見出し」であって決して段落などに利用するものではありません。
文字の大きさのコントロールは スタイルシートで行いましょう。
見出し要素の順位
HTMLの文法上、ページの最初に登場する見出しは h1要素です。
決して h2や h3要素であってはなりません。つまり、h2 や h3要素はコンテンツの最上位見出しに当たりません。
h2要素は、h1要素の小見出しになり、h3要素は、h2要素の小見出しになります。
それぞれの見出し要素の階層を無視する手法は明らかな文法違反です。
h1要素では文字の大きさが大きすぎるので、h3要素を使いたいという気持ちはわかりますが、文字の大きさのコントロールは スタイルシートを使うべきであり、文法を無視することは避けたいところです。
具体的な見出し要素の使い方は、以下の構文のとおりです。
<h1>第１章</h1>
<h2>1-1節</h2>
<p>コンテンツ</p>
<h2>1-2節</h2>
<p>コンテンツ</p>
<h3>1-2-1項</h3>
<p>コンテンツ</p>
<h1>第２章</h1>
<h2>2-1節</h2>
<p>コンテンツ</p>
<h3>2-1-1項</h3>
<p>コンテンツ</p>
<h3>2-1-2項</h3>
<p>コンテンツ</p>
段落の作成
段落とは、あるまとまった文章を指します。Webページを書き進めていく中で、段落は欠かせないものです。段落があるからこそ、読みやすく閲覧者にテーマを訴求しやすくなります。全体の体裁をかたどる意味でも段落をうまくコントロールするコツをつかみましょう。
段落要素の正しい使い方
通常、文章は幾つかの段落を持っている場合が考えられます。段落は「見出し」と共に利用され、文書構造上、非常に意味のある要素です。
初心者が陥りやすいのは、段落を分けるために強制改行要素 br 要素を連発して使うことが多々見受けられます。それは厳密には文法違反であり、賢い方法ではありません。段落を区切るには段落要素である p要素 を使って、その文章の内容を囲みます。
段落要素が使えない場合
段落要素と同じような文書構造の働きを持つものを、ブロックレベル要素 と呼ばれ分類されています。例えば、見出し要素 h1要素 や table要素 などが挙げられます。これらの要素は「見出し」や「表」といった１つの段落を示す構造を表しているため、さらに「段落」であることを記述する必要はありません。
間違い例
<p><table cellpadding="2" cellspacing="0">………</table></p>
また規格としても、 p要素の中には、他のブロックレベル要素を含めることができません。
段落要素が要る場合
段落と段落の間にイメージを貼り込む場合など、段落要素があってもなくても変わらないときがあります。しかし規格では、イメージなどを挿入するインラインレベル要素は、何らかのブロックレベル要素の中に含まれるものとされており、どこかの段落の一部でない限り、イメージやテキストはブロックレベル要素中に配置する必要があります。
ブロックレベル要素
１つの構造体を示す要素を。「ブロックレベル要素」と呼びます。これらの要素はそれぞれの目的に応じた「構造」を意味し、要素内容にしたがって配置されます。ブロックレベル要素には下記の要素があります。なお、ブロックレベル要素の一部では、一般的な視覚系ブラウザは前後に、改行＋余白を表示する場合があります。
しかし、これはブラウザが勝手に表示させるものであり、決して最初から仕様書に定義されているわけではありません。この前後の行は、マージン（余白）と捉えた方が当たっています。なぜならば、スタイルシートを使えば、簡単にこの余白を取り去ることが可能だからです。
テーブルの作成
HTMLを学ぶ上で欠かせないのがテーブルと呼ばれる要素です。テーブルは表組を作成するツールですが、その他にレイアウトを構築する際にも多々使われています。ここでは、テーブルの基本と応用について解説します。サンプルを取り揃えていますので、参考までに見ておいてください。
テーブルの基本
テーブルの仕組みについて説明します。以下のテーブルを参照してください。
| セル | セル | セル | セル |
| セル | セル | セル | セル |
| セル | セル | セル | セル |
↑のテーブルは、まさに基本です。セルが縦と横に集まって１つの表を形成しています。セルの中にコンテンツが入ります。テーブルにおけるセルはある意味で偉大で、ブロックレベル要素でもオブジェクトでもスクリプトでも入れられてしまうのです。
まず最初に、テーブルはセルの集合体であるということを理解してください。
テーブルの作成
簡単なテーブルから作ってみましょう。下記の HTML文を見てください。このテーブルでは枠線を表示するために、border属性を使っています。テーブルの初期値では枠線が表示されないために、この属性で設定する必要があります。
<table border="1">
<tr><th>科目</th><th>得点</th><th>平均点</th></tr>
<tr><td>国語</td><td>85点</td><td>88点</td></tr>
<tr><td>算数</td><td>62点</td><td>73点</td></tr>
<tr><td>理科</td><td>70点</td><td>75点</td></tr>
<tr><td>英語</td><td>95点</td><td>86点</td></tr>
<tr><td>合計</td><td>78点</td><td>81点</td></tr>
</table>
実行結果はこのようになります。何とも味気ない間の抜けた表になってしまいました。
| 科目 | 得点 | 平均点 |
|---|---|---|
| 国語 | 85点 | 88点 |
| 算数 | 62点 | 73点 |
| 理科 | 70点 | 75点 |
| 英語 | 95点 | 86点 |
| 合計 | 78点 | 81点 |
一般的に、th要素は文字が強調され、かつセンタリングされて表示します。
次にこの表にセル内の余白を設けます。記述方は、
<table border="1" cellpadding="5" cellspacing="0">
カスケーディングスタイルシート（Cascading Style Sheet）
刻々と進化する World Wide Web の世界で、技術革新の中でも最大の革命となったと考えられているのがスタイルシートの導入でした。スタイルシートを使うようになってから、Web制作にあたって、本格的なレイアウトの設計が可能になりました。
フォント、色、枠線、コンテンツの余白や配置などを制御し、しかも HTMLソースが人間にとってもコンピューターにとっても分かりやすいものになっています。
HTMLで使用するスタイルシートは CSS (Cascading Style Sheet) という規格で、HTMLタグに対してどのように表示するかを指定します。
CSSの構造
CSSは選択部（セレクタ）と宣言部で構成され、宣言部には属性（プロパティ）とそれに割り当てる値で構成されています。
例えば、
h1 { color: blue }
この設定の場合、h1 がセレクタとなり、{ } で囲まれた部分が宣言部になります。
さらに color が属性（プロパティ）で、blue という ColorName が値となります。
blue の替わりに16進法の #0000ff、あるいは #00f でも構いません。
プロパティと値はコロン "：" で区切ります。
また、宣言部の中の属性と値は、続けて複数設定することもできます。
body { background-color: #fff; color: #000 }
このように、セミコロン "；" で区切ることによって、複数のスタイルシーを設定することができます。
CSSの実装・貼り付け
Webページにスタイルシートを貼り付ける方法は３つあります。
インライン方式
エンベッド方式
外部リンク方式（リンキング方式）
インライン方式
インライン方式は、実際の HTMLの要素に直接 style属性を使って設定します。
<body style="background-image:url('images/kabe.gif')">
このスタイルシートの設定は、body要素に、 style属性を使って全体の背景に URI で指定した画像を張り込みます。
直接 HTMLタグに書き込みます。
テキストなどの修飾にめったに使わないときに使用します。
エンベッド方式
エンベッド方式はそのWebページ全体を修飾するときに利用します。
head要素の中に style要素を使って埋め込みます。
このことからエンベッド (埋め込み) 方式といわれています。
エンベッド方式では、ヘッダ部に記述します。
<html>
<head>
<style>
<！--
h1 {color: blue}
-->
</style>
</head>
<body>
<h1>Blue Header</h1>
</body>
</html>
このスタイルシートの設定は、h1要素をページ内で複数使うときに、すでに埋め込んであるためにインライン方式のようにいちいち設定する必要がありません。
つまり、一度設定すると、そのページにおける h1要素すべてに適用するものです。
リンキング方式 (外部リンク方式)
外部リンク方式は Webページすべてに統一したスタイルシートを利用するものです。
どのページでも同様のレイアウト構成を維持でき、訪問者にサイトのアイデンティティを訴求できます。
body { background-image: url(images/kabe.gif); color: #000 }
.text { font-size: 1.2em; color: #006; font-weight: bold }
このように、別途スタイルシートだけを記述した文書を作成します。
なお、スタイルシート文書の拡張子は、「.css」となります。
次に、このスタイルシートを読み込むのには、HTMLのヘッダに次のように埋め込みます。
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
このように、link要素を使って、外部のスタイルシートを Webページに読み込ませます。
これによって、読み込まれたスタイルシートが、その HTML文書に適用されます。
