これだけは覚えよう
ファイル構成
ファイル構成は特に自分のルールで整理すればよいのですが、一般的には、下記のような構成でホームページ全体のHTMLファイルや画像ファイルなどをまとめていきます。
| index.html |
トップページのHTMLファイル |
| imgフォルダ |
画像を入れておくフォルダ |
| cssフォルダ |
CSSファイルを入れておくフォルダ |
| jsフォルダ |
ジャバスクリプトファイルを入れておくフォルダ |
| basicフォルダ |
このページ（基礎知識編）のHTMLファイルが入っているフォルダ |
| flowフォルダ |
制作の流れが入っているフォルダ |
・
・
・ |
・
・
・ |
ページのサイズ
一般的に幅８００ピクセル×高さ６００ピクセル以内に収まるようにトップページを制作すると、ノートパソコンや、小さいモニターでもすべてが表示されるので、推奨されています。
推奨するページ幅 （高さはページ内容によって上下するので無視します）
| 760px |
一般的なページ幅でよく使用されるサイズ。
レイアウトもしやすい上、印刷した際にA4に収まるサイズ。 |
| 780px |
760pxと同様。
ただし、ページの内容が豊富な場合に適度なサイズ。 |
| 820～840px |
ネットショップやバナーなどを四方に散りばめるような情報サイトなど、ごみごみして、活気を出したい場合は、少し大きめにページ幅をとるのが基本。 |
| 900px～1024px |
迫力のあるトップページ、グローバルななサイトイメージを与えるサイズ。
インパクトは出せるが、小さなモニターで見ると右側がはみ出てしまう。
印刷すると切れてしまうなどのデメリットがあり、そのための対応が必要となる。 |
760px～840pxのページ幅に収めれば特に問題はないですが、印刷の必要があるのであれば760pxか780pxに設定すると問題はないと思います。
画像の保存形式
どんな画像でもJPEGで問題ない・・・・
そう思っている方もいるかもしれませんが、基本的な事だけ覚えましょう。
| 写真 |
写真はJPEG形式で保存します。
保存の際に「画質」という欄があれば、80に設定するとよいでしょう。 |
| 文字画像 |
GIF形式 |
| イラスト画像 |
GIF形式 |
| グラデーション画像 |
GIF形式で保存するとグラデーションが荒くなる場合があります。
きれいに出したいのであれば、JPEG形式で保存するとよいでしょう。 |
alt属性
写真や画像には「alt属性」をつけましょう・・・などの解説を見たことがあると思います。
このalt属性というものは、画像が正常に表示されない場合や、画像を読み込まないブラウザ（音声ブラフザ・テキストブラウザ）で、内容がわかるように画像に名前をつけるために存在します。
また、ヤフーやグーグルなどの検索エンジンのクローラー（ホームページを読み込むロボットのようなもの）も同様に画像についているalt属性を読み込みます。このため、SEO対策にもある程度有利になるといわれています。
注意：写真やタイトルなどの画像だけではなく、スペーサーなどのあらゆる画像（imgタグを使用しているもの）に対しては空のalt属性をつけましょう。
例： <img src="../img/spacer.gif" width="30px" height="1px" alt="" />
target属性 _blank ・・別ウィンドウで開く
クリックすると新しいウィンドウが開いてリンク先を表示させる。
使い方によってはメリットもデメリットもありますので、注意してください。
| targetを指定しない |
ホームページは通常同一ウィンドウで開きます。
特に理由がない場合、target属性は使用しないほうがよいでしょう。 |
| target="_blank" |
別ウィンドウでリンク先を開きます。
エンドユーザーからみると、ウィンドウを開くまでの時間や、パソコンの画面にいくつもウィンドウが開いているとストレスになる場合があります。
指定するべきタイミングとしては、下記のようなケースでうまく利用しましょう。
●クリックすると別のホームページに飛ぶ場合
●写真を拡大して見る場合エンドユーザーが間違ってホームページを閉じてしまった場合、また戻ってくるとは限りません。
「自分が使う側だったら？」を念頭におき、居心地のいいホームページ作成を心がけましょう。 |
|
