【HTML講座】画像の配置

女性

前回は 見出しと段落 について紹介しました。

【HTML講座】見出しと段落

2018.09.16

今回は 画像の配置 についてです。

それでは見ていきましょう



画像の配置

HTML で画像を配置するためには img タグを使います。

以前、属性というタグによって指定できるものが異なるという話をしたかと思うのですが。

画像を配置するためには。

  • 配置する画像を準備する
  • img タグを使って、配置する画像の場所を指定する

ということが必要になります。

当たり前なのですが、配置する画像の場所が探せなければ、当然表示されないというわけです。

ホームページを制作するときに一般的には画像専用フォルダを作成してその中に保存するようにします。

そして、img タグを使って、今の HTML ファイルから見て、配置する画像がどこにあるのかということを指定します。

例えば。

index.html
img(画像専用フォルダ)

といった感じで、画像専用フォルダ(この場合、img )を作成します。

あとは、画像を用意して img に保存すれば良いわけです。

以前、プログラミングは基本的に半角英数字を使うという話をしたと思うのですが。

画像のファイル名も半角英数字で指定することに注意してください。

src属性

img タグは、この src属性が必須です。

src属性は、配置する画像がどこにあるかを指定するものです。

また同じ例でいきますが。

index.html
img(画像専用フォルダ)

というファイルとフォルダがあったとして。

img フォルダに photo.jpg という画像を保存したとします。

この場合、photo.jpg を index.html で配置する場合は次のように書きます。

<img src=”img/photo.jpg”>

これで画像が配置されるわけです。

alt属性

今となっては考えにくいかもしれませんが、画像が表示されないブラウザを考慮して、画像の内容をテキストで指定します。

あとは検索エンジンにこの画像がどんな内容のものかを伝えるためにも必要な属性です。

<img src=”img/photo.jpg” alt=”ぱそた”>

といった感じで使います。

コーディングしてみると

では、今までやったことを踏まえてコーディングしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ぱそたのHTML講座</title>
</head>
<body>
  <img src="img/pasota.gif" alt="ぱそた">
  <h1>プロフィール</h1>
  <p>名前:ぱそた</p>
</body>
</html>

今回使用する画像は写真でなくイラストなので gif という画像ファイルになっています。

イラストのように色数が少ない場合は JPEG よりもこちらのファイル形式が向いてます。

img フォルダの中に pasota.gif という画像ファイルを保存しているわけです。

上の例と同じで index.html と img フォルダ は同じ場所(階層)にあります。

あと上のコードを見ていて違和感を感じる方もいるかもしれませんが。

img タグは終了タグがありません。

このように終了タグがないものもあるので覚えておきましょう。

最初は難しいかもしれませんが、慣れるとだんだんわかってくるかと思います。

ブラウザ(Edge)で表示してみるとこんな感じです。

画像の配置

最後に

女性

いかがでしょうか。

今回は画像の配置について説明しました。

基本的な部分ですが、使用頻度は高いので確実に理解していきましょう。

無料ブログなどで画像を配置するのも理屈は同じです。

HTML で編集できるサービスであれば、必ず画像ファイルの場所を指定しているはずです。

次回は、リンクの張り方について紹介します。

【HTML講座】リンクの張り方

2018.09.17

漢字が「貼る」か「張る」で迷いましたが。

Web(蜘蛛の巣)のイメージでいうと広げたりするイメージの「張る」で良いようです。