[9-1] 画像を表示しよう

文章だけのサイトなんて、あまり見かけないですよね。
画像は、背景やタイトル、ボタンなどにも頻繁に使う部品。
まずは、HTML文書の本文に画像を表示するための「img要素」を紹介します。
(後日、画像をボタンに使ったり、背景に敷いたりしていきましょう。)

使用する要素 <img>(この要素は終了タグはありません)
使用する属性 <img src="URL" width="幅" height="高さ" alt="代替えテキスト">

ちなみに、srcは「source(ソース)」の略です。ソースとかエスアールシーとか読んでます。
widthは幅。ウィズ。heightは高さ。ハイト。altは「alternate text(代替テキスト)」の略です。オルト。
(読み方、間違ってたらご指摘ください。おねがいします。)

使用する値 URL:画像ファイルを置いてある場所への行き先。画像ファイルの住所
幅 :画像の左右のサイズ(普通はピクセル単位で指定)
高さ:画像の天地のサイズ(普通はピクセル単位で指定)
代替えテキスト:画像表示OFFの時に表示する画像の説明文

<img>には、上記の属性の他に「usemap属性」「ismap属性」があります。
これは「イメージマップ」を作る時に使う属性です。
「イメージマップ」は、いずれ記事にする予定ですが、今回は関係ないので説明を省きます。

まずは画像を用意

まずは画像を用意します。
解像度は72dpiです。
高さや幅の単位は一般的にはピクセル(px)ですので、ここでもpxで説明します。

画像を貼るための「img要素」は、高さや幅のサイズ指定を省略する事ができます。
保存したファイルの高さや幅を変える必要が無ければ、書かなくてOKです。

単位はピクセルの他に、「em(フォントの高さを1とする相対値)」や「%」などで指定する場合もあります。
単位については 「CSSレイアウトメモ:TIPS [単位について] 」で詳しく説明していますので、参考にしてみてください。

ファイル形式は、GIF、JPEG、PNG。
ご自分で、お好きな画像を用意していただくか、
適当なものが無ければ、下のJPEG画像をハードディスクにダウンロードしてください。
森林イメージ
この画像は、著作権フリーの素材画像から転用しています。
サイズは 240×160pxです。(ちなみにファイル容量は48KBです。)
この画像の名前は「forest.jpg」にしています。お好きな名前に変えても、このままでもOK。

画像を保存するフォルダを作ります

画像ファイルを「image」というフォルダを作って、その中に入れます。
imageでもimgでもOK。「画像が格納されているフォルダだな」と分かる名前にしておきます。

こうする事によって、将来編集するときに、画像ファイルがここに入ってる事がわかって便利。
一般的なサイトの画像ファイルは、たいていimageかimgのフォルダ(ディレクトリと言います)に
入っています。
ですので、あなたが他人が作ったサイトの画像を編集するときには、
imageとかimgとかの名前がついたフォルダの中を見れば、目的の画像ファイルを見つける事ができます。

ここでは下記のように、フォルダ名「image」というフォルダの中に
「forest.jpg」という画像ファイルを置いた状況で説明します。

imageフォルダの中に画像ファイルforest.jpgを入れる

画像をHTML上に指定しよう

画像をHTMLに配置するとき、URL(その画像が置いてある場所)が重要になります。
このURLが間違っていると、画像は表示されません。

さっそく画像をHTML上で配置してみましょう。
前回保存したファイルを下記のように編集します。

<!DOCTYPE html>
<html>
<head>
〜省略〜
</head>
<body>
<!--本文START-->
<div>
<h1>画像を貼ってみよう</h1>
<img src="image/forest.jpg" alt="森林イメージ" width="240" height="160">
<p>
木曽路はすべて山の中にある。あるところは岨づたいに行く崖の道であり、
あるところは数十間の深さに臨む木曽川の岸であり、あるところは山の尾
をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
</p>
<p>
東ざかいの桜沢から、西の十曲峠まで、<span>木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在</span>していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。
</p>
(島崎藤村「夜明け前」序の章より)
<!--本文END-->
</div>
</body>
</html>

画像は、<img src="image/forest.jpg" alt="森林イメージ" width="240" height="160">の部分です。

「src=」で、画像の格納場所(URL)をブラウザに指示しています。
フォルダとファイル名の間を「/(スラッシュ)」で区切っているのを覚えておいてください。
URLの書き方を近日説明しますね。
絶対URLと相対URLがありますが、ここでの表記は相対URLです。

URLの書き方の記事をアップしています。(別ウィンドウ(タブ)で開きます)
[10] 絶対URL と 相対URL

「alt=」で、画像表示がされないブラウザ用に代替えの文字を入れます。
音声ブラウザでも代替えテキストを読み上げるので、ここは必ず入れておきましょう。

「width=」「height=」で、ピクセルサイズを指定します。
このピクセルサイズ指定は省略してもOKです。(省略してプレビューもやってみてくださいね。)

それではファイルを保存して、ブラウザでプレビューしてみましょう。

画像を配置してみた

画像がHTMLで書いた位置(見出し(h1)の下)に表示されていますね。
(見出し(h1)の色は、画像に合わせて深緑(#006600)に変えてみましたよ。やってみて!)

次回は、今回表示した画像の横に、テキストを回り込ませてみましょう。
今回は部品(画像とテキスト)を縦に並べただけですからね。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

はまったこと

初心者から初級者になったところと自覚しています。
買ってきた本より素敵です。これからもよろしくお願いします。
最近はまったわなを、特に初級者の方に共有しようと思って書きます。
初心者のわな1
TeraPADでコード書いていて、metaで文字コードUTF-8を設定したのに、すべてのブラウザで文字化ける。悩みました。結局、エディターのコード設定がShft-JISだったのです。これをUTF-8に設定して書き直したらOKでした。
わな2
画像は.jpgでHTMLに指定してFFTPでアップしたのに、表示されません。これも悩みました。これはアップされた画像が、.JPGだったのです。ブラウザは大文字小文字は無視しますが、サーバーのLINUXは区別するのでした。いつも小文字で統一しているはずなのに、画像ソフトでいじった後、名前を変えて保存した時の拡張子には要注意ということでした。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.