画像の扱い方
|
画像の扱い
※判別しにくい要素は任意に判別し扱う。
|
|
|
ページデザインにおける画像の扱いについて、スタイルシートを用いるようになってから「装飾用画像」と「文書構造内（タグ）の画像」のどちらで扱えばいいか、どう扱えば良いかについて解説します。
この二つを分けるポイントは、さまざまな方法があると考えられますが、コンテンツや機能との関連の度合いによると思われます。
まずは、画像を扱える要素について把握しておきましょう。よく使う物は下記のように３種類あります。構造に組み込む場合は<IMG>、それ以外はスタイルシートということになります。
画像の振り分け
|
タグとしての画像
<IMG SRC="ファイル名" ALT="絵そのものの内容" TITLE="絵が持つ機能など">
ALTとTITLEは必ず書いておきましょう。
装飾用の特に意味の無い画像の場合は""で。
装飾用の画像(スタイルシート)
背景画像で利用（通常のブロック＆インライン要素）
background-image: url("画像ファイル名");
リスト用アイコン（<li>など）
list-style-image: url("画像ファイル名");
|
|
|
次に、画像が使われる場面を考えて見ましょう。ある程度仕分けもして見ましょう。
|
タグ向きの用途
装飾向きの用途
判別しづらいもの
- テキストを含む画像（タイトル＆メニュー等）
- 機能を含む画像（リンクや送信ボタン等）
- 枠・仕切り線
|
|
|
制作のコンセプトなどで仕分け
残った判別しづらいものの仕分け方は、そのページのデザインコンセプトやページデザインの柔軟性の度合いに従いましょう。
|
タグ向き
- テキストで代わりが出来ない（フォントが特殊等）
- 画面の質を一定に保ちたい。（ジャギーなどを回避するため）
- 伸縮自在の枠でしかも固定柄（ズレや歪みを防ぐため）
装飾向き
- 特殊なフォントで無いテキスト（テキストとlist-style-imageやbackground-image等を画像の代わりに使う）
- 枠や線が単純な直線（画像の代わりにborderを使う）
- 飾り枠でも範囲が完全固定（background-imageを使う）
|
|
|
次はテンプレートの作り方・使い方です＞＞
| 
