Abstruct
一応、文書を書くために最低限必要な事は説明したつもりですが、今回は発展編。便利なタグや、デザインの綺麗なまとめ方を解説しましょう
マークアップという本質
さて、ここまで幾つかのタグを教えてきましたが、ちょっと思い出していただきたい物があります
タグの名前というのは、大抵はなんらかの英単語を縮めた物を名前として採用しています。例えば、段落:paragraphを表すpタグ、強調:emphasisを表すemタグ等です
でも、ちょっと考えてください？ 何故、このような名前の当て方をしているのでしょうか？ 強調の意味を表したいときには、文字を多きくするbigタグや文字を太くするboldタグ等を作って、それを利用した方が分かりやすいのではないでしょうか？
そうならなかったのには、それなりの理由があります。
そのために、ちょっとばかりHTML誕生の歴史を振り返らせていただきましょう
事の起こりは、1960年代です、第２次大戦が生み出したコンピュータは情報の管理能力を飛躍的に上げてくれました、それを上手く利用して、図書館業務を機械化出来ないかという可能性が検討されました
そのとき、利用するフォーマットには次のような条件が必要とされました
- 誰もが簡単に利用できるシステムであること
- どのような受信環境でも情報を得ることができること
- 誰もが簡単に情報を発信できること
研究の結果、こういう、条件を満たすシステムを考えると、テキストデータをマークアップする方法が一番だろうという結論に達して、現在の<->〜</->で文字を囲い込む方法と、SGMLが誕生しました
そしてSGMLの学術論文用フォーマットとして1991年にHTMLが誕生しました
そして、その同じ年、世界中にインターネットが解禁され、HTMLはその時代の流れに載って急速に普及し、現在に至ります
長々とお話をしましたが、これでHTMLのタグの名前の由来が分かって頂けたでしょうか？
HTMLというのは、その親のSGMLと同じく、どのような受信環境でも、情報を利用出来る用に設計されています
もし、白から黒の16色しか使えないコンピューターに、colorなんてタグを当てたらどうなるでしょう？ さらに、盲目の人のために、文章を読み上げるソフトを使った場合はどうなるでしょう？
こういうときに、今読んでいる部分が文章の中ではどういう意味を持つのか、プログラムが理解出来るようにすれば、場合によって柔軟に対処出来るのです
実際に、HTMLのこの性質は役に立っていて、現在の携帯電話でも、XHTML1.0から機能を削ったXHTML Basicという規格が利用されていて、それで作られたページは、あの狭い画面に、情報を上手く入れ直してくれています(ちなみに、今教えているXHTML1.0でページを作ると、携帯電話からも自分のページが読めます)
復習編
ここまでで解説したタグを思い返してみましょう
| a | リンクを張る |
| img | 画像を張る |
| p | 段落の指定 |
| span | 言葉の範囲指定(狭い範囲) |
| div | 文章の範囲指定(広い範囲) |
| h1〜h6 | 文書のタイトルを指定 |
| em | 文書の強調 |
| ul | 番号無しリスト |
| ol | 番号付きリスト |
| dl | 言葉の定義と説明 |
| table | 表作成 |
| br | デザイン用途のための特殊なタグ |
とまぁ、ここまでで12種類のタグを解説しましたが、私の経験論上、大体何するにも、この12種類とスタイルシートがあればなんとかなります
今回は、タグはココまでにしておきますので、まずはここまでを使いこなせるようになってから、順次使えるタグを増やしていきましょう
styleタグ
さて、先ほどまでがタグのお話なら、次はスタイルシートです
前々回の講座で教えたstyle要素、そろそろ慣れてきましたか？
style要素、確かに色々デザイン出来る良いアイテムです。でも、コレを使っている人、すぐに感じて頂けたでしょう。正直、書く量多くて面倒くさくありませんか？ というか面倒くさいですよね、よね？
というわけで今回は、手抜きに色々やるための、スタイルシートの便利な使い方を紹介
ここから先で解説することは、すべてスタイルシートの有効活用法ですが、先に正体だけ明かしておくと、デザインをまとめて指定する方法です
まずは、同じ名前のタグにすべて共通の設定を行わせる方法
<head>
<style type="text/css">
em {
font-weight:bold;
font-size:1.2em;
color:red;
}
</style>
</head>
<p>本当は借金を肩代わりしてくれる</p>
<p><em>美少女</em>なんて現れなかった</p>
<p>という<em>夢オチエンド♥</em></p>
| 適応前 | 適応後 |
|---|---|
 |  |
こうすると、style要素で一個ずつ指定しなくても、ページで使っているemタグ全てに同じ表示を設定することが出来ます
class属性
今度は、先ほどの方法の改良系です。クラスという考え方をお教えしましょう
まずはスタイルシートの方に、次の方に書き入れます
em.angry {
color:red;
}
次に文書の方は次のように書きます
ギター侍は出演し過ぎでネタが尽きて、今年いっぱいだ。<em class="angry">間違いない</em>
こうすると、angryというクラスを付けたemタグ部分を赤く表示することが出来ます
