home
information

for contents

how-to HTML files

default layout

browsers

pictures

table

frame
upload
tags

form
bbs

HP Guide for Beginners(タイトルロゴ)

  (※ PC・タブレットでブラウザーの横幅が大体960px以上の時;
    テキスト中のリンク(下線(一本線)付きのテキストは全てリンクします)が有効になり、
    画面左下に"タグ解説ページ"が"別窓で並行表示"されます)



["default layout"]

"デフォルト・レイアウトのススメ"---何のことかさっぱりわからないでしょうが、つまり、"はじめてのHPをUPする時、'あのページ、コンテンツはいいんだけど、レイアウトがどうもねー'と言われないための(最小限の)レイアウト術"ということです。

まず、基本は、"見やすいページ"を作ることです。---それができてから、(その上で)インパクトを加えていって下さい。(海外の某HPで、"ネオンブルーの背景に真っ赤な字(!)"なんていうのがありましたが、間違ってもそんなページは作らないようにしましょう)



〔背景〕

黒い背景に白い文字---センスのいい人が書くと、これほどキマる配色もありません。でも、そうでない人だと---下手をすると、(特に日本語の場合)不気味な感じになったり、MS-DOSの初期画面("コマンドプロンプト"をフルスクリーンにしたような画面)みたいになってしまったりするので、モノトーン好みでも自信のない人は、うすい色(&"あまり自己主張しない柄")から始めた方が無難です。
(どういう色や柄にするかは、HPのコンテンツにもよります。---例えば、私は愛犬のページをUPしているわけですが、黒い毛なのに背景がモノトーンでは絶対に映えないので、"シック(?)なパステル調"にしています。---でも、"Coolest Moment"では、"趣味を優先"させてしまいました)

背景をカスタマイズするには、"<BODY BGCOLOR>"で色を指定するか、"<BODY BACKGROUND>"でイメージを"タイルのように貼り付ける"かですが、"<BODY BGCOLOR>"で"クールなレイアウト"のページを作るのは、"真にセンスのある"人でないと、はっきり言って難しいです(---私も苦労してます)。---ですから、はじめは"<BODY BACKGROUND>"でデザインする方がいいでしょう。
"<BODY BACKGROUND>"で使うイメージは、自分で描いてもいいし、フリー素材も出回っていますが(ダウンロードさせてくれるHPもありますし、グラフィックソフトや素材集のCD-ROMにも入っています)、自作は難しいし、気に入ったフリー素材もなかなか見つからない、ということもあります。---そんな時にオススメなのが、"グラフィックソフトでフリー素材をアレンジする方法"です(私も"Sashaのページ"でそうしてます)。
---自作のイメージやフリー素材を縮小した場合、しばしば(ブラウザ)画面に継ぎ目が出てしまったりしますが、それだけで"ボツにしようか・・・"と悩む必要はないと思います(私自身、そういうイメージをたくさん使ってますし)。---大事なのは、ページを引き立たせるために、いかに背景を"使いこなす"かだと思います。


〔"リンクボタン"〕
 (背景が"うすい色 & 目立たない柄"と仮定して)

("クリック前のリンク文字色"・リンクボタンに用いているイメージ)
 寒色系の背景→ブルー系(グリーン系のバックの場合は一般的にはグリーン系)
 暖色系の背景→ブラウン系
が無難です(---一口にブルー系、ブラウン系といっても、いろいろな色調がありますが、実際にブラウズしてみて、背景と合っているか確認して下さい)。また、白にきわめて近い背景の場合は、好みの色でいいでしょう。

("クリック後のリンク文字色")
背景に溶け込むような色(具体的には、背景よりは濃く、"クリック前のリンク文字色"よりかなり"色あせた"ような色)にするとオシャレです。
(背景に近すぎる色にしてしまうと、見えにくくなってしまいますが・・・)

(Note: IE3ではローカルテスト(自分の作成したHPをUPする前にブラウザで確認すること)時に(ほとんどの場合)リンクボタンをクリックしても色が変わらないので、"<BODY LINK>"の部分だけ"<BODY VLINK>"に変更したHTMLファイルを別に作ってテストしてみて下さい)


〔"イメージの位置"〕

タイトルロゴは"デフォルト"、その他のイラストや写真は、文章と文章の区切りの部分に"挟み込む"ようにして中央に表示しておくと無難でしょう。


〔タイトルロゴ〕

"<H*>~</H*>"("見出しタグ")を使うか、イメージを使うかのどちらかになるでしょうが、当然、イメージを使う方がきれいです。



〔"スピード"〕

一般的に?見に来てくれている人が許容できるデータ量は、(回線スピードによっても違いますが、遅い場合だと)一ページ当たり50K、上限は100Kくらいまで(ファイルサイズをぎりぎりまで落としたとして、普通の大きさの写真でせいぜい5、6枚ぐらいまででしょうか)だそうです。
(2003年5月現在、高速回線が普及してはいますが、ISDNやアナログ56kなどで接続している人もまだまだ多いですし、ADSLでもスピードの出ない人、一時的に高速回線で繋げれなくなることもあります。また、高速回線で接続していても、短時間で表示されるページの方がやはり好まれています)
---そこで、いろいろ工夫する必要があります。

ファイルサイズ自体を変える方法は"jpeg or gif?"を見ていただくことにして、ここでは、それ以外のテクニックを書きたいと思います。


(サイズの指定)
ファイルのサイズ(タテ何ピクセル、ヨコ何ピクセルという方)をあらかじめ書いておくと、ブラウザの方でイメージのスペースを空けて先にテキストをブラウズしてくれます。

(Note: カウンタをレンタルしている人も多いと思いますが、カウンタもイメージ(の一種)なので、必ずサイズを指定して下さい。
(特にカウンタの場合、レンタル先のサーバーダウンなどCGIが実行(CGIについての説明は省略しますが、ここでは、アクセス毎にカウンタが計測されること)されない時、カウンタ画像のサイズ指定がないと、最悪の場合、ページ自体が全くブラウズされなくなってしまうこともあります)


(サムネイル)
小画像の"見本"をクリックすると大画像が表示されるようにしておくと、見たい人以外は余計な(ブラウズ)時間を使わずにすみます。
(以前(回線がアナログ28.8k~56k主流の頃)、私は、"ギャラリー"でトータル400KBもの写真を張り込み、クレームをつけられてしまうという大失敗をしたことがあります。---でも、言ってくれる人って、貴重だと思います。---普通は、黙って見に来てくれなくなるだけなんですから)。


(プログレッシブjpeg & インタレースgif)
このオプションでイメージを保存しておくと、最初は荒く、だんだん鮮明になってくるようにブラウズされるので、見る人にとって必要ないイメージであれば途中で表示を中止することもできます。(NN, IE共バージョンによっては無効)


(画像の"先読み")
イメージファイルはいったんブラウズされると、ブラウザを閉じるまでは通常キャッシュされているので、HPの中の特定のページだけファイルサイズが大きい場合など、メニューページなどで先に表示(そのページの表示スピードがダウンしない程度に)させるようにしておくと、ブラウズのスピードがアップします。

(<IMG SRC="file name" WIDTH="1" HEIGHT="1">
としておくと、ほとんど目立ちません)


〔"バリエーションサンプル"〕
"how-to HTML files"中の"basic sample"にアレンジを加えたサンプルです。参考にして下さい。


→Next 


Copyright 1998-2018 (C) "Opal" All Rights Reserved.