|    40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  |

画像を入れてみる

Web ページに画像を挿入することについて紹介します。

使える画像形式

Webページを作成する際によく使われるのは、GIF形式、JPEG形式、PNG形式があります。ホームページ・ビルダーに付属している、ウェブアートデザイナーでは、この3種類の形式の画像を作成することが出来ます。

  • ファイル形式
  • GIF
  • JPEG
  • PNG
  • 色数
  • 256 色
  • 約 1670 万色
  • 約 1670 万色
  • 圧縮方式
  • 可逆圧縮
  • 不可逆圧縮
  • 可逆圧縮
  • 圧縮による画像変化
  • なし
  • あり
  • なし
  • アニメーション
  • 不可
  • 不可
  • 画像の一部透明化
  • 可(半透明は不可)
  • 不可
  •  
  •  
  •  
  •  
GIF画像 JPEG画像 PNG画像
GIF (16.9KB) JPG (6.96KB) PNG (15.3KB)

GIF (Graphics Interchange Format) 形式

JPEG (Joint Photographic Experts Group) 形式

PNG (Portable Network Graphics) 形式

ホームページ・ビルダーでは上記した以外の画像形式も扱えますが、サイズの問題や扱えるOSの問題などがあります。使うなら、GIF、JPEG、PNGのいずれかの形式に変換しましょう。

ページトップへ

画像を入れるには

挿入画像を選択する

画像ファイル挿入のプルダウンリスト画像を挿入する位置にカーソルを移し、ツールバーの画像ファイルの挿入ボタンのアイコン(画像ファイルの挿入)ボタンをクリックし、挿入したい画像を選択します。右側の▼をクリックすると、どこから挿入したいかを選択することが出来ます。

挿入場所は、「ファイルから」「素材集から」「TWAIN対応機器から」「URLを指定して」が選択できます。

用語解説のアイコン

TWAIN対応機器とはデジタルカメラやスキャナなど。

これを選択すると、使用可能なTWAIN機器の一覧が表示されます。使用したいTWAIN機器をメニューから選択し、「画像の取り込み」ボタンをクリックします。

用語解説のアイコン

URLを指定して」により、ネットにある画像を指定して挿入することができます。その場合、画像名とその画像が掲載されているURLが必要になります。

なお、他人の画像を挿入するには、必ず承諾を得ることが必要です。

画像のマークアップ

画像を挿入すると、以下のようなマークアップになります。

画像の幅と高さは、ホームページ・ビルダーの方で自動入力してくれます。

枠の指定 border="0" もホームページ・ビルダーの方で自動入力してくれますが、これについて

ページトップへ

代替テキストを指定する

画像は誰しもが閲覧できる訳ではありません。以下のような事情によって閲覧できない場合があります。

画像が閲覧できない場合に、代わりに表示するテキストを用意する必要があります。これが代替テキストです。もちろん、その内容は適切でなければなりません。

画像を右クリックして、「属性の変更」をクリックしましょう。

「代替テキスト」の部分に代替テキストとなる文字列を入力します。

すると、以下のようにマークアップが変化します。

代替テキストの内容が不要な場合

しかし、alt 属性に何も指定しないわけにはいきません。指定していない場合、ファイル名がそのまま表示されたりするブラウザが存在するからです。

このような場合、マークアップとしては、

とするべきです。

注意アイコン

border 属性は XHTML 1.0 Strict では非推奨となっています

border 属性は、XHTML 1.0 Strict では非推奨となっています。border="0" を削除して、CSSで回避することになります。

  • 修正 CSSソース:
    • img { border : none ; }
  • 修正 XHTMLソース :
    • <img src="images/image237.jpg" width="479" height="331"class="image_right" alt="検証のためのインプット" />

しかし、alt 属性の内容を空にするのは、画像の「属性の変更」画面からは行うことが出来ません。以下の方法で行う必要があります。

注意アイコン

alt 属性は説明用に用意されているのではありません。

ブラウザによっては、alt 属性の内容をポップアップとして示すものがあります。しかし、これは、そのブラウザ(Windows用 Internet Explorer)が持つお節介機能です。

ポップアップで画像に対する説明が必要であれば、title 属性で示すべきです。alt 属性はあくまで画像を表示できない場合に「代わりに表示されるテキスト」を示すためのものです。

ページトップへ

画像の左右に文章などを回り込ませたい

スタイルシートマネージャーを起動して、「追加」ボタンをクリックしたあと、「位置」タブをクリックします。

画像を回り込ませた後は、解除するまでは回り込んだままになります。次で、解除方法を説明します。

ページトップへ

回り込みを解除したい

ページトップへ

|    40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  |