HTMLを知ろう！その4
2009年3月3日
ちょっと間が空きましたが、第4弾です。
今回はボディの中、つまり、実際に表示に関係する部分を少しいじってみようと思います。
文字を装飾したりするわけですが、それには2つの方法があります。
タグで指定する方法と
CSSで設定する方法です。
現在の主流は「CSS」で設定する方法なのですが、
たとえば、無料のブログを使っていると、CSSを自分でいじれなかったりします。
また、とっかかりとしてはタグの方が簡単なので、
今回はタグでやる方法をご紹介します。
まずは、文章をちょっとだけ増やして見てましょう。
例題としては引き続きサンドイッチネタで行きます。
今日のランチ
レタスとトマトとハムのサンドイッチ
ポタージュスープ
野菜ジュース
今日はお天気が良かったので、公園に行って食べました～。
と、言う文章を追加するなら↓ソースはこんな感じになります。
ちょっと文章を足しただけなのに、ソースはだいぶごちゃごちゃしてきました。
何か内容を足したら、それが何なのか、ブラウザに教えてあげる必要があるので
何かしらのタグを指定してあげる必要があるからなんです。
さて、これをブラウザで見て下さい。
>> サンプルはこちら
白い背景で、左上から黒い大きめの文字で表示されていると思います。
字は出てきた。でもシンプルすぎる！！なんとかしたいなぁとゆー感じですよね。
どうしたいか、はその人の好みによりますが、
文章も少ないし、全部を中央寄せにして
「今日のランチ」だけ青い文字にしよう
と思ったとします。
そうしたら、↓ソースをこんな感じにしてみましょう。
こうすると、文字が中央寄せになって、今日のランチが青い文字で表示されていると思います。
>> サンプルはこちら
これが、文章そのものに直接関係ない「装飾」の部分です。
具体的に、ソースの説明をすると
divタグに指定した「 align=”center”」が中央寄せ、の指定です。
書き方は
<div の後ろに半角スペース（全角じゃだめ）を入れて align=”center” と続けて「>」で終了
タグに何かを足すときは、必ずこんな感じになります。
<div class=”abc”>とか<td width=”120″>みたいに。
（↑内容は無視して書き方の参考にしてください）
他に、left（左寄せ）、right（右寄せ）の設定ができます。
<div align=”left”>、<div align=”right”>という感じで。
つまり「align」が文字の位置を指定できるおまけの設定項目です。
だから、divだけじゃなく、pやtdタグなどにも使えます。
<td align=”right”>という風に。
続いて、色の指定。ちょっとややこしいですが
<font color=”blue”></font>
のところです。
fontタグは文字のことを指示するためのタグです。
文字font の色color を青blue にしなさい
と書いてあるわけです。
だから、pタグも同様に指定できます。
段落p は色color を赤red にしなさい
と指定したければ
<p color=”red”></p>
となります。
こうしてみてみると、タグは、タグの名前とおまけの設定が組み合わせられる
というのが分かってもらえたでしょうか？
タグのまま使うこともありますが、見た目をいじっていこうとすると
組み合わせて使うようになります。
タグは括った部分が何なのかを示し、
「段落」や「リスト」「テーブル」ですよ、とブラウザに教えています。
そして、おまけの設定で、これを、こーしてくれ
と指示しているのです。
各タグには組み合わせられるおまけが決まっています。
全部覚えようと思うと大変ですが、タグの種類によって組み合わせのルールがあるので
慣れてくれば、問題なく使えるようになります。
正式には要素とか属性とか名前がついてますので
慣れてきて、もっとちゃんと知りたいぞ、と思ったら
「HTML リファレンス」
で検索すると、より正確でより詳しい説明が見られます。
本当はそこから始めると良いんでしょうけど、このコーナーでは
実際に初めてやる人が、こうやるだろうな、という順番で進めてます！
<<HTMLを知ろう！その3へ ｜ HTMLを知ろう！その5へ>>
