隔週金曜日配信 What's New 2005年2月11日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第110号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者が正しい文法と作法を身につけて、魅力的な Webページ作
成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めます。
今週のコンテンツ
■ やさしいHTML (第４回) --- 見出しと段落
■ Tips --- 検索サーチロボットと見出し
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆やさしいHTML --- 見出しと段落
今回からコンテンツを表示するために具体的なタグを使って、HTML作成の実践
的な内容となります。過去に掲載された内容と重複する場合もありますが、よ
り確実に文法を身に付けていくためにご了承ください。
■見出しとは
ページを作成する上で一番先に表示させる「見出し」について解説します。見
出しとはそのページに掲載される情報の「要約」であり「キャッチコピー」で
もあります。
例えば私たちが新聞を読むときに、まず先に見出しから読む内容を無意識の
うちに探し出します。興味のある見出しから初めてその記事を読むわけです。
これを通常「ナナメ読み」と呼び、興味のない見出しや記事は読み飛ばします。
見出しの次にあるのが、その見出しで示した記事の詳細です。これが「段落」
です。段落については後ほど解説します。
見出しは英語でヘッドライン (Headline) と訳され、まさに記事の内容から
適切な要約文が適用されます。見出しには「大見出し」「中見出し」「小見出
し」などに分けられ、HTMLでは見出しを以下のように記述します。
第一見出し <h1>見出し</h1>
第二見出し <h2>見出し</h2>
第三見出し <h3>見出し</h3>
第四見出し <h4>見出し</h4>
第五見出し <h5>見出し</h5>
第六見出し <h6>見出し</h6>
さて、第一から第六までの使い方には作法があります。一般的な視覚系ブラウ
ザでは第一見出しが一番大きな文字で表示され、次いで第二、第三と文字のサ
イズが小さくなっていきます。
文字サイズの変化に見出しを使うのは間違いです。見出しはあくまで見出しな
のですからその点に注意してください。
第一見出しを「章」として考えたとき、第二見出しは「節」、第三は「項」
としましょう。すると以下のような見出しの順序になります。
第一章 HTMLの基本
第一章 第一節 見出しについて
(説明記事)
第一章 第二節 見出しの階層について
第二節 第一項 見出しの正しい順序
(説明記事)
第二節 第二項 間違えだらけの見出し
(説明記事)
こんな感じでコンテンツが作成されます。これを実際のタグで記述した場合
に、以下のようになります。
<body>
<h1>HTMLの基本</h1>
<h2>見出しについて</h2>
<p>説明記事 〜 </p>
<h2>見出しの海草について</h2>
<h3>見出しの正しい順序</h3>
<p>説明記事 〜 </p>
<h3>間違えだらけの見出し</h3>
<p>説明記事 〜 </p>
</body>
具体的に説明すれば、第二見出しは第一見出しの後に配置されるべきなのです。
第一見出しがなくて、いきなり第二や第三見出しを配置すること葉、文章的に
も文法的にもおかしいものです。
文字のサイズが第三のほうが一番よいという考え方で利用する人もいるよう
ですが、現在の Webページ作成では見出しの文字サイズは自由に変更すること
が可能となっています。 (これについては講座の中で適時説明します。)
視覚障害者の利用する音声ブラウザの中には「第一見出し」と発声することが
あります。それがいきなり第二や第三では閲覧者が混乱してしまいます。
見出しには「階層」があり、順序があるということを覚えてください。
見出しタグはブロックレベル要素として定義されており、このタグの範囲に他
のブロックレベルを配置することができません。また、一般的な視覚系ブラウ
ザでは見出しタグの前後に１行分の余白を表示させる場合があります。
■段落とは
一般に「段落」とは、あるまとまった内容を示したコンテンツをさします。
見出しでその段落の要約が示されたとおり、見出しに従った詳細のまとまり
が段落となります。
段落を定義するタグは <p> 〜 </p> を用います。段落は英語で Paragraph
ということから、段落タグが <p> になったとされています。
段落タグはブロックレベル要素として定義され、この中には他のブロックレベ
ルを配置することができません。また、終了タグは省略することが可能となっ
ていますが、当講座では終了タグの省略は推奨していません。次世代マークア
ップ言語である XHTMLでは、一切の省略タグは認められておりません。
段落は見出しと対になることが一般的です。ページの冒頭でいきなり段落では
特別な意図がない限り見出しと併用することをお勧めします。
一般的な視覚系ブラウザでは段落タグの前後に１行分の余白を伴って表示され
ますが、これは見出しタグと同様にあくまでブラウザの仕様であり、標準仕様
では特に表示方法については述べられておりません。
これを逆手にとって余白を表示させるために段落タグを使うのは、明らかな
文法違反となります。段落はそのために使うものではありません。
■段落と改行
段落の中で記述される文字コンテンツの途中で改行する必要に迫られることが
多々あります。文字などのインライン要素は強制改行タグ <br> を使って改行
することができます。
しかしながら閲覧者の利用するソフトウェア (ブラウザ) では、文字コンテン
ツは画面の行末で自動改行するので、あえて強制的に改行する必要はないし、
段落を追加するだけで十分に対応することができます。
例文
<h1>強制改行タグを使った場合</h1>
<p>強制改行タグを連発して、あたかもそれが段落のように見せるのは明
らかな文法違反となるものです。<br>
また、段落の途中で改行したい場合には、一旦段落を終了して新たな段
落を追加することで対応できます。</p>
<h1>段落の追加による改行場合</h1>
<p>強制改行タグを連発して、あたかもそれが段落のように見せるのは明
らかな文法違反となるものです。</p>
<p>また、段落の途中で改行したい場合には、一旦段落を終了して新たな
段落を追加することで対応できます。</p>
なお、強制改行タグ <br> はエンプティタグ (空タグ) なので終了タグは不
要です。
■見出しと段落の表示方法 (スタイルシート)
見出しの文字の大きさや余白、段落の余白などは作者が任意に設定することが
できます。それを可能にしたのがスタイルシート (Cascading Style Sheet)
です。
スタイルシートは物理的なレイアウトを、HTMLドキュメントから排除するため
の代替機能として開発されました。HTML3.2では font や centerタグなど物理
的にレイアウトを整えるタグが多数定義されましたが、HTML4.01では物理的な
タグは「非推奨：Deprecated」とされました。
非推奨タグを使う替りとしてスタイルシートの利用を強く推奨したのです。
スタイルシートを使うと、適用要素に対して背景色、余白、枠線、文字色、配
置など非常にきめ細かく設定することは可能です。
スタイルシートは非HTMLデータとなるので、作成には若干の心得が必要です
が慣れてしまえば簡単です。ブラウザに出力させるレイアウト表現には強力な
武器となるので是非マスターしておきたいところです。
○スタイルシートを使ったHTMLドキュメント
今回の見出しと段落のスタイルシートを私流に設定して解説します。
スタイルシートの作成方法 (設定方法) は大きく分けて３種類ありますが、今
回はヘッダ部に記述する「埋め込み型 (エンベッド方式) 」を採用します。
前述したとおり見出しタグも段落タグも一般的な視覚系ブラウザでは前後に１
行分の余白を表示します。また第一見出しは非常に大きな文字サイズで表示さ
れます。
今回は余計な余白をコントロールし、文字サイズを変更したりします。以下
に HTMLとスタイルシートのコーディングを示します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>見出しと段落</title>
<style type="text/css">
<!--
body {
margin-left: 5%;
margin-right: 5% }
h1 {
font-size: 1.2em;
margin: 0 }
p {
margin-bottom: 0;
text-indent: 1em }
-->
</style>
</head>
<body>
<h1>見出しと段落</h1>
<p>見出しと段落は「対」で利用されることが一般的です。見出しには段落で
述べる内容の要約 (つまり題名) となるような文章を考えましょう。</p>
<p>段落とは、１つのまとまった内容 (記事、コンテンツ) の集合体ですが、
１つの見出しに複数の段落を設定することが可能です。</p>
</body>
</html>
サンプルの実行結果
http://www.scollabo.com/banban/magazine/ms/sample_110-1.html
◆解説
■<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
文書型定義 (DTD:Document Type Definition) を示す宣言です。文書型定義に
ついては別途講座の中で詳しく説明する予定です。
簡単に説明すると、すべてのHTMLドキュメントではその冒頭で、利用される
タグの集合 (タグセット) のタイプを明示する必要があります。ただし文書型
定義が宣言されていなくてもほとんどのブラウザでは問題なく表示させること
ができます。 (一部に表示の差異があります。)
文書型定義の宣言が明示していない場合には、通常HTML4.01過渡期仕様とし
て扱われますが、厳密には HTML2.0 に区別されることになっています。
■<html lang="ja">
HTMLドキュメントの最上要素として htmlタグを用います。htmlタグは省略が
可能になっていますが、当講座ではすべてのタグを省略せずに記述することを
推奨しています。
htmlタグの属性 (タグの機能を高めたり、別機能を設定する場合に利用) で
は lang属性を使っていますが、これは htmlタグ直下のすべてのタグに日本語
コードを割り当てるために設定しています。
原則的には言語コードをHTMLドキュメントに明示するよう求められていますの
で、最上要素で設定することが効果的でしょう。
■<meta http-equiv="Content-Type" 中略 〜 charset=SHIFT_JIS">
Webサーバ、あるいはブラウザに対してこのドキュメントがテキスト形式で作
成されたHTML文書であることを明示しています。また文字化け防止として作成
された文書がシフトJISコードであることも明示しています。
どのようなプラットフォームでもソフトウェアでも、HTMLドキュメントとして
正しく解釈してもらうことは非常に重要なことです。その意味でもこの構文は
外せないところです。
■<meta http-equiv="Content-Style-Type" content="text/css">
HTMLドキュメント中にスタイルシートを利用することを、サーバやブラウザに
明示します。スタイルシートを使う場合に必須となります。
■<title>見出しと段落</title>
HTMLドキュメントのタイトルを設定しています。１つのHTMLドキュメントには
必ず１つのタイトルをヘッダ部に配置しなければなりません。
■<style type="text/css">
スタイルシートを設定する場合に styleタグを用います。このタグは必ずヘッ
ダ部に配置しなければなりません。bodyタグ内には配置できません。
type属性はスタイルシートのMIMEタイプを明示するもので、ここではテキス
ト形式の Cascading Style Sheet であることを示しています。
■ <!-- 〜 -->
スタイルシートは非HTMLデータとなります。そのためコメント内で配置するの
が安全といわれています。スタイルシートに対応していないブラウザがあり、
コメント内に配置しないと、スタイルシートのデータがそのまま出力 (表示)
されてしまう危険があります。
ヘッダで配置するスタイルシートは、必ずコメント内で記述するようにしま
しょう。
■body { margin-left: 5%; margin-right: 5% }
スタイルシートの実際の記述の仕方についての詳細は講座を進める中で解説す
る予定です。ここではスタイルシートのプロパティ (属性) とその値、及び機
能について説明します。
この設定はブラウザ画面の左右の余白を画面比率の５パーセントに設定してい
ます。任意に値を変えて試してみるとその機能が実感いただけます。
■h1 { font-size: 1.2em; margin: 0 }
第一見出しタグの文字サイズを標準 (閲覧者の設定した標準、あるいは初期値)
の２割増しの大きさにしています。上下左右の余白を無くしました。
■p { margin-bottom: 0; text-indent: 1em }
段落と具で配置されるコンテンツの最初の文字を１文字分インデント (字下げ)
させ、下側の余白を無くしました。
上側の余白を無くしたい場合は margin-top: 0; を追加してください。
以下省略
この構文をそのままコピーして利用する場合には、各行頭の余白部分を削除し
て使ってください。見易さのために全角の余白を設定しています。
全角の余白は文字として扱われるので注意が必要です。
※次回も見出しと段落について別の方法で解説します。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips --- 検索サーチロボットと見出し
HTMLを勉強して Webページを作成し、晴れて Webサーバにファイルを転送すれ
ば、その瞬間にホームページ開設となります。これで Webクリエイターの仲間
入りの第一歩となるわけです。
しかし、ホームページを開設しても誰も訪問してくれないというのは悲しいと
ころです。丹精込めてすばらしいコンテンツを掲載しても閲覧者が増えないの
はどんな問題があるのでしょうか？
その情報にアクセスしたくても所在がわからない、あるいはそのサイト自体
があることすら知らないというのが一般的です。
そこでお世話になるのが検索サイトのサーチエンジンです。これを検索サーチ
型ロボット (実体はソフトウェア) と呼びます。世界中の Webページを巡り必
要と思われるサイト内の情報をかき集めデータベースに登録します。
Yahoo や Google などの超有名な検索サイトで、閲覧者の欲する情報のキー
ワードを入力すれば、たちどころに幾つかのサイトを探し当てて表示します。
ホームページ作成者にとって、そうしたロボット型サーチエンジンを利用しな
い手はない分けですから、逆にロボットが自分のページの情報を拾いやすくす
る工夫が必要になります。これを検索エンジン最適化と呼びます。
その中で「見出し」は有効な手段です。ロボットのアルゴリズムを理解すると
見出しや強調文字などは割りと拾ってくれる傾向にあります。
コンテンツの見出しを有効に使えるような設計を心がけると効果的でしょう。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
てください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
しています。あわせて過去の記事のおさらいも掲載しています
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_110.html
次回は、2月25日に配信を予定しています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
と思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
てくれると思います。
発行者 ばんばん
協力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。
■バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
まぐまぐ http://backno.mag2.com/reader/Back?id=0000090196
■配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助
かります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
この数週間、死ぬほど働き詰めでした。今月は会社の税務申告もあり何かと多
忙でなかなか自分の時間を持つことができません。今週のマガジンの原稿も昨
日になって手をつけ会社で書き上げました。
今後、予告なく休刊することが多々あると思いますが、ご理解の程お願いし
ます。今週は配信できてほっとしています。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応
じておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
自由に使っていただいても差し支えありません。
Copyright(C) 2002-2004 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2005年7月28日
Copyright(C) 2002-2004 banban@scollabo.com