画像タグ

おはようございます。
前回の宣言通り、今回はホームページに画像を表示させるためのタグについてです。

<img src="●●●">

これが画像タグの基本。
●●●には画像のファイル名が入ります。
画像のファイル名は、ホームページタグのリファレンスサイトによっては「画像のアドレス」だったり「画像のURL」などと説明されていますが、どれも同じものです。
もし「img」というフォルダの中の「icon.gif」という名のファイルならば、「img/icon.gif」と●●●に入ることになります。
リンクタグの「href=~」の書き方と同じとお考えください(リンクタグについては、後日詳しく説明いたします)

画像タグにはいくつかの属性があり、以下はホームページに画像を表示させるうえで特に必要となるものです。

◆width="●" height="●"
画像の大きさを指定します。
widthが幅で、heightが高さ。
●はそれぞれの長さを示す数字で、単位はピクセル(px)かパーセント(%)のどちらかとなります(単位を付けなければピクセルで指定されます)
この属性で大きさを指定しない場合、画像そのものの大きさがデフォルトとして表示されますが、省略せずに記述すべきでしょう。
というのも、ブラウザのバグによって画像に重なってテキストが表示される恐れがあるため。
これらの属性はCSSでも指定することができるので、ホームページのデザインとして画像の大きさが決まっているなら、なるべくそちらで記述することをお勧めします。

◆alt="●"
画像の名前を表す属性で、●に入るテキストは半角全角問いません。
何かしら操作をしない限りホームページに表示されない属性で、これは視覚障害者用の読み上げブラウザなどで読み上げるためのものです。
アクセシビリティのためには必須の属性ですが、デザインのための画像なら不要となるでしょう。

使用可能画像・2

あけましておめでとうございます。
月日が経つのは早いもので、ついこのあいだまで「もう年末か・・・」なんて思っていたら、気がつけば既に年が明けていましたね(笑)
今年もこのホームページタグ講座にて、ホームページタグについてどんどん説明していきますので、どうぞご利用くださいませ。
本年も宜しくお願い致します!

さて、昨年はホームページタグの一環として、ホームページにおける使用可能画像の保存形式についてお話していました。
ご紹介したのは、GIF形式とJPG形式。
これらには、それぞれ適した画像があり、これらの特徴についてもお判りいただけたかと思います。

ですが、ホームページで使用できる画像の形式には実はもうひとつあるのです。
今回は残りのひとつについてご説明させていただきます。

◆PNG形式
PNGはGIFに似て異なるものです。
GIFの場合は特許の関係で作成できる画像編集ソフトが限られてきますが、こちらはその制限を避けるために開発されました。
数年前から既にあった保存形式ですが、W3Cに推奨されていることもあり、ここ最近で広く使われるようになっているようですね。
この形式に適した画像は、個人的な感想ですが、写真と単色画像の中間くらいのものが良いと思っています。
もしくは、その両方。
JPGとGIF双方の特徴を兼ね備えた形式と考えても良いでしょう。
JPGとGIFのどちらかを選びにくい場合にPNGを選択してみてはいかがでしょうか。

・・・さて、画像の保存形式については以上です。
次回は、いよいよ画像のタグについて。

使用可能画像・1

こんにちは。
今回は画像の埋め込みタグについてです。
しかし、タグの前にホームページで使用できる画像について説明しなくてはなりませんので、しばしお付き合いください。

ホームページで使用できるかできないかというのは、保存形式による違いがありますが、基本的にどのような保存形式またどんなファイルタイプでも、サーバーにアップロードすることは可能です。
また、それらのファイルに対するアクセスについても、表示されるかダウンロードされるかの違いはあっても、不可能ではありません。

ただ、ブラウザに画像を表示させるとなると、どのような保存形式であっても可能というわけではないのでご注意を。
Photoshop用の保存形式のままでは、ブラウザでは表示されませんよ。

ホームページに表示させるための画像の保存形式は以下の3つです。
それぞれに特徴がありますので、それらと合わせて覚えましょう。

◆GIF形式
小さなアイコンやドットイラストなど、色数の少ない画像にお勧めの形式。
うまく使いこなすと、大きな画像でもファイルサイズは比較的軽く済みます。
ただし、作成許可を得ている画像編集ソフト(Photoshopなど)でないと、この形式では保存できません。
簡単な「GIFアニメ」という動画も作れます。

◆JPG形式
こちらは写真など色数が多い画像に。
保存の際、ファイルサイズを軽くするために画質を選ぶという方式がとられますが、画質を低くしすぎると汚くなってしまうので、多少重くても高画質の方が良いです。