読者です 読者をやめる 読者になる 読者になる

【STEP7】画像を貼り付ける

画像の表示を学ぶ

素敵なwebサイトを作成するのに、画像の使用は絶対である。

はてなブログを使用していれば、画像の挿入に関しては特に悩むことはないだろう。ただ形式の自由な、お洒落なwebサイトをほかに作りたいと思うならば、別だ。しっかりと学んでおきたい。

今回も引き続き、以下のテキストを使っていく。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 

画像を表示する下準備

まずは使用する画像をwebpageのデータが入っている同じフォルダに保存する。これをしないと画像が表示されない。

画像の大きさも調整する。自分の持っている画像の大きさを確認したいときは【右クリック】➡【プロパティ】➡【詳細】➡【イメージ】から簡単に見ることができる(macの場合は勝手が異なるかもしれない)。

教科書では600ピクセルと指定があったので、画像を編集し大きさは予め調節をした。ちなみにフリー画像はFree stock photos · Pexelsの写真がお洒落で、海外の写真や、美しい風景写真が多くあり、お気に入りである。

www.pexels.com

htmlでの画像表示の仕方

画像を表示するときは<img>を使用する。ただこれだけではなく、この中にsrc属性というのを記述する。srcというのは、source(源)の略である。

つまり引用元となっている画像の名前(情報源)を記述するための必用項目である。

<img src="画像の名前">

となる。

これだけで画像を表示することができる。画像の名前は"と"で挟むのを忘れない。必ず.jpgなども忘れないで入れる。

なお<img>は<h1></h1>や<body></body>などの記述と異なり</img>と文末に記す必要はない。

さらにここに加えるものが二つある。

alt属性を記述する

1つ目の加えるものというのは、alt属性である。

altというのはalternate text(代替テキスト)の略。つまり画像の代わりに文字で「どんな画像かを伝える要素」である。例えばウェブページを音声ブラウザで閲覧しているユーザーに、画像の内容を文字で説明するため使われる。

よって

<img src="画像の名前" alt="どんな画像かという説明”>

になる。ちなみに、この記述は必須である。

 <figure>でマークアップする

もう一つが、ここまでの記述を<figure>と</figure>で挟む作業だ。

このfigureというのは「図版」という意味である。

これで挟むことにより、表示した画像が記事の中で図版の役割を果たしているのだということを記すことができる。

よって記述は

<figure>

<img src="画像の名前" alt="どんな画像かという説明”>

</figure>

ということになる。

ちなみに<figure>を使用すると、デフォルトスタイルシートによって余白が挿入される。この余白が邪魔な場合は、margin:0と記して、消すといい。

webページで利用できる画像のフォーマット

JPEG、GIF、PNGこの3つのフォーマットを使用できる。

  • JPEG(基本的には、写真はJPEGを使うと美しくきれい、フルカラー)
  • GIF(256色なので、JPEGほどカラーが綺麗ではない。後ろを透明な画像を利用したいというときはGIFを使用)
  • PNG(GIFと近しいが、フルカラーも利用できる。テキストや線画を含む画像でGIFを使用するとノイズが発生しやすい。PNGの方が綺麗)

かなりざっくりとした理解だが、これで十分ではないだろうか。ちなみに最近ではSVGというフォーマットもあるようだが、使える場面が限られているとメモしておく。

画像編集を行うための無料ソフト

画像の編集にはPIXIAというソフトを使用するといい(Windowsのみ)。昔、学校の授業でも使用した記憶があるので、一般的なツールなのだろう。

Pixiaホームページ

他にもオンラインツールでPhotoxというものがあるらしい。これは初めて聞いた。今のところ画像の編集はwordの画像編集などをその場で適当に使用している。

本格的にwebページの作成をしたいと考えるのであれば、きちんとphotoshopやIllustrator勉強を行う必要があるようにも思う。

検討しておこう。

今回のまとめ

画像の設置は<img>を使う。</img>を最後に記述する必要はない。

このなかにsrc="画像の名前”を記述する。srcはsorceの略である。

加えてalt="画像の詳しい説明”を記述する。これは画像を見ていなくてもどんな画像なのか推測するための代替テキスト(alternative text)である。

最後に<figure></figure>でこれらをはさむ。figureは図版を意味している。

よって

<figure>

<img src="画像の名前" alt="どんな画像かという説明”>

</figure>

ということになる。

画像の設置は基礎的な知識なのかもしれないが、初心者であるため、src属性やalt属性の役割を初めて知った。

おかげでこれから画像の貼り付けを行う際に、混乱しないで済みそうだ。

次回は同じく、以下のテキストを使用し、画像の配置について学んでいく。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック