Chapter4:要素と属性

■タグを自由自在に使う

製作の基礎が解ってきたらタグにつけられる属性を覚えてみましょう。 これらを今まで覚えてきた物に適用する事によりバリエーションがうんと広がってくると思います。 こちらではその一部を紹介したいと思います。 ただ簡略化して書きますので解らなくなったら対応する解説を見直してくださいね。

■最初に覚えておく事

各属性は属性名と属性値が一組になって構成されています。
例えば「属性名="属性値"」で一組といったような感じです。

ここで注意してほしいのは属性値は引用符(クオーテーション・ダブルクオーテーション)で囲む癖をつけておいて欲しいとゆう事です。現在は省略可能とされているケースもありますが今後の為にも・ミスを防ぐためにもきちんと囲む癖をつけておいたほうがよいと思います。

また要素や各属性はそのつど半角スペースで区切るようにしましょう。

<要素 属性名="属性値" 属性名="属性値" 属性名="属性値">

面倒でしょうけど可能な限り上記の注意を踏まえつつ読み進んで下さいね。

■body要素

■ベースの文字色

<body text="値" link="値" vlink="値" alink="値">

「body」要素の中に属性を書く事によりベースになるテキストカラーやリンク関連の色を指定することが出来ます。途中で変更したい場合は個別に指定すれば変更できます(span・font要素等)。

属性名役割
text本文のテキストのベースカラーを指定します。
link未訪問のリンクのベースカラーを指定します。
vlink訪問済みリンクのベースカラーを指定します。
alinkリンクの文字をクリックしたときの色を指定します。

値は「色名(例:black)」か「16進数(例:#000000)」による指定が一般的です。未指定の場合はご使用のブラウザ設定に依存します。

■背景の色と画像

<body bgcolor="値" background="値">

テキストの色と同じように「body」要素の中に属性を追加する事により背景の色・背景の画像を指定することが出来ます。

属性名役割
bgcolor背景の色を指定します。
background背景の画像を指定します。

「bgcolor」の値は前述の指定と同じです。「background」に関しては背景の画像ファイル名を(必要であればパスネームを含めて)記述します。


■img要素

<img src="表示するファイル" width="横サイズ" height="縦サイズ" alt="代替テキスト" border="数値"></img>

■縦横のサイズ指定(width, height)

「width」と「height」は画像の横サイズと縦サイズを指定します。主にピクセルかパーセントが使われているようです。何も指定しない場合はデフォルト(そのまま)のサイズで表示されます。この画像サイズをきちんと書いておくと画面のレイアウトの認識が早いためページの表示も若干速くなるようです。

■代替テキスト(alt)

「alt」には代替テキスト(コメント等)を入れます。画像が表示されない場合に表示されるテキストですがブラウザによっては画像にポインティングデバイスを重ねるとポップアップでコメントが出ます。また画像を読み込む途中にコメントが表示される事により利用者がすばやく内容を理解できるメリットもあります。

■画像の境界(border)

「border」は文字通り画像の周囲の囲み線の太さです。表示はブラウザに依存します。「border」を指定しない場合でなおかつリンク等が設定されていない場合は通常不可視になるようです。しかし「border」を指定していない画像にリンク等を設定すると境界が囲まれます。この境界を消したい場合は「0」を指定します。逆にリンク等を設定しないで境界線を表示したい場合は値に「0」以上の数値を入れると数値に応じた太さの境界線で囲まれます。

属性名役割
width表示ファイルの横サイズを指定します。
height表示ファイルの縦サイズを指定します。
alt代替テキストを記入します。
border画像周りの境界線のサイズを指定します。
hspace画像の左右マージンを設定します。
vspace画像の上下マージンを設定します。

メモ:「width」「height」「alt」は重要な属性ですのでタグ打ちに慣れてきたら早めにきちんと指定する癖をつけるようにしましょう。


■align・valign属性

これは今までと違って要素ではなく属性です。この属性はいろいろな要素や他の属性に加えて幅広く付加する事が出来ますので覚えておくと非常に役に立つと思います。いろいろ組み合わせて試してみてくださいね。

■書式と属性値

<要素 属性名="属性値" align="属性値">

属性値としてよく用いられるものを下の表に書いておきます。他にもありますがこれだけ知っておけばそれほど不自由はしないと思います。

属性値役割
top表示位置を上に指定します(垂直方向)。
middle表示位置を中央に指定します(垂直方向)。
bottom表示位置を下に指定します(垂直方向)。
left表示位置を左にします(水平方向の回り込み)。
center表示位置を中央に指定します(水平方向)。
right表示位置を右にします(水平方向の回り込み)。

注意する事はこの水平位置・垂直位置の指定(アライメント)は多くのエレメント(要素)で使用できるのですがテキストレベルエレメント(インラインエレメント)では特殊な場合を除くと殆ど使用できないとゆう事です。こちらでは大まかにしか書きませんが組み合わされる要素(タグ)によってその意味合い(動作・表示)も変化しますので詳しく知りたい方は別途お調べになって下さい。

■実際の使用例

いくつか簡単な例を書いておきますのでご自分のhtmlに実際に写してみてどのような表示になるか確認してみてくださいね。

<p align="right">この文章は右寄せになります。</p>
<img src="画像ファイル" align="right"></img>
<table border="1" align="center">
<tr valign="top">
<td width="100" height="100" align="left">1</td>
<td width="100" height="100" align="center">2</td>
<td width="100" height="100" align="right">3</td>
</tr>
<tr valign="middle">
<td width="100" height="100" align="left">4</td>
<td width="100" height="100" align="center">5</td>
<td width="100" height="100" align="right">6</td>
</tr>
<tr valign="bottom">
<td width="100" height="100" align="left">7</td>
<td width="100" height="100" align="center">8</td>
<td width="100" height="100" align="right">9</td>
</tr>
</table>

■色指定に関して

色指定の方法はいくつかある事は説明しました。その中で16進数を使うものがある事も少し書きましたよね。これは"#RRGGBB"という書き方の事です。といきなり言っても解らない人も多いでしょう。

これはRGB(赤・緑・青)の事でこの値を16進数で記入します。簡単に言えば「0123456789abcdef」のうちのどれかが入るという事です。などと一応書いてはいますが現段階で意味がわからなくてもあまり差し支えありませんので大丈夫です。

ちなみに書き方は#RRGGBBとなります。16進数で赤赤・緑緑・青青ですから各々16x16で256階調となり256階調を3つの組み合わせで表現できるわけですから256x256x256で16777216色が表現できるという事になります。って言ってもここをご覧になっているほとんどの方達は訳わかんないでしょう。自慢ではありませんが書いている本人も理論的に知ってるってだけで全ての色を使った事などありゃしません。無理です。

「16進数ってなによ?」とか「カラーチャートが見たい」ってゆう人は別途参照してください。なおここで注意して欲しいのは"#"を忘れないように最初に書くと言う事です。


■お疲れ様でした

本当はあといくつかを書く予定だったのですけれど思ったよりも長くなったので一旦これで終わりたいと思います。今後は必要性(質問数やリクエスト等)に応じて順次追加していこうと思います。

もっともここまできちんと理解できるようになった方なら既存の専門サイトさんに行って勉強されるのではないかなとも思いますけれどね。とりあえず随時追加予定で「工事中!」とゆう事にしておきます。つうか他にもれず永遠に工事中ですねきっと。素敵にずぼらだもの。

UnderConstruction
SEO [PR] ギフト 音楽配信 コンサート情報 わけあり商品 無料レンタルサーバー