Webイロハ
「よーし、俺様のサイトをオープンしちゃうぞ!」と作ってはみたものの、どこからみてもシロートまるだし。「あれ?こんなはずじゃ……」とお悩みのみなさんに、手軽にできる「脱・シロートテクニック」を大公開。
デザインも内容もテクニックも、めざせバージョンアップ!
shirokuma 白熊 吾郎   GORO SHIROKUMA
Web & 映像業界で生きる(モーション)グラフィックス屋。マスコミインハウスからフリーに。
■バックナンバーへ
サンプルサイト制作(10)
サンプルサイト制作の最終回です。今回はローカルでの最終チェック、FTP、そしてブラウザを使ってのオンラインチェックを行います。サイトが成功するもしないも、最後のチェックにかかっていますから、ポイントをおさえてしっかり確認しましょう。
ローカルで最終チェック
タグを手打ちするにしてもアプリケーションを使うにしても、まずはローカル上でブラウザを使って表示を確認します。このときに想定ブラウザ(ブラウザの種類と表示を保証する最低バージョン)を使用し、できれば想定画面解像度で確認するのがベストです。

・レイアウトが崩れず正しく表示されているか

全ページを表示させて確認します。特にテーブルと画像が複雑に配置されている場所は注意が必要です。
またウインドウを最大化したり、ウインドウサイズをリサイズしてレイアウトがどのように変化するかも確認します。

・画像が正しく表示されているか
バツ印がついた画像がないかくまなくチェックします。意外に見落としがちなのが、画像の変換やネーミングに関するミスです。gif画像に.jpg拡張子をつけてしまったり、日本語ファイル名をつけてしまうこともあります。また誤って作業ファイルを貼付けてしまうケースも見受けられます。
またサムネールを使って画像を掲載している(→012参照)ときは、サムネールと内容が一致しているかもチェックします。

・リンクが正しく機能するか
すべてのリンクが正しく機能する確認します。ただしブラウザによっては日本語ファイル名やWebで使えない文字種が含まれるファイル名でもジャンプしてしまうことがありますから、FTP後のオンラインチェックは必須です。
たいていのサイト制作アプリケーションにはデッドリンクをチェックする機能がありますから、それと併用するのもいいでしょう。

・文字サイズを拡大しても崩れないか
ユーザーによってはブラウザの表示フォントサイズを大きくしている場合があります。ブラウザで文字のサイズを大きく変更してみて、レイアウトがきちんと表示されるか確認します。

○IEでは……文字サイズを「大」にして表示(Macは200%)
○Netscapeでは……テキストの拡大縮小で200%

こうすると 文字のサイズが大きくなる→1行に入る文字数が減る→改行があふれる→行数が増える------わけですから、レイアウトは縦にのびます。テーブルを使ってレイアウトを組んでいる場合は、この縦へ伸びたときの変形具合を確認します。もしレイアウトが崩れてしまうようなら、他のパーツとの兼ね合いを考えながらテーブルの組み方を変えてみます。

なお200%以上の大きさにしているケースは稀ですので、あまり敏感になる必要はないでしょう(もっとも極端に拡大しても崩れないレイアウトは非常に安定度が高いと言えますが)。

ブラウザのフォントサイズ標準[100%(左)]と[200%]の表示例。
テキストが大きくなった分、行数が増えるが
各テーブルが独立しているのでレイアウトは崩れない。
【Point】 110:FTPの前にローカルで確認できることは確認しておく!
[ NEXT→]