HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

★今すぐ仕事に結びつく稼げる資格!スキルアップガイド無料進呈中 Click Here![PR]

● イメージを貼る

文字ばかりのホームページと言うのも寂しいものです。(ココがそうか・・・)
挿絵とでも言いましょうか、画像を表示させるためにのはIMG要素を使用します。

<IMG src="../img/bannr.gif" alt="看板(banner)">

看板(banner) このように表示されます。
src』属性で画像ファイルを設定しています。 (A要素の時と同じ方法です。)
画像ファイルにはいくつもの種類が存在していますが、 ウェブ上で主として使用されている画像は『JPG』と『GIF』それに『PNG』の3種類です。

JPG JPE JPEG(ジェイペグ:Joint Photographtc Expert Group)
デジカメでよく使用されている高画質な画像形式です。フルカラー(24bit色)を表示可能です。
非可逆圧縮(復元不可能な圧縮)で、人間の目に認識しづらい、色が混雑したところ(輪郭部分などの色の変わり目)を粗悪にすることで圧縮効率を高めていますが、圧縮率を上げ過ぎると極度に画質が劣化します(モザイクがかかったようになる)。画像の拡大表示にも同じ現象が起きかます。
02年7月にこの画像技術にもGIF(↓と同様ライセンスが生じたとか・・・。 GIFと違ってデジカメ等広い分野で使われているため、かなり論議を呼んでいる。
複数の拡張子が定められているのは、 昔のパソコン(MS-DOSやWindows 3.1)は拡張子が3文字と決まっていたためです。

GIF(ジフ:Graphics Interchange Format)
256色までしかサポートしていませんので、色数の少ないイラスト、ロゴ、ボタン、バナーなどで使用します。
アニメーションが可能で、透過色を設定したりもできます。
ライセンスがどうのという問題があったりするらしいのですが、まぁ個人には関係のない話でしょう。

PNG(Portable Network Graphics)
GIFのライセンス問題でGIFに変わる画像フォーマット
W3C勧告の画像フォーマットで、フルカラーが扱え、圧縮率も高い優れものですが、今一普及していませんね。

この3種類の使い分けは、色数の多い画像はJPG、少ないものはGIFです。
ボタン、アイコン、背景画、バーナーはGIF。イラストや写真はJPGって感じではないでしょうか?
最終的にはPNG一本になるのではないかという話がありますが普及は今一です。

この要素は設定されたファイルを画像として貼付ける要素ですが、 ブラウザの性質上、画像が表示できない環境もあり得ます
その時、そのブラウザは画像のかわりにテキストを出力しようとします。 その表示すべきテキストを『alt』属性に設定しておきます。
本来は画像が表示されないときのために用いる代替えテキストですが、 一部のブラウザ(Internet Explorer)は視覚的にもその画像をポイントした時などに表示するようです。
altの有り≪=altの値有り / ≪=altの値無し
このテキストは重要な画像やハイパーリンク用の画像にはその説明を入れて置くべきですが、 マークやアイコン等には説明が無用なので無意味に入れずに 『alt=""』としておいた方が良いでしょう。
alt属性の属性値無しは『代替えテキスト無し』ですが、alt属性の省略は『代替えテキスト未設定』を意味し、 未設定の場合は環境によって特別な振舞をする可能性があります。
なお、『alt』属性は『title』属性による補助テキストとは異なり、 画像が表示出来ない環境のための代替テキストです。
alt属性による表示 ≪=ポイントするとtitle属性が表示されます。
また、『longdesc』属性によって、 画像の解説文を書き記したページにリンクするようにも設定できます。 (対応していれば。。。)
alt属性による表示

<IMG src="" alt="alt属性による表示" title="title属性による表示です。altとは別に表示されます。">
<IMG src="" alt="alt属性による表示" longdesc="text.htm">

画像を使用すれば、ページの見栄えが良くなり、文字を画像にして表示すればよりカラフルで、しかもブラウザに左右されずに表示できます。 しかし、同じページ内に多くの画像データを表示させようとすると、 ページを表示するのに時間がかかってしまいます。 ISDN(64kbps)の回線を使用している場合、 一秒間に8kbyte(半角8000文字に相当)しか表示出来ません
=≫通信速度
もしここに1MByetもの画像(デジタルカメラの写真数枚)を貼付けると、 そのページを表示するのに(1000÷8=125で)約2分もの時間がかかってしまいます。
そのため通常、写真など掲載するときは小さい画像(サムネイル[thumbnail])を掲載し、 ハイパーリンクを用いて大きい画像を見られるようにします。

写真などは小さい画像にハイパーリンクを設定したり、リンクバナーを用いて田のサイトにリンクする時に、 なぜか(ハイパーリンクと分かるように?)、周りに線が表示されてしまいます。 (Operaでは出ないです)
HOMEへ この周りに表示されている線は境界線(border)と呼ばれる物です。
この値はスタイルシートによって変更することが可能で、 境界線の太さを設定するプロパティ『border-width』の値を0に設定すれば境界線は表示されません。

<IMG src="../img/bannr.gif" alt="ロゴ" style="border-width:0">
HOMEへ ≪=この通り

高さと幅の設定

画像を表示する大きさ、幅(width)と高さ(height)を設定することが出来ます。
視覚的な変化は基本的にスタイルシートによって行いますが、高さと幅の設定も例外ではありません。 スタイルシートのプロパティ、『width』、 『height』に『%』や『em』、 『px』などの単位を付けた数値で設定します。
>>単位についてはこちらです
どちらか一方だけの設定も可能ですが、 その場合、設定された方を基準に画像が縦横の比率を守って表示されます。
画像の幅をウィンドウの50%に設定すれば、下のように表示されます (画質の保証はありませんけど・・・)

ロゴ
<IMG src="../img/bannr.gif" alt="ロゴ" style="width:50% ; height:22px">
ロゴ
<IMG src="../img/bannr.gif" alt="ロゴ" style="height:16px">
○ height属性 width属性を用いても設定できます。
ロゴ
<IMG src="../img/bannr.gif" alt="ロゴ" height="32" width="88">
※単位は記入せず自動的に『px』とされます。

これは、画像の大きさを変えるのではなく、表示領域を確保したいときにも使用できます。
例えば、1ページ内に画像を表示する部分が多い場合は、先に文字だけが表示されその後に順次画像が表示されていきます。 その時画像の領域(幅・高さ)が設定されていないと、 画像が表示されるたびにそれに合わせて文章が下方へ移動していってしまいます。 幅と高さを設定しておくとあらかじめ画像の領域が確保され、この現象を防止することが出来ます。
また、リンクが切れてしまった画像も下のように表示のされ方に違いがでます。
150×50 設定無し
なお、幅と高さの設定をすれば、大きな画像でも小さく、小さい画像でも大きく表示させる事が可能ですが、 たとえ画像を小さく表示しても、取り込むデータ量は同じですのでご注意を。

<<前へ  |上へ|  次へ>>
1234567891011121314151617

今すぐ仕事に結びつく資格&技能完全ガイド【情報満載のガイド無料進呈】

‥…━★ 通信教育80年の実績!がくぶん総合教育センター ★━…‥

TOP] [HOME

更新日時:2014/08/10