気の向くままに辿るIT/ICT/IoT

HTML/XHTMLタグ・要素・属性・属性値

FONTタグ・要素／各種フォント設定

FONTタグ [W3C非推奨]

FONTタグ・要素

FONTタグとは

　いろいろなホームページを見ていると文字のサイズやいろいろな色でカラフルなページもたくさんあります。

　このような装飾はいくつかの手法で実現できますがその内の一つがfontタグです。

※fontタグ・要素はHTML4.01非推奨のタグ・要素ですからfont指定にはCSSプロパティfont-family/font-weight/font-color/font-size等を利用しましょう。

◆タグの属性

色指定	<font color="green">緑</font>	RGB指定("R:255 G:255 B:255") 16進数指定("#FFFFFF") 色名指定(green、blue等)が可
サイズ指定	<font size="5">サイズ５</font>	絶対値指定(1～7) 相対値指定(smaller・bigger) または("-1"、"+3"etc.)が可

進数・進法

　どの指定も単一または複数行に対して行うことができます。

　また、

色は緑でサイズが５

のように色指定とサイズ指定を同時に使うこともできます。

　因みに太字や斜字、下線は下記の通りです。

◆太字・斜字・下線

用途	タグ(要素)
太字指定	<b></b>
斜字指定	<i></i>
下線指定	<u></u>

太字＆斜字＆下線

のように使うこともできます。

※uタグ・要素はHTML4.01非推奨のタグ・要素です。下線指定にはできればCSSを利用しましょう。

　いろいろと試してみて下さい。

　ここで注意して頂きたいのが、このfont属性や太字などの指定は、あくまで部分的に使おう。ということです。

　後半の方で、スタイルシートというものをご説明しますが、先に簡単にお教えしちゃいますと、これも後ほどでてくるテーブルの色や背景画像やここでやった文字装飾をまとめて指定できる方法です。

　「まとめて設定する」というのは、これからあなたがホームページをつくったり変更したりする時にもとても便利です。

1ページだけ作ったとしてもいろいろな所でこのタグ等の部分指定を使っているとタグと文章が並んだhtmlファイル(HTML / HyperText Markup Language)の中から該当個所を探したり、ひとつひとつ変更したりすることを考えてみて下さい。

　どうですか？なんとなくぼんやり考えただけでも大変な騒ぎになりそうでしょ？

こんな時はそのファイルの<head></head>タグ内にスタイル設定をまとめて行うこともできますし、

　ましてこれからあなたがホームページを作る際、1ページで終わることは少ないでしょう。そうなるともう大変！

　他のページに飛ぶ為のタグも後ほど出てきますが、楽しく記述している内に結構たくさんのhtmlファイルができてきます。

　このできたファイルを「もう2度と編集しない！」というなら別ですが

　きっと

　「ん?、ここはこっちの色の方がいいなぁ、あっちは･･･」

　「テーブルの背景色やテーブルの背景画像は、どのページも同じ色とか背景画像にしよっと！」

　でも全部で同じ指定するのもなんか面倒だしスマートじゃないし･･･」

　といった場面に遭遇する事になるでしょう。いえ！必ず遭遇します。

そんな時、それぞれのファイルをひとつずつ開いてたくさん書いてあるタグの中からタグを探して･･･というのは、かなり手間がかかりますし、「この色じゃなーい！」といった単純ミスもあったり、するとだんだん「もういいや！」と思ってしまうことにもなりかねません

　後悔先に立たずです。後悔しない為にも先にとっても便利で簡単な手をうてたらいいと思いませんか？

　テキストエディタや専用アプリケーションで『検索』や『置換』を巧みに使ってみたりまたは、複数のテキストファイルからある語句を検索・置換するなどの技を使う等考えられなくもないですが、相当慣れないとちょっとしたミスが大変ショッキングな事態になってしまうこともあります・・・

　特に置換対象が、htmlで使用されるタグだった場合は、本来のタグまで気づかずに置換してしまう可能性すらあります。すぐに気付けばいいですが、後に表示が乱れて原因を探す事もですが、そのような事態になると修復にも相当な労力を要します。

簡単で見やすく、編集しやすく、便利なものが欲しい。

　これらを解決してくれるのがスタイルシートです。

　ファイル内に記述、設定することもできますし、作ったhtmlファイルで「このスタイルシートファイルを使う！」と記述、指定したページはその別に作ったスタイルシートファイルに指定した設定が有効になるんです。

　ん?と思われましたか？

　つまり、スタイルシートをhtmlファイルと別ファイルにしていれば、変更したいと思った時は

　「スタイルシートファイルをひとつだけ開いて、その個所だけ変更して保存」

　すれば、全部に反映されるんです。もちろん、併用してもいいんですよ。

　こんなすごい機能があったなんてと思いきや、ちなみにfontタグの詳細仕様は下記の通りです。

font要素・タグ

非推奨
要素	意味		用途	使用例
font	font	フォント	フォント設定(font/basefont)	<font></font>

　HTML4.01ではfontタグはW3C非推奨となっており、フォント指定が必要な場合はCSSの利用が推奨されます。

font要素・タグの属性

　fontタグでW3C非推奨となっているタグは下記の通りです(但し、fontタグ自体が非推奨である点に注意)。

非推奨
属性	意味	用途
size	size	サイズ指定属性値：1～7 font：<font size="1"></font>他 basefont：<font size="+1"></font>
color	color	文字色指定：<font color=""></font>
face	face	複数ある場合にはカンマ区切りで列挙されたフォント名(字体、サイズ、カラー等々)をまとめて指定

　fontタグに設定可能な属性は下記の通りです(但し、fontタグ自体が非推奨である点に注意)。

属性	意味	用途
id	identify	タグ識別子・参照設定(セレクタ)
class	class	参照設定(セレクタ)
lang	language	国・地域言語を設定
dir	direction	右書き・左書きの方向指定
title	title	ブラウザ上でタグをポイントすると表示されるテキストを設定
style	style	CSSインライン設定用

id

　idはファイル内での一意の識別子(唯一特定できる値で区別できるもの)としての役割を持ちます。

(アンカーリンクの識別子)
アンカー(aタグ)以外のタグの識別子
scriptやobjectタグの識別子
外部CSS設定用idセレクタ

等々です。

class

　classは、idと異なり、同じファイル内で(aタグを含む)複数のタグに同じ名称を設定することが可能です。

　また、idの値が一意という条件が満たされれば、同じタグ内に別途classを設定することも可能です。

　主な用途は

外部CSS設定用classセレクタ

です。

id と class

　id と class は、両方設定することも可能ですし、異なる属性値を設定することもできます(idはそのページで一意でなければならないので複数設定する場合はそれぞれの属性値が他にないものにする必要あり)。

　id と class をCSSのセレクタとして見た場合、id は class の設定より優先されます。