2007年03月21日

[HTML]ホームページ製作講座タグの詳細2

先々日に岩瀬敬吾のインストアライブに行ったっていう記事をあげて以来毎日一人は岩瀬敬吾っていう検索ワードでここにたどり着いてるんですが、ごめんなさい普通ににわかファンです。。

さて、自己満足HTML講座シリーズ今日で4回目になりました。もうそろそろ皆さん飽きてきたころですかね?僕はもう飽きてきたころです(ぁ

まぁ、真摯なる読者のみなさんのためにもまだまだがんばりたいと思います。


今日は前回の続きでいろんなタグの詳細についてお話したいと思います。予ねて言っていますようにHTMLとは本来文章の構造を意味づけする言語であり、各タグもブラウザによって独自に解釈され、視覚的にその囲まれた部分の構造が理解できるように表示されるわけです。しかし、それでは文章の表示を意図的に変えたいときには困ることがあります。

例えば、第一段階見出しと下位の見出しの大きさの差をなくしたいときや、文字の大きさや色を変えたいときなどです。

そのために、CSS(CascadingStyleSheets)と呼ばれるシステムが用意されています。これはそのスタイルという言葉からも連想されるようにまさに文章の体裁を整えるためのシステムなのです。

ところが、簡単な文章などのためにわざわざCSSを読み込んだり、いちいち定義するのが億劫な場合もあります。そんなときのためにHTMLには独自に文字の様式を指定する要素が実装されています。(ここらへんの成り立ちの経緯にはすこしややこしい事情があるようです。詳しく知りたいひとはググってみるといいかもしれません。)

これらの要素を使うことによって簡単に文字の様式を変えることができますが、何度も言っていますようにHTMLとは本来文章の構造を記述する言語であり、このようなフォントスタイル要素(文章の表示を無理やり変える要素)の仕様は前にもお話したHTMLの仕様書でも推奨されていません。また、HTMLはブラウザが解釈しているためCSSと違い、ブラウザ毎に少しずつ違いが出るようです。デザインをきちっと整えたい場合はCSSを使うことをオススメします。本講座でもHTMLが終わりましたらCSSの講座に移りたいと思います。僕が飽きていなかったら(ぁ



<B></B>

Bold要素と呼ばれるものです。つまり囲んだ文字列を強制的に太字で表示させるためのタグです。前々回の宿題にも出ていましたね。


<I></I>

Italic要素です。囲んだ文字をイタリック体にします。これも前々回の宿題になっていたものでした。注意すべきなのは、イタリックにすると確かに文章の中では目立ちますが、多くの場合読みにくくなるという弱点があります。


実はあんまり推奨されていないタグを宿題に出すのはどうかと悩んだものですが、すぐに表示が違うということでは分かりやすいので、タグの効果の分かりやすさを優先させていただきました。多用は厳禁ですが、ちょっとくらいなら・・・ダメ?あっそう。


<BIG></BIG>

見ての通りBIG要素です。囲んだ文字をワンサイズ大きいものにします。これと反対なのが下のSMALL要素です。


<SMALL></SMALL>

SMALL要素。つまり文字を一段階小さなものにします。


<FONT></FONT>

FONT要素です。フォントスタイル指定要素の全てを担っているといっても過言ではないでしょう。実は上のBIG要素もSMALL要素もこれひとつで実現可能なのです。また多くの場合、FONT要素は文字の色指定などに使われます。本来はCSSを使うべきなのですが、便利で簡単なので僕もよく使ってしまいます。

使い方は、
<FONT color="" size="大きさ"></FONT>
などと、色ならタグの中のFONTに続いて半角スペースをあけ、color=のように書きます。また、慣例的に指定した値を""(ダブルクオーテーション)で囲む習慣があるようです(ここらへんにもきちんとした決まりがあるようですが。)。このようなタグの中にかく要素以外の指定部分をプロパティと呼びます。サイズについても同じです。また一番最初の回の宿題でお分かりでしょうが、HTMLのタグについてはスペースに至るまで全て半角書かなければなりません


colorプロパティに指定できる値は色名を直接英語で指定するか、#を先頭につけた16進数のsRGB値で書きます。

sRGB値とは昔美術などで習った光の三原色(この三色の光で全ての色を表現できるんですね)であるR(Red)・G(Green)・B(Blue)の三色のそれぞれの強さ(つまりどれぐらい混ぜるか、ですね)を0~255(もちろん0が最小で255が最大です)までの数字で指定して、16進数に変換し、R・G・Bの順番で並べた2桁*3の16進数の数字です。

考えてみれば分かることですが、光は混ざり合えば合うほどに白になりますので、各色が最大に混ざり合った色(sRGB風に書けば#FFFFFF)はをあらわすことになります。以下に16進数表示と色名をいくつか書きますので参考にしてください。

Black #000000
Gray   #808080
Maroon  #800000
Purple  #800080
Green #008000
Olive #808000
Navy #000080
Teal #008080
Silever #C0C0C0
White #FFFFFF
Red #FF0000
Fuchsia #FF00FF
Lime #00FF00
Yellow #0000FF
Blue #0000FF
Aqua #00FFFF

このほかにも色名はたくさんありますし、sRGB値については256^3(256の3乗)もの色が指定できますのでいろいろな色を試してみるといいでしょう。またインターネット上にはいろんな色のRGB値を見本とともに提供しているサイトも見かけられますので利用してもいいかもしれませんね。


サイズ
sizeプロパティに指定できる値は1~7までの数字で、何も指定していないときの基本フォントサイズは3になります。(つまりBIGタグを一回使えばフォントサイズは4になるわけです。)


もう耳にタコができるほど言っていますが、HTMLのタグ解釈はブラウザソフトに頼っていますので、同じcolor="Red"で、size="4"でもブラウザによっては違いが発生することも珍しくありません。いやならCSSを使いましょう(笑)





さて、今回は無理やりに文字のスタイルを指定するタグを紹介してきましたが、これらのタグの使用はあまり推奨されていません。便利だからって使いすぎないようにしましょう。またこのようなフォントスタイルタグには他にもフォントを等幅フォント(文字の字間が全て同じ幅のフォント)にする<TT></TT>などがあります。


では今回はここまでです。次回はタグの中でも特別な機能を備えているものたちを紹介したいと思います。宿題は前回と同じように今回紹介しましたタグをできるだけ多くつかって文章を作ってください。また特にFONTタグのプロパティについていろいろなものを指定してみてください。(本来は推奨されていないタグを使えという宿題は心苦しいところではありますが。

なによりも慣れは肝心です☆
posted by ラリコ at 00:04 | Comment(0) | TrackBack(0) | 小技術
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。