2014年04月14日

画像 その2

画像 その2

■画像のサイズ

デジカメで撮影した画像は、ファイルのサイズがとても大きくなっています。ここで言うサイズとは、キロバイト と幅・高さ 両方のサイズです。
ここでは便宜上、キロバイト KB の方を「サイズ」、幅と高さの方を「大きさ」と呼んで区別して説明を進めます。

ブラウザの画面に表示される画像の大きさの指定には、次の二つの方法があります。

@画像をそのままアップロードして、HTMLタグで大きさを指定する。

A画面上の大きさに合わせて、画像のサイズと大きさを縮小してからアップロードする。

■画像ファイルの大きさの確認

大きさを指定するにしても縮小するにしても、まずは、その画像が どのくらいの大きさなのかを確認する必要があります。

◆ファイルのプロパティから確認する

1.Explorerなどで、画像ファイルにカーソルを合わせます。

2.Altキー+Enterキーを押します。画像のプロパティのダイアログボックスが開きます。

3.「詳細」のタブに移動します。プロパティのリストビューに、次の項目があります。
※Windows7の場合、リストビューの 上から15番目くらいに表示されています。

大きさ 値: 1024 x 768

数字の単位は「ピクセル」です。1ピクセルは、標準的なパソコンのディスプレイでは、約0.3528ミリとなります。100ピクセルなら、約35ミリです。

◆Explorerのリストビューで確認する

「コンピューター」の表示メニューの中の、「詳細表示の設定」から、そのファイルに関する情報の表示順を変更すると、リストビューで大きさを確認することが出来ます。
上記の設定ダイアログボックスで、「大きさ」という項目を、名前の次くらいにもってきて下さい。

すると、次の例のように読み上げるようになります。これを音声コピー(Ctrlキー+Altキー+S)して使います。
なお、この画像ファイルは、ピクチャ → パブリックのピクチャ → サンプルピクチャ の中にあるファイルです。

砂漠.jpg サイズ 827 KB 大きさ 1024 x 768 日付時刻 2008/ 03/ 14 13:59 タグ 評価 3 つ星

この設定の方法については、下記のページをご覧下さい。

リストビューの各項目の並び順を変更する
http://talk-pc.sakura.ne.jp/win7/explorer.html#order_replaced

■HTMLタグの入力支援で画像のタグを入力

※注意:下の説明に使っている画像ファイル「砂漠.jpg」は、あくまでも説明のためのもので、著作権の関係で実際には使用することは出来ません。

画像の大きさを指定する前に、とりあえず画像のタグを入力しておきます。

1.まず最初に、ファイル名を英数小文字に変更しておきます。
砂漠.jpg ⇒ desert.jpg
そして、変更後のファイル名「desert.jpg」を、クリップボードへコピーしておきます。

2.HTMLタグの入力支援メニューから「イメージ」を選んで Enterキーを押します。

3.ダイアログボックスが開いて、「画像ファイル名」とガイドされます。
このエディットボックスに、先ほどコピーしておいた画像ファイル名を貼り付けます。

4.そこからTabキーを押していって、「画像の代わりに表示するテキスト」のエディットボックスに移動します。
ここに画像の説明を入力します。

5.Tabキーで「OK」のボタンに移動して Enterキーを押します。
すると、カーソル位置に、

<img src="desert.jpg" alt="砂漠の写真">

という画像タグが入力されます。

■タグで画像の表示される大きさを指定する

画像の大きさを指定するタグは、以下のとおりです。

width="" height=""

width が 画像の幅
height が 画像の高さ
で " " の中に、それぞれの数字を px (ピクセル)で入力します(px という単位は入力する必要はありません)。

※このタグは、HTMLタグの入力支援メニューの中にはありませんので、「お気に入りタグ」に登録しておくことをおすすめします。「お気に入りタグ」については、後の記事で詳しく説明します。

◆画像タグの中に、大きさを指定するタグを挿入する

先ほどの画像タグの中に、この大きさを指定するタグを挿入します。この時、途中の半角スペースに気をつけて下さい。

<img src="desert.jpg" width="" height="" alt="砂漠の写真">

◆表示する画像の大きさを挿入する

次に、表示される大きさを計算して、上記のタグの中に挿入します。
この画像の大きさは、大きさ 1024 x 768 となっています。最初の数字が画像の幅で、後の数字が画像の高さです。
例として、この画像を半分の大きさで表示することにして、この数字に 0.5 をかけます。

width 幅 : 1024 × 0.5 = 512
height 高さ : 768 × 0.5 = 384

この数字を、先ほどのタグの中に挿入します。これで出来上がりです。

<img src="desert.jpg" width="512" height="384" alt="砂漠の写真">

■画像ファイルの縮小

画像ファイルを縮小するソフトは沢山ありますが、画像を扱うソフトという性質上、音声だけで使えるものはあまり無いようです。そういうソフトを使う場合は、晴眼者の協力を得て下さい。

ここでは、Windowsに標準でインストールされている「ペイント」というソフトを使った方法を紹介します。
ただし、「ペイント」を使って縮小すると、画質が落ちるようです。

■Windows7で「ペイント」を使って縮小する 

1.「ペイント」を起動します。
スタートメニューの「プログラムとファイルの検索」のテキストボックスに、日本語入力モードに切り替えてから、「ペイント」と入力します。
下矢印キーで「ペイント」を探してEnterキーを押します。
※スタートメニュー → 全てのプログラム → アクセサリー … とたどっていく方法もありますが、面倒です。

2.「ペイント」が起動したら、Ctrlキー+O を押します。ファイルを開くダイアログボックスが表示されます。

3.縮小したいファイルを選択して開きます。

4.Altキーを押して、リボンのタブコントロールにフォーカスします。ほとんどの場合「ホーム」タブにカーソルが合っています。それ以外のタブを読む(カーソルが合っている)場合は、左右矢印キーで「ホーム」にカーソルを合わせます。

5.Tabキーで「サイズ変更」のボタンに移動してSpaceキーを押します。「サイズ変更」のダイアログボックスが開きます。Tabキーで項目を移動しながら設定していきます。

6.最初は単位を選択するラジオボタンです。矢印キーで、
ピクセル
パーセント
のどちらかを選択します。
ここでは「パーセント」を選択します。

7.次は、縮小する比率 / 数値を入力するボックスです。最初に選択した パーセント・ピクセルに応じて、入力する数値が変わってきます。
ここでは、「水平方向」のボックスに 50 と入力します。50% に縮小するという指定です。

8.次は「垂直方向」のボックスですが、その次の項目の「縦横比を維持する」にチェックがついていれば、もう一つは自動的に数値が入力されます。
※「縦横比を維持する」のチェックボックスは、あらかじめチェックがついています。特別に変形するケースを除き、このままチェックありにしておいて下さい。

9.次はまた、
水平方向
垂直方向
という二つのボックスがあります。ここは、画像の傾きを指定する所です。特別に必要なケースを除き、何もせず スルーしましょう。

10.最後に「OK」のボタンに移動してSpaceキーを押します。これで画像が縮小されます。

■縮小した画像を 名前を付けて保存する

縮小した後の画像は、上書き保存ではなく、必ず名前を付けて保存しましょう。こうすると、元の画像は(そのままの大きさで)元の場所に残り、ホームページ用の画像が、新たに保存されることになります。

1.Altキーを押してから、左矢印キーを押します。「アプリケーション メニュー」と音声がします。

2.そこでSpaceキーを押します。するとメニューが開きます。
3.下矢印キーで「名前を付けて保存」を選んで右矢印キーを押します。サブメニューが開きます。

4.ここでは、元の画像と同じファイル形式で保存することにします。
下矢印キーで「JPEG 画像」を選んでSpaceキーを押します。保存のダイアログボックスが現れますので、保存する場所を指定して「保存」のボタンを押します。

※保存のダイアログボックスは、最初 元の画像ファイルがあった場所でフォルダが指定されていますので、別の場所(ホームページ用のフォルダなど)に変更してから保存して下さい。
posted by yanikun at 08:11| Comment(0) | 日記

画像 その1

画像 その1

これまでは、大雑把に言えば 文字をどう表示させるかという内容でした。今回は画像の表示に関するタグの説明です。
視覚障害者にとって、画像の取り扱いは厄介な問題です。なにしろ、どんな画像なのかが、全く(またはぼんやりとしか)確認できないからです。

さらに、HTML文書の場合は、ページのレイアウトの問題があります。どのくらいの大きさの画像をどこに配置して、文章はどこに配置すれば バランスがよくなるのか、という確認が困難です。

何年もホームページを作っていれば、ある程度の見当はつくようになるかもしれません。
しかし、最初のウチは、編集してはブラウザで確認、バランスが悪ければすぐに編集し直してまた確認……という作業が必要になります。

したがって、画像の表示には、どうしても晴眼者の協力が必要になります。身近にサポートしてくれる晴眼者がいない場合は、思い切って画像は捨てて、テキスト(文字)だけのページにするという選択もあります。

■画像のタグ

上記のような問題はありますが、画像のタグの挿入自体は、それほど難しくはありません。

<img src="画像のファイル名" alt="画像の説明">

これが画像を表示するタグです。
画像のタグは、ここから 〜 ここまで というセットにはなっていません。ここに画像を表示しなさい … という支持だけで完結しているからです。

また、テキスト(文字)ではないので、段落タグ <p></p> などで囲う必要もありません。
※ただし、レイアウトの都合上、段落タグを使う場合もあります。これについては後述します。

■画像タグの構成

先ほどの画像タグを、いくつかの部分に分けて説明します。

<img

img は image の省略形です。i m a g e → i m g 

src

src は、リンクタグの href と同じ働きをする文字列です。画像がどの場所にあるのかを示します。

="画像のファイル名"

" と " の間に画像のファイル名を記述します。

alt="画像の説明">

この部分は「ALT属性」と呼ばれ、代替テキストを表しています。
" と " の間に画像の説明(何の画像なのか)を記述します。

本来は、環境によって画像が表示されない場合に、代わりにどんな画像なのかという説明を記述するためのものですが、アクセスビリティの観点からも、必ず記述するように定められています(実際は記述が無かったり不適切だったりする場合が多いですが)。
※スクリーンリーダーや音声ブラウザは、この部分の文字列を読み上げます。

■画像の周りに線を引く

画像の周りに罫線(枠線)を引くことが出来ます。
好みの問題もありますが、画像の周りを枠線で囲うと、画面が締まって見えます。また、全体が白っぽい画像は、ページの背景と区別がつきにくくなりがちなので、枠線を引いた方が見やすくなる場合があります。

枠線を付けるタグは、

border=""

です。

" と " の間に枠線の太さを指定する数字を半角で記述します。
一番細い線が "1" で、数字を大きくしていくと、線が太く表示されます。
border="" のタグは、一般的には画像のファイル名のあとに記述します。

例:
<img src="desert.jpg" border="1" alt="砂漠の写真">

■画像のファイル名

デジカメで撮影した写真のファイル名は、p0001 p0002 p0003 … という感じで、どれがどの写真なのか、すぐにわからない名前がつけられていることが多いので、まず最初に写真(画像)のファイル名を、わかりやすく変更する必要があります。
その際、「HTMLのファイルとフォルダ」の中で記述した、次の原則をここでも守って下さい。

1.文字は全て 半角英数 小文字を使う。

2.空白(スペース)文字は使わない。

3.途中で区切りを入れたい時は、
- マイナス
または
_ アンダーライン(アンダーバー)
を使う。

リンクタグの場合と同様に、画像のファイル名は、大文字と小文字が区別されます。
特に間違えやすいのが、拡張子です。デジカメで撮影した写真のファイル名は、カメラのメーカーなどによって .jpg(小文字) と .JPG(大文字)の二種類に分かれているようなので、注意が必要です。
※他に .jpeg などの拡張子が使われていることもあります。

■画像ファイルの保存先

ホームページで使う画像ファイルの数がそれほど多くない時は、HTMLファイルと同じフォルダに保存しましょう。そうすると、画像のファイル名だけを指定すればいいので楽です(リンクの相対パスと同じ)。

画像の数が多い場合は、ホームページ用のフォルダの中に、画像専用のフォルダを作成して、そこに保存した方がいいかもしれません。その場合は、ファイル名だけでなく、フォルダの名前も付けて指定する必要があります。

HTMLのフォルダの指定は、ハードディスク上(ローカル)の場合のパスとは区切りの文字が違いますので気をつけて下さい。
ローカルのパスは区切り文字が \
HTMLのパスは区切り文字が /
になります。

例:画像の保存先フォルダが「image」という名前の場合

ローカル(Explorer)のパス

image\photo-001.jpg

HTMLのパス

image/photo-001.jpg

■画像のファイル形式

ホームページで使われる画像のファイル形式で一般的なものは、

JPEG形式 (.jpg)… デジカメ等で撮影された写真のファイル形式で広く使われている
GIF形式(.gif) … 小さなボタンやロゴマークなどに使われる画像形式
PNG形式(.png) … GIFに変わるものとして開発された画像形式で応用範囲が広いがサイズが大きめ

の三種類です。
私は画像について詳しくないので、詳細な説明はインターネットで調べてみて下さい。

■ブラウザで確認する 

画像の表示の確認は、HTMLタグの入力支援メニューでは出来ません。「Internet Explorerで確認」のメニューを実行しても、画面には画像が表示されないためです。
ですから、「HTMLのファイルとフォルダ」で説明したように、HTMLファイルを保存して、MyFileからそのファイルを実行してブラウザを起動し、そこで確認するようにして下さい。

■画像とテキスト(文字列)のレイアウト

ホームページの画像は、レイアウトの上では、ひとつの大きな文字、または 一行の文字列として扱われます。
画像とテキスト(文字列)のレイアウトは、 ケースバイケースなので、ここではごく簡単な例の説明だけにとどめます。

<p>
<img src="desert.jpg" alt="砂漠の写真">
砂漠の写真
</p>

このように、ひとつの段落の中に、画像とテキストを入れると、画像の右下端の横に「砂漠の写真」という文字が表示されます。砂漠の写真の画像が ひとつの文字として扱われるためです。

画像の下に文字を入れたい場合は、次のように、画像と文字を改行タグで区切るか、文字だけを段落タグで囲みます。

<p>
<img src="desert.jpg" alt="砂漠の写真">
<br>
砂漠の写真
</p>

<img src="desert.jpg" alt="砂漠の写真">
<p>
砂漠の写真
</p>

改行タグで区切ると、画像のすぐ下に文字が表示され、文字を段落タグで囲むと、画像と文字の間に、一行分の空白が出来ます。

※文字を画像の前にもってくれば、画像の上に文字が表示されます。また、その場合 見出しタグを段落タグの代わりに使うことも出来ます。

■表組(Table)タグによるレイアウト 

ただし、この方法だと、上下のレイアウトしか出来ません。左右のレイアウト、つまり画像の横に文章をうまく表示したりすることが出来ません。その場合は、表組(Table)タグを使ってレイアウトしていきます。
表組(Table)タグによるレイアウトの方法については、後の記事で説明します。
posted by yanikun at 08:08| Comment(0) | 日記