ここの仕掛けがおれ的オリジナル 6.基本的なレイアウト

WebDesign
HeadLine
 文字を入力し表示するのがHTMLだが、見易くすることが肝要。
  1. 改行を付ける<BR>(Break)

    HTMLのテキストは、前述の通りソースで改行しても、ブラウズ時にはそれは無視され反映されない。

    改行を設定するのが<BR>タグである。これを入れると、改行したい所で改行が可能となる。

    あくまで改行したい所で入れる事を忘れずに。あまり入れ過ぎるのも、縦にスクロールしないと見辛くなるのでその辺を考えよう。よく入れるのは、段落の区切りになる場所である。ブラウザが勝手に改行する設定なので、例えば、読みやすくするべく一定文字で必ず改行する様にしたとする

    Windowの幅を狭めてみよう。これだと、設定されたサイズより大きくしている場合は良いが、狭めると却って読み辛くなる。こうした弊害もあるので、改行は段が変わる所と覚えておこう。

  2. 改行しないようにする<PRE>〜</PRE>(Preformat)

    改行でレイアウトを考えてこういうWebを創ったとする。

    このままで狙った通りに表示されているように窺える場合は、この今観ているWindowサイズか、で別windowに表示して、Windowサイズを縦横に縮めたり伸ばしたりしてみよう。すると、飾りのチェック模様が芳しくない表示になる筈である。
      改行はブラウザサイズで自動で行われるが、改行しないでソースのままで表示して欲しいという場合に用いるのが<PRE>〜</PRE>である。これを用いると、ソース上での改行・空白・タブ等が全て反映される。

    狙ったレイアウトになっていれば正解である。
    しかしながら、狙った通りに必ずなるかというと、そうでは無い。単に改行しないというだけで、ブラウザに依存する部分が解消されはしない。<PRE>を用いたサンプルで以下の実験をしてみよう。

    • 表示文字サイズ(WinでIEの場合)で、表示フォントのサイズを変えてみる。
      大きくすると、どんどん横に外れていきレイアウトが崩れる。
    • インターネットオプション(WinでIEの場合)で、表示フォントを変えてみる。
      これも狙った通りにならない場合が出てくる。

    以上のことから完全には行かないので、「ここは改行したくない」という部分に留めよう。そうしないと、横スクロールしないと駄目なWebになってしまい、非常に見辛くなる可能性もある。多様し過ぎると全体表示が出来なくなり、デザイン優先を観る人間に押しつけてしまうので注意しよう。ここでも解像度を意識する必要が出てくる訳である。
    CSSを用いると完璧にデザインが可能になり、この様な弊害は無い。試しに、このWebを表示した状態で上記操作をしてみよう、文字サイズは一部しか変わらない。しかしながら、文字を大きくしたりするのは、ブラウズする人間が目が不自由でそうしたいという場合もあるので、一概にきっちりデザインするのが良いかというと、アクセシビリティを低減してしまう可能性があるので注意しよう。このWebは特定の人間が観るという為に制作されているので、その人間に対するアクセシビリティを考えてデザインしています。誰が観るのか判らないのであれば、クライアントに優しくすべし。


back
Photoshop®,Illustrator®はAdobe®社の登録商標です。その他、市販ソフトウエアは販社に帰属しています。
このWebはIE5.5SP1/Netscape6で最適化されています。他ブラウザではStyleSheetの一部が反映されない場合があります。
(c)Shimura