気の向くままに辿るIT/ICT
webzoit.netウェブサイトホームページ
HTML/XHTMLタグ・要素・属性・属性値

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

ウェブ造ホーム前へ次へ
サイト内検索
カスタム検索
FONTタグ [W3C非推奨]

FONTタグ・要素

FONTタグとは

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

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

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

◆<font>タグの属性

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

進数・進法

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

 また、

<font color="green" size="5">色は緑でサイズが5</font>

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

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

◆太字・斜字・下線

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

<b><i><u>太字&斜字&下線</u></i></b>

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

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

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

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

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

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

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

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

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

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

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

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

 きっと

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

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

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

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

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

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

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

 特に置換対象が、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 の設定より優先されます。

lang

 langは、[ lang="en" ]、[ lang="ja" ]のように国や地域の言語を設定することができます。

dir

 dirは、direction(方向)の略で右から左に向かって書く右書き(right to left)か左から右に向かって書く左書き(left to right)の記述書式の方向指定で国際化における指定可能属性です。

 dirの属性値は、right to leftの略語、[ rtl ]か、left to rightの略語[ ltr ]です。

title

 titleは、ブラウザ上でポイントされた場合に、titleに設定された属性値が表示されます。

style

 styleは、CSSのインライン設定を行うことができる属性です。

各種HTMLとHTMLタグ/要素・属性・属性値

ウェブ造ホーム前へ次へ