HTML初歩の初歩

〜その2〜
区切り、強調、色

区切り

HTMLでは手軽なため、横線が区切りとして用いられます。<hr>と打つだけで


こうなります。hrとは Horizontal Rule(水平の罫線)という意味を持っています。

この hrsize="5" などと「要素名(hr)」に「属性(size="5")」を加えて、見栄えを整える事が出来る、とされてきました。しかしそれは旧世代の考え方であって、現在でははっきりと否定されています。見栄えを HTML で記述する事が何故いけないかについては、付録その3をご覧下さい。

また <hr><p> の途中には打てません。こうした<p>等の事を、ブロック要素と言います。ブロック要素には以下のものがあります。
p , h1〜h6 ,hr , ul , ol , address , pre , blockquote
打てませんと言っても、打ってみればチャンと改行されて水平の線が引かれます。それはブラウザーが <hr> の前に </p> が省略されていると解釈しているためです。実は </p> は省略可能なのです。しかし水平線の後に続く文章は「突然始まって」 </p> で終わっている、文法的に間違ったものなのです。

このように、数字などで大きさや色などを指定してやるには値の前後に”  ”を付ける決まりになっています。(ダブルクオーテーションでもシングルクオーテーションでも構いません、お好きな方をどうぞ)

閲覧環境により異なりますが、多くの場合(すなわち使っているブラウザに依存します)、横線は影付きで表示されます。「影なし」にするには <hr noshade> ですし、色を変えたければ、<hr color="red"> ですが、「見栄え」に関することなので本来スタイルシートで行うべき指定ですので例示は避けます。更にこれらを組み合わせることも出来ます。色を付けると影なしになります。

これらは「やれば出来る」が「やるべきではない」見栄えに関する事ですので、私の信条としては例と言えども書きたくありません。

横線は画面一杯に引かれますが、次のようにすれば短い線も引けます。その際には自動的にセンタリングされます。
<hr width="75%">

これもスタイルシートで同様の指定が出来ますから、初歩の段階から多用する事はありません。

強調

さて次には文字を強調したい人もいるでしょう。これが出来れば、とりあえず他人に見せられるページになります。別に公開しなくても、保存しておいて、印刷したものを幾人かに見せても良いのです。

強調ですから、大きな文字を使いたいですね。<big>〜</big> までの間の文字が大きくなります。

普通の大きさの文字が、<big>で囲むと、
<big>こんな大きさになります。</big>

もっと差別化したければ、<strong> というタグで、その上に強調してやると、
<big><strong>こんなかんじです</strong></big>

一般には<b> というタグが使われていますが、なるべく使わない方が良いとされています。但し、イタリックにする <i> 共々 W3C によって「廃止」されてはいません。

しかしアンダーラインを引く <u> や、<font color=" "> は、将来廃止される方向にあるとして、使わない方が良い要素とされていますので注意が必要です。

またインターネット・エクスプローラーだけが表示出来る「文字列が左右にスクロールする」、<marquee> や、ネットスケープだけの「文字が点滅表示される」 <blink> なども、なるべく使わない方が良いでしょう。

色を付ける

以上の装飾でも足りなければ、<font color="***">というタグで、色を付けてやる事も出来ます。

これも「見栄え」に関する事ですから CSS の受け持ち分野です。白黒表示の携帯端末で見ている人や色覚障害のある人、あるいは白黒で印字した文章で読み返す際には、色で何らかの情報を伝える事は出来ません。明度の違いで多少は差が付きますが、だいいちけばけばし過ぎるページでは誰もが疲れてしまいます。

色は主な名前と RGB (red、green、blue を 2 桁の 16 進数で指定)で書きますが、最初は名前でも良いでしょう。名前の前後に" " を付けて、指定します。オシマイには </font> というタグを付けます。ここで "green" と指定してやれば、

こんなふうになります

何度も繰り返して申し訳ありませんが、このフォントのタグもしょせんは「見栄え」を指示するものです。使うのが嫌なので上記の例では実はスタイルシートで指定してあります。

確実に色名で指定できるものを、順に列挙しておきます。正式に認められているのは次の16色ですが、他にもかなりの数の色が指定可能です。

正式に色名で指定出来る16色
■black ■blue ■fuchsia ■aqua
■gray ■green ■lime ■maroon
■navy ■olive ■purple ■red
■silver ■teal white yellow
例えばこんな色まで、ほとんどのブラウザーで表示できます。他にも一杯あります。
■copper ■cornflowerblue ■cornflower ■coral
■cadetblue ■chartreuse ■chocolate ■coolcopper
■aquamarine ■dimgray ■darkseagreen ■darkslateblue

RGBでの指定では上述のように#を冒頭に付けて16進法で書きます。"red"は"#ff0000"と同じ色になります。16進法とは0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,fの順に書きます。RGBの最初のR=赤について、1番目は00で、2番目が01、16番目が0f、17番目は10、32番目が20となります。

16かける16で256通りが赤に関して指定出来る値です。G=緑、B=青についても同様ですから、256の3乗で1677万7216色が指定出来ます。しかしWindowsとMacなどのようにOSが異なる場合でも確実に表示できる組み合わせは、00,33,66,99,cc,ffの6通りの組み合わせです。ですから6かける6かける6で、216色が安全な色指定になっています。

またOS(WindowsとMacの違いなど)によって画面の明るさや色表示の違いがあるそうですから、あまり微妙な色の違いにこだわっても、閲覧者がそのままの色を見ていないかも知れない事をお忘れなく。

また最近使っている人が多い液晶ディスプレーは、ブラウン管式に比べて色の再現性がまだまだ劣る傾向にあるので、こちらの方が大きな問題かも知れません。


第1回  第3回  第4回  第5回  第6回  第7回  第8回  第9回  第10回  詳細目次  ページ冒頭



saiton.net/easy/html2.htm

©SAITO Toshiyuki