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

Web作成支援

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

<第84号> 今週のおさらい
                  毎週金曜日配信 What's New 2004/2/6
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
    ■ HTML講座  第27回 --- 固定ピッチフォントの表現
   ■ CSS講座 第5回 --- スタイルシートで扱う単位
HTML講座 --- 固定ピッチフォントの表現
Webページ上でコンピュータプログラムなどを表現したい場合、固定ピッチフォント (等幅フォント) でレンダリングできれば、閲覧者には理解しやすいのではないかと考えます。
例えば、「What's New」 よりも、「What's New」のほうが文字全体が整然としているので、句読点や引用符がはっきりと表現され読みやすくなります。
普通に記述した場合、Webブラウザの銘柄によっては半角英文字が、全角英文字になってレンダリングされてしまうことが多々あります。
インラインで表現する固定ピッチフォント
通常の文字列の中で表現するインライン方式の固定ピッチフォントを表現するタグは以下のように定義されています。
<code> 〜 </code>
プログラムコードを意味し、この範囲に配置される文字列を固定ピッチフォントで表現します。短文で表現する場合に用いられます。
<samp> 〜 </samp>
サンプルコードという意味で、この範囲に配置される文字列を固定ピッチフォントで表現します。短文で表現する場合に用いられます。
<kbd> 〜 </kbd>
ユーザからの入力を意味し、この範囲に配置される文字列を固定ピッチフォントで表現します。主にフォームなどで利用されます。
<tt> 〜 </tt>
テレタイプを意味し、この範囲に配置される文字列を固定ピッチフォントで表現します。このタグは物理タグと呼ばれ、ユーザ環境に依存します。
ここに掲げた4つのタグは、デフォルト値として固定ピッチフォントでレンダリングできるように定義されていますが、閲覧者側の設定に依存します。多くの視覚系ブラウザでは、文字種の設定を自由に行えるようになっている関係で、必ずしも固定ピッチフォントでレンダリングするというわけではありません。
ボックスとして表現する固定ピッチフォント
長文で数行に渡る文字列全体を固定ピッチフォントで表現したい場合には、ブロックレベル要素の preタグを使います。
ブロックレベル要素は、画面の左から右までの矩形を持った「ボックス」としてレンダリングします。多くの Webブラウザでは前後に改行を持っています。
preタグは、記述された文字列の空白や改行を維持して表現します。そのため、長文のプログラムコードの出力に適したタグです。
以下の枠線に囲まれた範囲が、preタグを使って表現した文字列です。
<?php
 session_start();
  if(isset($_session["count"])) {
    $_session["count"]++;
  } else {
    $_session["count"] = 1;
  }
?>
コンピュータのプログラムコードを表現する場合、 <、>、& などの 実体参照符号 を使うことがあります。そのまま記述することができませんので十分気をつけてください。
また、1行の文字数が多い場合にも自動改行しないので、不用意な横スクロールが発生する場合もありますので、その点についても配慮してください。
スタイルシートで表現する固定ピッチフォント
スタイルシート (Cascading Style Sheet) を使うと、タグの種類に関係なく固定ピッチフォントで表現することが可能です。ある要素全体をまるまる固定ピッチフォントで表現できます。
固定ピッチフォントを表現するフォント種は、Macintoshならば Osaka等幅、Windows環境ならば MS ゴシックなどで利用されますが、スタイルシートでそれらのフォント種を指定するのは賢明ではありません。
閲覧者は様々なプラットフォームでインターネットをブラウジングしています。そのため、環境によって指定したフォント種がインストールされていなければ、当たり前のことですが正しくレンダリングすることができません。そこで、汎用的に固定ピッチフォントを指定する値を使います。
  p { font-family: monospace }
monospace は固定ピッチフォントを表わし、閲覧者側にインストールされている等幅フォントを指定することになります。ただし、閲覧者が自身の Webブラウザのモノスペースを他のフォント種に変更されている場合には、そのフォント種でレンダリングされます。
まとめ
固定ピッチフォントで表現しなければならないときには有効です。当サイトでは全部ではありませんが、なるべく英文字は固定ピッチフォントで表現するように心がけています。
フォントの扱いは大変難しいものです。なかなか思うような表現を提供できないのが実情です。それぞれの環境が一意ではないため、仕方のないところです。
結果的にフォントの指定はあまり意味がありませんが、monospaceと同様に、sans-serif、serif などを利用すると、多少望みどおりの形になるかもしれません。
CSS講座 --- スタイルシートで扱う単位
スタイルシートで大きさ、横幅や高さなど (長さとして) を指定する場合の単位は、かなり多く定義されています。HTMLでは、基本データ形式で定義されている「長さ」はピクセルとパーセントしかありませんが、スタイルシートは実に多様です。
以下は、その単位と意味、簡単なサンプルを提示しました。
単位意味サンプル
px ピクセル (モニタ^画面のドットをあらわす:相対値?) 12px
pt ポイント (1ポイントは約0.35mm:絶対値) 12pt
pc パイカ (1文字が 2.52mm の大きさ:絶対値) 2pc
in インチ (1文字が 25.2mm の大きさ:絶対値) 0.5in
mm ミリ (絶対値) 5mm
cm センチ (1文字が 10mmのおおきさ:絶対値) 1cm
% パーセント (それぞれの環境に応じた比率:相対値) 120%
em アルファベット M の高さのサイズ (相対値) 1em
em アルファベット x の高さのサイズ (相対値) 2ex
medium ミディアム (標準的な大きさ:相対値) ミディアム
samller 標準よりもやや小さいサイズ (相対値) やや小さい
samll 標準よりもひとまわり小さいサイズ (相対値) 小さい
x-samll smallよりもやや小さいサイズ (相対値) 小さい
xx-samll 標準から最も小さいサイズ (相対値) 最も小さい
larger 標準からやや大きいサイズ (相対値) やや大きい
large 標準からひとまわり大きいサイズ (相対値) 大きい
x-large largeからひとまわり大きいサイズ (相対値) 大きい
xx-large 標準から最も大きいサイズ (相対値) 最も大きい
ここではサンプルとして、文字の大きさで表現していますが、他のプロパティの「長さ」にも適用できるサイズとなっています。
絶対値と相対値
「絶対値」とは、閲覧者の環境でそのサイズを変更することができません。「相対値」は、閲覧者側で自由にサイズ変更することが可能です。小さな文字を絶対値で指定すると、目が弱っている高齢者には都合が悪くなります。できるだけ相対値でサイズ指定を行いようにしましょう。


This page is Valid HTML 4.01! 初版更新日 2004/2/6
Copyright(C) 2002-2004 banban@scollabo.com