HTMLノススメ

ブログが登場して自分のホームページを持つことが随分身近なものになりました(ブログもHPの一種ですから)。

それまでは自分のHPを作るためにはHTML(HyperText Markup Language)の知識が必要でした。いや、もちろんそんなもの知らなくてもHP作成用ソフトがあればHPを作ることはできました。でも、いろんな部分を「小直し」しようとすると、やっぱり多少はHTMLの知識があったほうが便利でした。

そして、それはそのままブログの作成についても言えると思います。
HTMLの知識が全くないままブログを開設してしまった皆さん、この際少しHTMLを齧ってみませんか? ちょっと知識があれば自分のブログをカスタマイズできるんです。

例えば、私のブログには時々 Amazon へのリンクバナーが登場します。これが縦長の統一スタイルなんですね。で、Amazon のサイトに行ってボタンをいくつか押しているうちにこのバナーのソースは簡単に作れます(HTMLの知識なんて要りません)。で、それをブログの記事作成ページに貼り付ければそれで終わりです。

でも、私にはちょっと気に入らないことがあって、そのやり方でやるとバナーの横は空白になってしまうんです。私としてはバナーの横にも文章があって、バナーを回り込む形にしたいのです。それから文字とバナーの間はもう少し空けたいのです。現に私のブログではバナーとの間を少し空けて文章が回り込む形になっています。それはHTMLの知識が少しくあったからできたことなのです。

私が皆さんにHTMLの勉強を気軽に勧めるにはいくつか理由があります。

  1. HTMLはプログラマがプログラムを書く時に使うような難しい言語ではない
  2. HTMLは憶えなければならないことが少ない
  3. 他人の書いたHTMLソースを盗むことができる

の3つです。以下で少し解説します。

1.HTMLはプログラマがプログラムを書く時に使うような難しい言語ではない

プログラム言語と言えばアルファベットこそ使ってはいるものの、我々一般人にとってはまるで馴染みのない外国語を学ぶようなもので、とってもとっつきが悪いものです。HTMLはそんなややこしいものではありません。

例えば「HTMLを絶対にマスターするぞ!」という風に文章の一部を太字にしたいとします。
これが Excel や Word だったら太字にしたい部分をドラッグで選択して「B」と書いたボタンを押すだけです。ブログの記事作成ページでも似たようなものでしょう。

じゃあ、HTMLではどう書くかと言えば、「HTMLを<B>絶対に</B>マスターするぞ!」と書くだけなのです( B は小文字の b でも構いません)。<B>が「ここからは太字ですよ」という印、</B>が「ここまでが太字ですよ」という印です。この印のことをタグと言って、ほとんど常にこういう風にセットで使います。

ね、簡単でしょ?

2.HTMLは憶えなければならないことが少ない

HTMLは「ここまでのことをちゃんと理解しておかないと次に進めない」ということがあまりありません。もちろんいろんな難しい仕掛けをしようとすると当然難しくなるのですが、基本的な構造は大変単純なので初っ端から理解できなくて躓いてしまうということがないのです。

上の例では太字にしたい時はタグの中に B を入れれば良かったように、他のことをしたいときには他の文字を入れれば良いだけのことなのです(もちろん B のように1文字で済むことは稀ですが・・・)。

じゃあ、文字の色を変えるときはどうとか、段落を変えたいときはどうどか全部憶える必要があるかと言えば、そんなことは全くありません。HTML辞典とかリファレンス・ブックとかいうものを1冊買っておけばそれで済むのです。分からない時はその本で調べれば良いのです。

もっとも自分で書いていれば多用するものは自然に憶えてしまいますし、正確に憶えていなくても、他人の書いたソースを見たときに「あ、これはリンクを張っているんだな」などとすぐに判るようになります。ボタン1つでタグを挿入できるソフトもたくさんあります。

あとは辞書を引けば済むことなんです。引いているうちに、あるいは調べて使っているうちに、1つまた1つと憶えてしまうことも多いでしょう。簡単なページならすぐに書けてしまうのです。

3.他人の書いたHTMLソースを盗むことができる

例えばあなたが Internet Explorer で見ているのであれば、ページ内の余白部分で右クリックしてみてください。「ソースの表示(V)」というのが出るでしょう?(私のような Firefox ユーザなら「ページのソースの表示(V)」と出るはずです)

それをクリックするとそのページのHTMLが表示されるんですよ(ただし、これには例外があって例えば Macromedia Flash を使った部分をクリックしてもソースは表示されません)。

もちろん1日勉強しただけで他人のページのソースを見てもほとんど理解できないでしょう。いや、今やどんなページにも「難しい仕掛け」の1つや2つは使われているものなので、かなり勉強した後であってもそのソースを完全に読み解くことは無理かもしれません。

でも、たった1日勉強しただけでもどこか部分的には理解できるはずです。少し勉強が進んでくると他人のソースを見ること自体が自然に勉強になってきます。

「あれ? どう書いたらこんなことできるんだろ?」と思うHPに出会ったらソースを見てください。最初はよく解らんでしょ。でも、そのうち「これかな?」と見当がつくようになります。見当がついたらリファレンス・ブックで確認してみてください。で、「あ、確かにこれだ」と思ったら自分のHPに使ってみれば良いのです。その行為は盗作でもなんでもありません。

HTMLにはこうやって自然と実践的に学習して行ける愉しみがあるのです。原始的な部分が理解できてくれば、例えば Java Script とかCSSとか、あるいは Flash をはじめとするプラグイン等のやや難しい仕掛けに手を伸ばしてみるのも良いでしょう。

以上のように、今までいろんなことを勉強しようとして挫折してしまった人でも「おっ、これは解りやすい、使いやすい」と思うのがHTMLではないでしょうか。少し憶えたらすぐに自分のHPやブログに活かしてみてください。答えがすぐに返ってくるだけにとても楽しいもんですよ。

CSSノススメ

ついでなんでCSS(Cascading Style Sheet)も勧めちゃいましょう。

ホームページにはいろいろな情報が載っていますが、大きく分けて2つの情報があります。

ひとつは内容。つまり、文章とか画像とか写真とかですね。クリックしたら別のページへ飛んで行くリンクなんかも内容のひとつだと言えるでしょう。

もうひとつはデザイン。文字の色は何色でどんな大きさのどんなフォントなのか、画像は上下左右どこの位置にあるのか、リンクをクリックした時にその部分は何色になるのかなどです。もうちょっと凝りたければ「このブロックだけ周りを青の点線で囲む」なんてこともできます。

HTMLにはその2つの情報、つまり「内容」と「デザイン」がゴッチャに書かれています。これは後から見ると結構わかりにくいものなのです。

中でも特に解りにくいのが<table>というタグです。これは言わば Excel で表を作るようなものです。普段から文章を書くときに字下げをしたり行頭を揃えるのが楽だからという理由で Word ではなく Excel を使う人いるでしょ? ま、あんな感じの作業なんですが、Excel の場合は最初からセルがありますから、入れたい位置のセルに文字を打ち込んだり画像を貼りつけたりすれば終わりなんですが、HTMLの場合はセルを作りながら内容を入れて行きます。

解りやすく書くと、<ここから表><ここから行><ここからセル>(セルの内容1)<ここまでセル><ここから隣のセル>(セルの内容2)<ここまでセル><ここまで行><ここから次の行><ここからセル>・・・<ここまで行><ここまで表>、みたいな書き方で表を完成して行くのです。

ね、面倒臭いでしょ? 面倒臭い上に内容とデザインが並列で出てくるので読んでいてもすんなり頭に入りません。表の中に表が入った「入れ子構造」の表を作ることも多いのですが、そうなるとなおさら後から見たら何のことだかさっぱり解りません。それでデザインだけ別のシートに書こうというのがCSSなんです。

そうすることによってHTMLは純粋に内容だけになります。CSSには「デザイン1はこんな形」、「デザイン2はここの位置」などという指定が書かれています。もちろんそれだけではHTMLとCSSが繋がりませんので、HTML内の各所に(この部分はデザイン1)(この部分はデザイン2)というような指定をつけておきます。

そうすることによってHTMLが簡素化されて読みやすくなるだけではなく、ページの読み込みも若干早くなりますし、何よりも重宝なのは内容はそのままでデザインだけ変えたい時にはCSSだけ書き換えれば一気に済んでしまうということなんです。

ブログにもCSSが設定されています。そして、上級のコースを選択していればそのCSSを自分で書き換えたり書き足したりすることができます。そうすると、既製品の中から選ぶしかなかったブログのデザインを自分のオリジナルに変えることができるのです。どうです、魅力的でしょ?

私のHPはCSSを使ってはいるものの、まだ充分活用しているという域には達していません。これから少しずつ勉強しながら作業して、もう少しすっきりした構造のHPに全面改装しようと思っています。

HTMLの次はCSSを勉強して、あなたも自分のHPを作り変えてみませんか?

Copyright©yama-a Jul.2006mark

目次へ 次号へ 前号へ