ウェブページには、基本的にテキストで情報を記述していきます。ですから、訪問者のほとんどの動作はウェブページのテキストを読むことになります。
ウェブサイトのテキスト文字はその大きさを自由に変えることができます。
ウェブサイトによっていろいろなテキスト文字の大きさがあると思います。文字の大きさによって、ウェブサイトの雰囲気の変わってくるので、デザインに合わせてテキスト文字の大きさを決めたいところですが、一番大事なことを忘れてはいけませんよ。
それは、ウェブサイトを利用する側の目線です。
いくらデザイン的に良くても、訪問者の方が見づらい文字の大きさでは良くありませんよね。普通の方では見やすくても、視力が良くない方や、ご年配の方ですと、「見づらい！」になってしまうことも考えなければいけません。
デザイン的な相性も大事ですが、やっぱり訪問者の方が快適に読むことができるテキスト文字の大きさにしたほうがいいですね。
|
|
 テキスト文字の大きさ |
|
|
|
ウェブページにテキスト文字を記述すると、
|
この文字の大きさになります。これが標準の大きさです。 |
テキスト文字は上の文字の大きさよりも大きくも小さくも変えることができます。
| ①テキスト文字の大きさの例です。 |
| ②テキスト文字の大きさの例です。 |
| ③テキスト文字の大きさの例です。 |
| ④テキスト文字の大きさの例です。 |
| ⑤テキスト文字の大きさの例です。（標準の大きさです） |
| ⑥テキスト文字の大きさの例です。 |
| ⑦テキスト文字の大きさの例です。 |
③から⑥までのテキスト文字の大きさが実用的な大きさといえるでしょう。②も場合によっては使うかな。⑦はかなり小さくて読みづらいです。
ウェブページで記述するには、⑤と⑥が基本の大きさとなるでしょう。
ここで、「おや？」と気付いている方もいらっしゃるかな・・・・。そうなんです、今皆さんが読んでいるこのテキスト文字の大きさは上の例には無い大きさですよね。大きさでいうと⑤と⑥の間の大きさです。
実はテキスト文字の大きさはさらに自由に変えることができるんです。ただ、それにはスタイルシートというものを使う必要があります。
レッドキャップは、最初ウェブサイトを作成しているとき、「⑤のテキスト文字の大きさでは少し大きすぎる、でも⑥では少し小さいな～」と感じていたんですね。でもスタイルシートというものを知らなかったので、⑥の大きさで記述していました。
でも、今ではスタイルシートを使って、このテキスト文字の大きさがいいだろうと落ち着いたわけです。
皆さんはどう感じますか？⑤がちょうど良い？、⑥が見やすいでしょうか？
もし、皆さんもレッドキャップのように上の例ではテキスト文字の大きさに納得がいかないのであれば、スタイルシートを使ってみましょう！レッドキャップはホームページビルダーを使っているので、ホームぺージビルダーでのスタイルシート指定の方法を下に解説しときますね。
|
|
テキスト文字の大きさは相対指定がオススメ！ |
|
|
|
文字の大きさを指定には、「px」「pt」などの絶対指定と、「％」「smaller」「larger」などの相対指定があります。
ウェブページの文字の大きさは、レッドキャップとしては、この大きさが一番見やすいと判断して決めましたが、人によってはもっと大きいほうがいいとか、差がでてくると思います。
ウェブページのテキスト文字大きさは、ブラウザで変更することができます。インターネットエクスプローラでは、メニューの「表示」の「文字のサイズ」で、「最大」「大」「中」「小」「最小」と、5つの文字の大きさに変更できます。
ただ、スタイルシートでテキスト文字の大きさを絶対指定にしていしている場合、ブラウザでの文字の大きさの変更ができなくなってしまうんですね。
基本的に誰でも見やすいテキスト文字の大きさを考慮することも大切ですが、個人差や好みも考えて、自由にテキスト文字の大きさを変更できるようにすることも必要だと思います。
レッドキャップは、相対指定の「パーセント」にしていますよ。
それでは、スタイルシートを使って文字の大きさを変えてみましょう。ここではホームページビルダーを使っての方法を、レッドキャップのやり方で解説しますね。
※レッドキャップの使っているのはV8なので、他のバージョンを使用している方は少し違うかもしれませんが、ご了承下さい。
・まず、ホームページのファイル（htmｌなど）が保存してあるフォルダを開いてください。そこにさらにスタイルシートのファイルを保存するためのフォルダをつくります。マウスを右クリック→新規作成→フォルダで、フォルダの名前は半角英数字ならなんでもいいです。ここでは「stl」とします。
・stlフォルダを開いたウインドウ上で、右クリック→新規作成→テキストドキュメントで、テキストファイルを作成します。テキストファイルの名前を付けます。ここでは「red」としときます。
・テキストファイルの拡張子を変更します。「red.txt」の「txt」の部分を「css」と変更してください。これでスタイルシートファイル「red.css」の完成です。
・ホームページビルダーを起動して、文字の大きさを変更したいページを開いてください。
・上方に、ファイル・編集・表示・挿入・書式、などのメニューがありますので、表示のメニューの「スタイルシートマネージャー」をクリックしてください。スタイルシートマネージャーのウインドウが開きます。
・「スタイルシートマネージャー」ウインドウの、追加・編集・削除・リンクなどのメニューの「リンク」をクリック。「外部スタイルシートの選択」ウインドウが開くので、挿入のタイプがリンクを選択されていることを確認して、「参照」をクリック。また新たなウインドウが開きます。
・開いたウインドウで、先ほど作成したスタイルシートファイル「red.css」をクリック選択して、「開く」をクリック。「外部スタイルシートの選択ウインドウ」で「red.css」が表示されていることを確認して、OKをクリック。
・「スタイルシートマネージャー」ウインドウのスタイルの一覧に「red.css」が追加されていますね。これでスタイルシートの準備ができました。次は、そのスタイルの一覧に表示されている「red.css」をクリックしてメニューの「編集」をクリックしましょう。
・「外部スタイルシート」っていうウインドウが開きますので、外部スタイルシートウインドウのメニューの「追加」をクリックします。
・「スタイルの編集」ウインドウが開くので、「クラスのスタイルを設定」を選択すると、その下の「クラス名」に「.Class」と表示されています。「.Class」を好きな名前にしましょう。半角英数字ならなんでもいいですよ。ここでは「.moji」としときます。
・その下に、フォント・カラーと背景・文字のレイアウト、などのメニューがあるので、まずは「フォント」をクリックして、サイズを「88」にして、その右横を「パーセント」してください。（サイズは数字を大きくすれば文字も大きくなりますよ。）
・次はメニューの「文字のレイアウト」をクリック、行間を「140」にして、右横を「パーセント」にしてください。OKをクリックします。（行間も数字を大きくすれば、行間の広がりも大きくなります。）
・「外部スタイルシート」ウインドウのスタイルの一覧に「.moji」が表示されていることを確認して、OKをクリック。「スタイルシートマネージャー」ウインドウを閉じてください。
これで外部スタイルシートの設定ができました。次は実際に文字の大きさを変えてみましょう。
・大きさを変えたいテキスト文字を選択して、マウス右クリックで表示されるメニューの「スタイルの設定」をクリックします。「スタイルの編集」ウインドウの「クラス」をさっき設定した「.moji」にして、OKをクリックします。
これで、テキスト文字の大きさが外部スタイルシートで指定するこどができました。うまく出来ましたでしょうか？指定した文字の大きさは、プレビューでちゃんと確認してください。ページ編集で表示される大きさとプレビューでは、違いがあることがあるので、プレビューで確認を忘れずにね。 |
|
|
