初心者向けホームページ作成講座
フリーソフトでホームページを作ろう!
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
touka.gif(49 byte)
t-1.png(323 byte)

画像の挿入とテクニック

(更新日 08/11/17)

 ページに画像を挿入する上で重要なポイントをいくつか説明しておきます。まず画像ファイルの名前は半角英数字にしておく必要があります。もう何度も書いてきましたが、要はホームページで扱うファイルは全て半角英数字にしておかなければいけません。次に使用する画像をホームページ専用フォルダに移しておいて下さい。これも何度か書きましたが後からファイルを移動するとパスが狂うからです。専用フォルダの中に更にフォルダを作って画像を入れておくと整理しやすくなります。

画像を挿入

gazou-1.png(1235 byte)

 alphaEDITで画像を挿入するにはあらかじめ挿入したい場所を選択しておき「画像」ボタンをクリックします。「参照」から挿入する画像を選択。

gazou-2.png(5919 byte)

■画像ファイルの場所
 画像ファイルのパスが表示されます。

■代替テキスト
 画像が表示されない場合や、マウスカーソルを画像に当てた時にテキストを表示します。できるだけ記入しておいた方が良いでしょう。代替テキストは日本語でかまいません。

■ボーダーサイズ
 画像の周りに枠線を表示します。特に使用する必要はありません。

■幅 高さ
 画像を選択後はその画像のサイズが表示されますが、通常のサイズより大きく表示させたり小さく表示させたり出来ます。

■テキスト配置
 画像の配置を設定します。文章の左側や右側などの指定ができます。

■幅の高さの比率を維持する
 画像のサイズを変えた場合、その縦横比を維持します。

■画像をHTMLファイルと同じ場所にコピーする
 HTMLファイルとは別の場所にある画像を同じ階層にコピーします。

使用する画像の注意とテクニック

 画像形式には様々な種類がありますが、一般的にはデジタルカメラで撮った写真などの実写ならJPEG(jpg)、色数が少ないアイコン画像ならGIF(gif)やPNG(png)を使います。それぞれの画像形式には特徴があり、JPEG形式はフルカラー(約1670万色)が使え色数の多い画像の圧縮が得意で、逆にGIF形式は256色しか使えませんが色数の少ない画像の圧縮が高い特徴があります。

gazou-4.jpg(14511 byte) gazou-5.gif(28359 byte)

 上の実写画像はどちらも同じように見えますが、左の画像はJPEG形式で右がGIF形式です。しかしファイルサイズはJPEG形式が14.1KBに対しGIF形式は27.69KBになっています。言うまでもなく少しでも容量を小さくした方がページ表示が速くなるので、それぞれ画像形式の使い分けが必要です。

広告
t-2.png(196 byte)