■テキスト中心のデザイン

もともとパソコン通信といえばテキスト中心の世界だったのですが、現在のWebでは画像があって当たり前、無ければWebではないかのように言われています。ここでは、そういう時流に合った、テキスト中心ではあるけれども、レイアウトのしっかりとしたコンテンツの作成を目的としたテクニック、また、問題点などを考えてみたいと思います。


■テキストと画像<IMG>タグ関係の注意点

<IMG>タグによってテキストの回り込みをした簡単なレイアウト見本を用意していますので、これを見ながら、注意事項と対策を説明してゆきたいと思います。

●<IMG>タグによる画像とテキストの回り込み例
この参考例のブラウザウインドウの左右サイズをドラッグしていろいろと変えてみてください。流し込みの位置は変わるものの、写真と文章の位置関係としては見苦しいレイアウトにはならないと思います。このフレキシブル性がIMGタグの良いところであり、問題点でもあります。コツをつかんで上手く使えば便利です。

■イメージの横にテキストを流し込む。
まず確認の意味で、<IMG>タグのALIGNを復習しておきましょう。
画像の左右どちらかにテキストを回り込ませたいときは

<IMG SRC="photo.gif" ALIGN="left">テキスト
※ALIGN="left" イメージをテキストの左に配置する
※ALIGN="right" イメージをテキストの右に配置する

■イメージと流し込みテキストの間に間隔を指定する。
しかし、上のタグだけではイメージと文字がピッタリとくっついてしまうので、

<IMG SRC="photo.gif" HSPACE=20 ALIGN="left">テキスト
※HSPACE=(ピクセル数) イメージとテキストの横方向のスペース指示
※VSPACE=(ピクセル数) イメージとテキストの縦方向のスペース指示

■イメージサイズの指定をする。
特に文字とイメージが混在し、流し込みを行っている場合は必ずイメージのサイズ指定をすること。イメージのサイズが分かった時点でブラウザは文字の配置ができますので、指示することで効率があがります。また、サイズ指定をしておけば、イメージデータがなくても、レイアウトが崩れることもありません。

<IMG SRC="photo.gif" WIDTH="150" HEIGHT="100" ALIGN="left">

■画像データが無い場合も文字でフォローする。
さらにALT="画像の代替え文字"を付け加えて、そこに何の画像があるのかを指示すると良心的です。ましてや、テキスト中心のコンテンツを作ろうという場合は、こうした配慮が必要となってきます。

<IMG SRC="photo.gif" WIDTH="150" HEIGHT="100" ALIGN="left" ALT="PHOTO">

写真の名前※上のソースを指定した場合、左のように指定した画像が例え表示されなくても、このように壊れたアイコンでけではなく、指定サイズの空枠と、表示されるべきであった画像の名前が表示されます。

※いっぽう、何も指定しなければ、このように壊れたアイコンだけの表示になってしまい、レイアウト全体がバランスを崩してしまうのです。

■イメージ横の流し込みテキストの終了。
ところで、上のように、イメージの右横に流し込みテキストを指定しました。流し込みのテキスト文が終わり、次のレイアウトに進む際、Webではフォント・大きさがOSやブラウザでまちまちのため行数などが特定できないため、<BR>をいくつつければいいのかわかりません。それを解消するのがCLEAR属性です。(上のレイアウトをするために、たった今もCLEAR属性を使ったばかりです!)

<BR CLEAR="all"> 左右一杯までテキストが流し込まれる行まで改行する。
<BR CLEAR="left"> 左端からテキストが流し込まれる行まで改行する。
<BR CLEAR="right"> 右端からテキストが流し込まれる行まで改行する。


■<TABLE>タグによるテキスト整形

ブラウザのウインドウサイズに対して優柔不断(?)な<IMG>タグに対して、ある程度発信者側のレイアウトに近いものを表示するのが<TABLE>タグです。あなたのコンテンツがどのような読まれ方をするのかをよく考えて上手く使い分けるように心掛けましょう。

●テーブルタグについて


■自動改行の位置を指定する

テキストデータのレイアウトは、上記のように<TABLE>タグを使用しない場合、ブラウザのウインドウサイズに影響を受けます。これは、主にテキストの自動改行によるものですが、その改行位置が悪いとあまり体裁のよいものではありません。これを回避するため<NOBR>タグと<WBR>タグで指定しておくことをお奨めします。

■改行を許さない。
<NOBR>ぜったい改行しないでね</NOBR>
※<NOBR>はその名のとおり「改行しない」と言う指示で、たとえその行がブラウザからはみ出しても改行しません。

■もしも2行にするのなら、ココで。
<NOBR>あいうえお<WBR>かきくけこ</NOBR>
※できるだけ一行で表示できる場合は一行で。しかし2行になるのなら、ココ<WBR>でしてね。と言う意味です。

●<WBR>タグの使用例
◇<WBR>タグの使用例(ソース)
ブラウザのウインドウサイズをいろいろと変更してみてください。 見だしの文字が改行するときは、(、)で改行します。


※ここでは、ほんの一例を実験しているにすぎません。 この他、詳しくは本書をお読みください。

[戻る] [選ぶ] [進む]