HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

ウイルスバスター 30日無料体験版 ノートン無料体験版 マカフィー・30日間無料版 [PR]

● 文字を装飾する

さて、文章が表示されるに当り、同じ色の同じ大きさの文字が延々と続くのでは味が有りません。 時には強調したい重要な文章があったり、大きく目立たせたい文字があったりなど文字を装飾して 読みやすくすることも重要です。

フォントスタイルの装飾はスタイルシートを使用するようにとなっていますが、 以下のものはまだ、HTML要素として認められているようです。
TT:テレタイプ文字(等幅フォント)で表示する。
I:イタリック体(斜体)で表示する。
B:ボールド体(太字)で表示する。
BIG:文字を大きい表示する。
SMALL:文字を小さく表示する。
S:取消し線を引く。
STRIKE:取消し線を引く。
U:アンダーラインを引く。
SUB要素とSUP要素を使って、上付/下付文字にする。

水の分子記号:H<SUB>2</SUB>O  1m<SUP>3</SUP>=1,000L=1tです。 また、1L=1,000cm<SUP>3</SUP>です。
↑と記述すれば↓のように表示されます。
水の分子記号:HO  1m=1,000L=1tです。また、1L=1,000cmです。

と、こんな感じに。
ただこれらは、文字の装飾を変えるだけで、意味は変わりません。
ボールド体とイタリック体はEM要素とSTRONG要素の強調と、 テレタイプ文字はCODE要素とSAMP要素とKBD要素に似た見え方かもしれませんが、 文字そのものに意味が与えられていない事に注意してください。
これらの違いは音声システムやスペルチェッカー、翻訳システム、サーチンエンジンの索引など、 目で見ない環境によって差が出てくると思われます。

◎これ以降の要素や記述方法は推奨されていません

フォントに関わるHTML要素です。CSSにおける『font-〜』にあたります。
<FONT size="-1">と記述すればこうなります。
<FONT size="5">と記述すればこうなります。
サイズは1〜7の段階で表現でき、相対的に−4〜+4で設定することができます。
size=1 size=2 size=3 size=4 size=5 size=6 size=7
もちろん</FONT>でタグは閉じてください。
色も同様にFONT要素を使用します。
<FONT color="#0000ff">このように変わります
<FONT face="MS P明朝">このように変わります


画像の貼り付けに関しても、幅、高さをスタイルで設定しなくても、
<IMG src="../img/bannr.gif" alt="ロゴ" border="0" width="88" height="32" >
ロゴ
でOKです。widthを50%にすれば、
ロゴ
と表示できます。

文字色、リンクの装飾も同じですね。
<BODY text="#000000" link="#0000ff" vlink="#0000ff" alink=="#0000ff">
text・・・通常の文字色
link・・・リンクの設定してある文字色
vlink・・・ブラウザが訪問済みと認識しているリンクの文字色 
alink・・・リンクの設定してある文字をクリックした時の色
と設定すれば、スタイルシートを使用することなくBODY要素の属性として設定でき、そのページの設定を替えることが出来ます。

上の記載通り、<B><I>はまだ『非推奨』になっていないみたいですが、 これは使用頻度の具合からではないかと思います。実際、<U>は非推奨になっています。 よって、スタイルシートで記述する方法がある以上、スタイルシートを使う方が無難ではないかと思います。
HTMLで文書の構造を記述して、スタイルシートで装飾する。
これがホームページ作成の原則であり、様々な形で拡張されたHTMLは、現在この原則に立ち返るために整備されているようです。
参考:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html40j/index.html(HTML 4仕様書邦訳計画)

スタイルを与えて装飾する

しかし、文字を装飾するのに、常に意味があるわけではないと思います。ただ視覚的に文字を装飾したいとき、 また、要素によって変化してしまう内容を独自の形で装飾をしたいときは、 スタイルシート (CascadingStyleSheet(CSS))を利用します。
そのために特に決まった意味は持たず、サイト制作者が属性やスタイルシートを用いて、 自由に文書に構造を付加したり文章を装飾するための要素SPAN要素 / DIV要素です。
SPAN要素はインライン要素で、DIV要素はブロック要素です。
ですから、P要素やH1要素の内容として記述する場合SPAN要素を、 P要素やH1要素などのブロック要素を内容として記述する場合DIV要素を使用します。
HTMLは文字列の構造、意味を定めるための物で、装飾をするための物ではありません。 一部スタイルを設定できる要素もありますが、それら全てはいずれ廃止され、全てがスタイルによる設定になるとされています。 そのスタイルを設定するのに使用するのが、『style』属性です。
スタイルに関しては別記『装飾』等を参考にしてください。

赤い斜体文字にしています
<SPAN style="color:red ; font-style:italic">赤い斜体文字にしています</SPAN>

・タイトル属性

title』属性というのがあります。それぞれの要素に説明文を記すための属性です。 例えばこの段落にその属性を使って『タイトル属性に関する解説です』という情報を与えています。
これをA要素に使用すれば、リンク先の説明を、IMG要素に使用すれば画像の説明を閲覧者に示すことが出来ます。
このtitle属性の表現の仕方は使用するブラウザにもよりますが、 インターネットエクスプローラーでは、マウス等のポインティングデバイスが属性を設定した要素内に来たときに、 一呼吸おいて、マウスカーソルのすぐ下に掲示されます。
この『title』属性は、要素の補助説明として使用されるもので、 ほとんどの要素に使用できます。

ここをクリック
<A href="#title" title="リンクのタイトル">

・要素の識別

id』属性と『class』属性は、 それぞれの要素に対して識別子を与えるための属性です。
例えば、ある特定の文章に対して、 スタイルシートで装飾を施したり、スクリプトで動的変化を与える場合に この属性を使用して識別子を与えます。
id』属性は 固有の識別子とされ手おり、同じ識別子を持つ要素が他には存在してはいけないとされています。
一方で、『class』属性は一群を表わす識別子であり、 同じ識別子を持つ要素が複数存在していてもかまわないとされています。

<<前へ  |上へ|  次へ>>
1234567891011121314151617

パソコンのウイルス対策大丈夫ですか?どれかひとつは入れておきたい対策ソフト
マカフィー・ストア シマンテックストア ウイルスバスター公式トレンドマイクロ・オンラインショップ

TOP] [HOME

更新日時:2014/08/09