初心者のためのホームページ作り 第61号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

<第61号> 今週のおさらい
                    毎週金曜日配信 What's New 2003/8/1
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   ■ HTML講座  第9回 --- フォント
   ■ XML講座 第1回 --- XMLとは
HTML講座 --- フォント
font という物理タグ(HTML4.01非推奨)では、7種類の文字の大きさを設定できます。また色や書体(フォント名)も同時に設定することができます。
しかし、テキストを表現する設定では、常に開始タグと終了タグを書かねばならず、HTMLコーディング全体が複雑になりかねません。何より物理タグであるため、ユーザ環境に影響するため、W3C では、このタグの使用を控えるよう強く求めています。
一方、スタイルシートにおけるフォントの指定は、非常に細かな設定が可能なため多くの制作者から支持され利用されています。
当サイトにおけるフォントの設定は、一部サンプルを除いて、すべてスタイルシートによってフォントを扱っています。
フォントの大きさ
スタイルシートによるフォントの大きさは次のように規定されています。
単位実際の大きさ 説明
mediummedium 標準的な大きさ
smallersmaller medium より1まわり小さいサイズ
smallsmall smaller より1まわり小さいサイズ
x-smallx-small small より1まわり小さいサイズ
xx-smallxx-small x-small より1まわり小さいサイズ
largerlarger medium より1まわり大きいサイズ
largelarge larger より1まわり大きいサイズ
x-largex-large largeより1まわり大きいサイズ
xx-largexx-large x-large より1まわり大きいサイズ
in0.5in 1インチを基準としたサイズ
em1em M の高さを基準としたサイズ
ex1ex x の高さを基準としたサイズ
mm5mm mm ミリメートル単位の大きさ
cm1cm cm センチメートル単位の大きさ
pt12pt pt ポイント単位の大きさ
px24px px ピクセル単位の大きさ
pc1pc pc パイカ単位の大きさ
%150% 初期値を基準とした比率の大きさ
これらのサイズの中には、「絶対値」となるサイズと、「相対値」のサイズに分類されています。「絶対値」とは、ユーザの環境に左右されない大きさで、作者指定のサイズそのままで描画します。
一方「相対値」とは、ユーザ環境の初期値を基準とした大きさを元にした相対的な大きさで描画します。そのため、ユーザは自由に文字の大きさを変更することが可能です。
ユーザの中には小さな文字が読みにくい場合もありますので、できるだけ「相対値」を基準とした文字の大きさを設定することが強く奨励されています。
当サイト内では、「絶対値」のサンプル以外ではすべて、相対値によって設定されていますので、ユーザは文字の大きさを自由に変更できます。
フォント名(書体)の設定
フォント名を設定する場合には、複数設定するようにしましょう。ユーザのブラウザがサポートされないフォント名は、当然無視されることを制作者は知るべきです。できることならばフォント名を設定しない方が安全でしょう。
なお、下記のスタイルシートによるフォント名の設定は非視覚系ブラウザを除いたほとんどのブラウザでサポートされています。
フォント名実際の表示 説明
san-serifsan-serif ゴシック体 ゴシック体で描画します
serifserif 明朝体 明朝体で描画します
cursivecursive 筆記体 筆記体フォントで描画します
monospacemonospace ゴシック等幅 等幅フォントで描画します
なお、当サイト内では、一部英文字や HTML構文に monospace を用いている場合以外は、フォント名の指定は行っておりません。そのため、ユーザが設定したフォントによって表示します。
文字間隔と行間
コンテンツを形成する1つに、文字による情報表現は極めて重要な要素です。その意味でも文字情報を見やすくさせることは制作者の義務でもあります。
文字の間隔や行間を設定するには、スタイルシートは不可欠です。

p { letter-spacing: 1px; line-height: 1.3em }

この設定は、文字と文字の間隔を1ピクセル、行間を1文字の3分の1として、文字を読みやすくするためのものです。特にお年よりは文字を読むのが苦手なため、「読みやすい」環境を設定しておくと喜ばれます。
当サイト内では、そのほとんどで上記の設定を行っています。
フォントの色
フォントに色を設定するなあいの注意点として、背景色を設定していた場合そのコントラストに注意しましょう。また、意味もなく色を設定するのは慎むべきです。色に頼らない設計を心がけましょう。

コントラスト不明な設定 ← コントラスト不明な設定

なお、色については、HTML講座で予定しています。お待ちください。

フォント設定のサンプル 詳しいHTML構文は今週のメールマガジン「第61号」をお読みください。)

XML講座 --- 序章:XMLとは
XML:Extensible Markup Language とは、拡張可能なマークアップ言語です。「拡張可能」とは、単に独自タグを作成するだけでなく、他のマークアップ言語すら取り込んで利用することもでき、Webに限らないあらゆるシーンで利用可能なマークアップ言語です。
なお、一部で「eXtensible」としていますが、正確には 「Extensible」ですので、お間違えのないように。
XMLは何をするのか?
一言で言うならば、「データの再利用」ということでしょうか。
例えば、特定のアプリケーションで作成した文書は、特定のソフトウェアでなければ利用することができません。
今日の爆発的なインターネットの普及に伴い、そこで取り交わされるデータの交換には特定のアプリが必要とされ、プラットフォームや OS、アプリケーションに依存しないデータ交換を要望する声が高まっています。
1998年、そうした声を反映する XMLの仕様書が正式勧告され、ソフトメーカーや企業でこぞって採用を決めています。
XMLに変換された文書は、アプリケーションやプラットフォームに依存することなくデータの交換が可能になりました。最近では企業間における電子取引(EDI)で XMLを標準化しようとする機運が高まっています。
MicrosoftOracleSun Microsystems社など、XML対応製品の発表が相次いでいます。時代はまさに XMLへ向かっています。
XML文書は、応用が広範囲に及び、Webページでの表現や、他のアプリケーションやデータベースにも対応して使うことが可能です。
XMLは難しいのか?
難しいです。決してやさしくありません。しかし、絶対不可能なのかといえば、そんなことはありません。その規則や法則にしたがって順序良く学ぶことによって、誰でも理解でき習得できるマークアップ言語です。決して一部専門家のためではありません。
当講座のメールマガジンでは、XMLを1歩ずつ、何度も同じことを繰り返しながら XMLを学んでいきます。ご期待ください。


Valid XHTML 1.1! Copyright(C) 2002-2003 初心者のためのホームページ作り臨時制作委員会 wfb-org@jcom.home.ne.jp