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

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

＜第84号＞ 今週のおさらい
　　　　　　　　　　　　　　 　  毎週金曜日配信　What's New 2004/2/6
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　　  ■ HTML講座  第27回 --- 固定ピッチフォントの表現
　　　■ CSS講座　第５回 --- スタイルシートで扱う単位

◆ HTML講座 --- 固定ピッチフォントの表現

Webページ上でコンピュータプログラムなどを表現したい場合、固定ピッチフォント (等幅フォント) でレンダリングできれば、閲覧者には理解しやすいのではないかと考えます。

例えば、「What's New」 よりも、「What's New」のほうが文字全体が整然としているので、句読点や引用符がはっきりと表現され読みやすくなります。

普通に記述した場合、Webブラウザの銘柄によっては半角英文字が、全角英文字になってレンダリングされてしまうことが多々あります。

■ インラインで表現する固定ピッチフォント

通常の文字列の中で表現するインライン方式の固定ピッチフォントを表現するタグは以下のように定義されています。

<code> 〜 </code>

プログラムコードを意味し、この範囲に配置される文字列を固定ピッチフォントで表現します。短文で表現する場合に用いられます。

<samp> 〜 </samp>

サンプルコードという意味で、この範囲に配置される文字列を固定ピッチフォントで表現します。短文で表現する場合に用いられます。

<kbd> 〜 </kbd>

ユーザからの入力を意味し、この範囲に配置される文字列を固定ピッチフォントで表現します。主にフォームなどで利用されます。

<tt> 〜 </tt>

テレタイプを意味し、この範囲に配置される文字列を固定ピッチフォントで表現します。このタグは物理タグと呼ばれ、ユーザ環境に依存します。

ここに掲げた４つのタグは、デフォルト値として固定ピッチフォントでレンダリングできるように定義されていますが、閲覧者側の設定に依存します。多くの視覚系ブラウザでは、文字種の設定を自由に行えるようになっている関係で、必ずしも固定ピッチフォントでレンダリングするというわけではありません。

■ ボックスとして表現する固定ピッチフォント

長文で数行に渡る文字列全体を固定ピッチフォントで表現したい場合には、ブロックレベル要素の preタグを使います。

ブロックレベル要素は、画面の左から右までの矩形を持った「ボックス」としてレンダリングします。多くの Webブラウザでは前後に改行を持っています。

preタグは、記述された文字列の空白や改行を維持して表現します。そのため、長文のプログラムコードの出力に適したタグです。

以下の枠線に囲まれた範囲が、preタグを使って表現した文字列です。

<?php
 session_start();
  if(isset($_session["count"])) {
    $_session["count"]++;
  } else {
    $_session["count"] = 1;
  }
?>

コンピュータのプログラムコードを表現する場合、 <、>、& などの 実体参照符号 を使うことがあります。そのまま記述することができませんので十分気をつけてください。

また、１行の文字数が多い場合にも自動改行しないので、不用意な横スクロールが発生する場合もありますので、その点についても配慮してください。

■ スタイルシートで表現する固定ピッチフォント

スタイルシート (Cascading Style Sheet) を使うと、タグの種類に関係なく固定ピッチフォントで表現することが可能です。ある要素全体をまるまる固定ピッチフォントで表現できます。

固定ピッチフォントを表現するフォント種は、Macintoshならば Osaka等幅、Windows環境ならば MS ゴシックなどで利用されますが、スタイルシートでそれらのフォント種を指定するのは賢明ではありません。

閲覧者は様々なプラットフォームでインターネットをブラウジングしています。そのため、環境によって指定したフォント種がインストールされていなければ、当たり前のことですが正しくレンダリングすることができません。そこで、汎用的に固定ピッチフォントを指定する値を使います。

  p { font-family: monospace }

monospace は固定ピッチフォントを表わし、閲覧者側にインストールされている等幅フォントを指定することになります。ただし、閲覧者が自身の Webブラウザのモノスペースを他のフォント種に変更されている場合には、そのフォント種でレンダリングされます。

■ まとめ

固定ピッチフォントで表現しなければならないときには有効です。当サイトでは全部ではありませんが、なるべく英文字は固定ピッチフォントで表現するように心がけています。

フォントの扱いは大変難しいものです。なかなか思うような表現を提供できないのが実情です。それぞれの環境が一意ではないため、仕方のないところです。

結果的にフォントの指定はあまり意味がありませんが、monospaceと同様に、sans-serif、serif などを利用すると、多少望みどおりの形になるかもしれません。

PageTop

◆ CSS講座 --- スタイルシートで扱う単位

スタイルシートで大きさ、横幅や高さなど (長さとして) を指定する場合の単位は、かなり多く定義されています。HTMLでは、基本データ形式で定義されている「長さ」はピクセルとパーセントしかありませんが、スタイルシートは実に多様です。

以下は、その単位と意味、簡単なサンプルを提示しました。

ここではサンプルとして、文字の大きさで表現していますが、他のプロパティの「長さ」にも適用できるサイズとなっています。

■ 絶対値と相対値

「絶対値」とは、閲覧者の環境でそのサイズを変更することができません。「相対値」は、閲覧者側で自由にサイズ変更することが可能です。小さな文字を絶対値で指定すると、目が弱っている高齢者には都合が悪くなります。できるだけ相対値でサイズ指定を行いようにしましょう。

PageTop / Home / 目次

初版更新日 2004/2/6

Copyright（C） 2002-2004 banban@scollabo.com