【初心者向け】HTMLで画像を配置する様々な方法



【初心者向け】HTMLで画像を配置する様々な方法

HTMLでページに画像を表示したい!でも、思ったところに配置されなくって困ってる!という入門者の方は多いと思います。HTMLの画像は、スタイルシートやちょっとした設定で、思ったところに配置ができますよ。

今回は、HTMLで画像を思った場所に配置する方法をご紹介します!

目次
  1. HTMLで画像を表示する方法
  2. imgタグで画像を表示する
  3. 画像表示タグのその他のプロパティ
  4. 画像を思ったところに配置する方法
  5. 画像を横並びで表示する
  6. 画像を中央寄せ、右寄せで表示する
  7. 画像をピクセル単位で指定位置に表示する
  8. 画像を重ねて表示する方法
  9. 画像と画像を重ねる
  10. 画像と文字を重ねる
  11. まとめ

HTMLで画像を表示する方法

image

imgタグで画像を表示する

HTMLで画像を表示するためには、こちらのタグを使用します。

< img src = "画像ファイル名" >

imgタグを使うことで、ここに画像を表示する、という意味になります。また、src=のあとに表示したい画像ファイル名を記述します。画像ファイルは、拡張子が.jpgや.png、.gifなどのファイルです。

画像ファイル名の書き方

画像ファイル名は、相対URLか、絶対URLで記述します。

たとえばこちらのWebページ。自分のパソコンの中だけで表示している場合は大丈夫なのですが・・・ image

インターネットにアップロードしたら、こんなことに。 image

HTMLを見てみると、おやおや。自分のコンピューターの中のフォルダを指定してしまっています。

<!-- 表示されなかった、間違った例です -->
旅行の準備中です。
<img src="file:///Users/me/Desktop/img/trip_jyunbi.jpg">

一番思い出に残った場所です。
<img src="file:///Users/me/Desktop/img/trip_omoide.jpg">

インターネット上からは、自分のコンピューターのフォルダの中身は見ることができません。(色々と特別な設定をすれば不可能ではないのですが、今回は割愛しますね)

「file://...」や「C:\…」 という記述は、自分のコンピューターの中の場所を指定した記述です。画像の場所は、インターネット上で見つかるように「http://…」のような絶対URLか、「img/…」のような相対URLで記述する必要があります。

たとえば、インターネット上にこのような構成でアップする場合は image

このように画像ファイルの場所を記述します。

旅行の準備中です。
<img src="img/trip_jyunbi.jpg"><!-- 相対URL -->

一番思い出に残った場所です。
<img src="http://www.xxxxxx.jp/trip/img/trip_omoide.jpg"><!-- 絶対URL -->

無事に、表示されました! image

外部のサイトの画像ファイルを指定することについて
一般的に、他のサイトの画像をURLで指定して使用してはいけません。画像の持ち主が画像を削除したり移動した場合に表示されなくなる、著作権的な問題が発生する場合がある、などの理由があります。
自分では撮れない素敵な写真を使いたい場合は、著作権フリーの画像サイトも利用してみましょう!当記事に使用している写真も、著作権フリーの画像サイトのものを使用しています。

画像表示タグのその他のプロパティ

< img >タグの中には、他にも属性(プロパティ)を設定できます。以下に解説しますので、必要に応じて使ってくださいね。

属性(プロパティ)使い方意味
width
height
width="100px" height="100px"画像の幅、高さを指定する。指定しておくと読み込み途中もデザインが崩れない。画像のサイズをきちんと指定しないと、縦横比率が崩れて変になるので注意。
borderborder="1"画像の周囲に指定したピクセルで枠線を表示する。画像にリンクを設定した際には枠線ができてしまうので、避けたい場合はborder="0"を指定する。
*ただし、HTML5ではCSSを使ったborder指定が推奨されています
altalt="旅先のひまわりの画像"画像が表示できなかった場合、こちらの文字列が表示される。また、音声ブラウザで画像の代わりに読み上げられる説明文。
titletitle="クリックしてね"マウスカーソルを乗せた時に表示されるツールチップ。なくても良い。

もっと詳しく知りたい方へ、参考サイト:
MOZILLA doc img : 埋め込み画像要素

先ほどのHTMLの画像に属性を追加してみました。

旅行の準備中です。
<img src="img/trip_jyunbi.jpg" width="160px" height="106px" border="4px" alt="旅行の準備中"><!-- 相対URL -->


一番思い出に残った場所です。
<img src="http://www.xxxxxx.jp/trip/img/trip_omoide.jpg" width="100%" alt="思い出の場所" ><!-- 絶対URL -->

表示結果はこちらです!サイズや枠線も反映されていますね。 image

画像を思ったところに配置する方法

ここからは、画像の配置を変える方法について紹介します!

画像を横並びで表示する

画像を横並びに表示する方法です。 image

1.imgタグを続けて記載する

imgタグを連続で記載すると、並んで表示されます。

旅行の準備中です。
<img src="img/trip_jyunbi.jpg" width="160px" height="106px" border="4px" alt="旅行の準備中"><img src="img/trip_omoide.jpg" width="160px" alt="思い出の場所" >
一番思い出に残った場所です。

2.CSSでfloat:left

ここからは、いよいよスタイルシートを使います。

float:left;

divタグで画像1を囲み、スタイルシートで回り込みの設定を行います。floatプロパティでleftを設定すると、次のコンテンツを右に並べて表示します。

<div style="float:left;"> 
旅行の準備中です。
<img src="img/trip_jyunbi.jpg" width="160px" height="106px" border="4px" alt="旅行の準備中">
</div>
<div>
<img src="img/trip_omoide.jpg" width="160px" alt="思い出の場所" >
一番思い出に残った場所です。
</div>

<br clear="both">

画像を中央寄せ、右寄せで表示する

text-align:center;
text-align:right;

image

文字列にもよく使用されるCSSでのtext-align設定が、画像の中央寄せ、右寄せにも応用できます。 中央寄せの場合は text-align:center; 右寄せの場合は text-align:right; を使います。

<div style="text-align:center;"> 
旅行の準備中です。<br>
<img src="img/trip_jyunbi.jpg" width="160px" height="106px" border="4px" alt="旅行の準備中">
</div>
<div style="text-align:right;">
<img src="img/trip_omoide.jpg" width="160px" alt="思い出の場所" ><br>
一番思い出に残った場所です。
</div>

なお、今回はdivタグにstyle=でCSSを記述してしまっていますが、複数回同じ記述が出てくる場合やHTMLファイルをすっきりさせたい場合は、CSSを分離して記述することをおすすめします!

CSS(スタイルシート)を分離して記述した例 スタイルシート

<style>
.photo1 {
 text-align:center;
}

.photo2 {
 text-align:right;
}
</style>

HTML

<div class="photo1"> 
旅行の準備中です。<br>
<img src="img/trip_jyunbi.jpg" width="160px" height="106px" border="4px" alt="旅行の準備中">
</div>
<div class="photo2">
<img src="img/trip_omoide.jpg" width="160px" alt="思い出の場所" ><br>
一番思い出に残った場所です。
</div>

画像をピクセル単位で指定位置に表示する

image

ピクセル単位や、%で指定した位置に表示することもできます。スタイル指定にあるpositionについては次項を参照してください。

<div style="position:absolute; top:30px; left:130px"> 
旅行の準備中です。<br>
<img src="img/trip_jyunbi.jpg" width="160px" height="106px" border="4px" alt="旅行の準備中">
</div>
<div style="position:absolute; top:200px; left:300px">
<img src="img/trip_omoide.jpg" width="160px" alt="思い出の場所" ><br>
一番思い出に残った場所です。
</div>

image

画像を重ねて表示する方法

div要素にこちらのスタイルを指定すると、divで囲んだブロックをブラウザ上で左端からどのくらいの位置か、または親要素からみてどのくらいの位置かを指定できるようになります。

positon:absolute;

親要素については、動かないように固定するため、rerativeを指定します。

position:relative;

画像と画像を重ねる

前項のピクセル単位・パーセンテージ単位での指定を使うと、画像を重ねて表示することができます。

image

<div style="position:relative; top:130px; left:250px">
<img src="img/trip_omoide.jpg" width="320px" alt="思い出の場所" ><br>
一番思い出に残った場所です。

    <div style="position:absolute; top:-100px; left:-100px"> 
    旅行の準備中です。<br>
    <img src="img/trip_jyunbi.jpg" width="160px" height="106px" border="4px" alt="旅行の準備中">
    </div>
</div>

風景写真を親要素にしてposition:relativeで固定し、準備写真を子要素にして上から重ねています。準備写真の位置指定にはマイナスの数値を使って、風景写真よりも左上に表示されるようにしました。

image

画像と文字を重ねる

image

よく見かける、文字を重ねた画像もCSSで簡単に作れてしまいます!早速やってみましょう。スタイルシートの記述が増えたので、styleタグを分離しました。

スタイルシート

<style>
.photo2 {
 position:relative;
 top:100px;
 left:100px; 
}

.photo1 {
 position:absolute;
 top:-100px;
 left:-100px;
}

.moji {
 position:absolute;
 top: 30%;
 color: #fff;
 background: rgba(0,0,0,.6);
 width: 500px;
 padding: 1em 0;
 font-size:2em;
 text-align:center;
}
</style>

HTML

<div class="photo2">
<img src="img/trip_omoide.jpg" width="500px" alt="思い出の場所" ><br>
一番思い出に残った場所です。

    <div class="photo1">
    旅行の準備中です。<br>
    <img src="img/trip_jyunbi.jpg" width="160px" height="106px" border="4px" alt="旅行の準備中">
    </div>

    <div class="moji">
    なつのおもいで
    </div>
</div>

文字の入ったボックスをabsoluteにして、写真の上から30%の位置に配置しています。

image

まとめ

今日から、思い通りに画像が配置できますね。画像を効果的に使って、素敵なサイトを作ってくださいね。

のりぴよ
この記事を書いた人
のりぴよ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp