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

HTMLで画像を表示する方法

imgタグで画像を表示する

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

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

画像ファイル名の書き方

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

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

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

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で記述する必要があります。

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

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

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

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

無事に、表示されました！

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

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

もっと詳しく知りたい方へ、参考サイト：
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 -->

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

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

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

画像を横並びで表示する

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

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

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

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">

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

文字列にもよく使用される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>

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

ピクセル単位や、%で指定した位置に表示することもできます。スタイル指定にある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>

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

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

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

画像と画像を重ねる

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

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

画像と文字を重ねる

よく見かける、文字を重ねた画像も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%の位置に配置しています。

まとめ

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

CodeCamp提供のデザインマスターコース

当メディアを運営しているCodeCampではデザインマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴は

• デザインからコーディングまでWebデザイナーに必要なスキルを獲得できる
• Webデザイナーとして転職・フリーランスも可能になる
• 実際にWebサイトを作るのでポートフォリオとしても使用できる

詳細はこちらから確認してみてください！▶︎https://codecamp.jp/courses/master_design