情報教育領域 T3_01に戻る T3_03に進む  

Web上で公開するための注意 その1その2その3


フォルダ名、ファイル名、画像ファイル名等は、全て、半角英数文字です。
各自のコンピュータで正しくリンクされていても、Webサーバ上では全角文字は認識されません。
大文字・小文字も厳格に区別します。特別の理由がない限り、ファイル名や画像ファイル名等は小文字で表記します。
「index.html」と「index.HTML」、「INDEX.HTML」は、それぞれ異なるデータだと見なされます。
画像は、JPEGかGIF形式
(JPEGは100kB以内が望ましい)
インターネット上では、JPEGかGIF形式の画像しか扱うことはできません。

JPEG画像 GIF画像
Joint Photographic Experts Groupの略で、拡張子は「jpg」画像を特殊な形式で圧縮しているのでファイルサイズが小さく、使用できる色数の制限がない。反対に、保存するたびに圧縮がかかるために画質が低下する、均一の面に色むら(ゴミ)が生じることがあるなどの欠点があります。 Graphic Internet Formatの略で、米CompuServe社が開発した画像ファイル形式のこと。拡張子は「.gif」扱える色数が256色と少ないが、ファイルサイズが小さい。均一の色が多い画像やロゴマークなどに利用される。ライセンスを取得したソフトウェアで作成する必要がある。
透過GIF、アニメーションGIFなどが利用できます。
主に写真などに利用します。 図形やロゴマークなどに利用します

本文中、半角カタカナは使用できません。 日本のパソコンメーカーは、半角カタカナの文字コードとして「シフトJIS(8ビット)」を使っていますが、インターネットの基本は7ビットなので、文字化けが起こります。
機種依存文字は使えません コンピュータの機種によってちがう文字コードを使っている場合があるので、機種依存文字を使うと異なる文字になって表現されることがあります。
【機種依存文字の例】
機種依存文字の例
▲トップへ

むやみに改行してはいけません。 Webページ上の1行の文字数や文字の大きさは、「見る側」の設定に準拠します。ブラウザの表示サイズや文字の大きさの指定によって、表示される大きさが異なります。そのような表示をされても、おかしい表現にならないように工夫する必要があります。

TeTraSでは、表示や印刷の設定にできるだけ影響を受けないようにするため、1ページあたりの大きさを縦980ピクセル×横650ピクセルのテーブル(一枠だけの表)で囲んでいます。

図形に対する文字の回り込みはできるだけ避けましょう。




※文字サイズを小さくしたために、回り込んだ文字の行数が少なくなってしまい、下の図が上の図に回り込んでしまった例です。

サイトのトップページは「index.html」とします。

わかりやすいファイル名、画像ファイル名を付けるようにしましょう。
後で編集したり、他の人が内容を変更したりする時、対象のデータがわかりやすいようにしておきましょう。
10 画像は、HTMLデータと同じ名称のフォルダに納めるようにしましょう。
異なるページで繰り返し使用する画像は、「image」という名称のフォルダに入れ、indexファイルと同じ階層に置いておきます。
▲トップへ


11 わかりやすいディレクトリ構造を作りましょう。
後で編集したり、他の人が内容を変更したりする時、対象のデータがわかりやすいようにしておきましょう。
 
※下の図のような階層(ツリー)の構成をディレクトリ構造と言います。
12 フォルダ名や画像ファイル名には、連番で番号を振っておきましょう。
一桁の数字の場合は、01、02、・・・のように「0」を付けて桁数の表示をそろえておくと順番に並んでくれます。
13 背景に使われている画像や背景色が原則として印刷されません。
14 画像には代替えテキストを設定しておきましょう。
バリアフリーの観点から、読み上げ型のブラウザに対応できるようにしておきましょう。
15 画像を多用しないようにしましょう。また、画像はできるだけ原寸大のものを使いましょう。
ひとつのページにあまりたくさんの画像があると、表示が重くなってしまいます。また、画像はできるだけ原寸大のものを使いましょう。大きな画像に縮小をかけて使うのも、ページを重たくする原因のひとつです。
16 複数のページをリンクさせるときは、「リンクの袋小路」がないようにしましょう。 必ずトップ・ページやメニューページ、または前のページに戻れるようにリンクさせておきましょう。ブラウザの「戻る」ボタンでは、必ずしも「元のページ」に戻れるとは限りません。
▲トップへ次のページへ▼