Webサイト制作コースのお申し込みはこちら Webサイト制作コースのお申し込みはこちら

Webサイトを作成する際、思い通りのデザインで作成するためには、画像を任意の場所に設定するためのスキルが必要となります。

本記事では、HTMLで画像の位置を指定する方法について、サンプルコードを交えながらご紹介していきたいと思います。

HTMLで画像の位置を指定する方法


HTMLで画像の位置を指定する方法は、いくつか存在しますのでよく利用される方法をご紹介していきたいと思います。

ポテパンダの一言メモ

画像の表示には「img」タグを利用する想定で解説していきます。
なおimgタグの「align」属性はHTML5で廃止されたため、CSSでの位置指定をご紹介していきます。

text-alignプロパティ

imgタグの親要素に対してtext-alignプロパティを使用することで、画像の位置を調整することが可能です。

text-alignプロパティは、imgタグのようなインライン要素に対して利用することが出来ます。

左寄せ

  1. <div style="text-align: left">
  2.   <img src="img/sample1.jpg">
  3. </div>

右寄せ

  1. <div style="text-align: right">
  2.   <img src="img/sample1.jpg">
  3. </div>

中央寄せ

  1. <div style="text-align: center">
  2.   <img src="img/sample1.jpg">
  3. </div>

marginプロパティ

imgタグをブロック要素に変換することで、marginプロパティでの位置調整を行うことも可能です。

marginプロパティを利用するためには、imgタグをブロック要素に変換するための「display: block;」を指定します。

左寄せ

  1. <div>
  2.   <img src="img/sample1.jpg" style="display: block; margin-left: 0; margin-right: auto;">
  3. </div>

右寄せ

  1. <div>
  2.   <img src="img/sample1.jpg" style="display: block; margin-left: auto; margin-right: 0;">
  3. </div>

中央寄せ

  1. <div>
  2.   <img src="img/sample1.jpg" style="display: block; margin-left: auto; margin-right: auto;">
  3. </div>

HTMLで画像の位置を指定するサンプルコード


では上述した2つの方法を実際にサンプルコードで記述して、ブラウザ上で表示してみます。

HTML5からはデザインに関しては、別ファイルとしてCSSで記述することが推奨されていますので、style部分は全て外部CSSファイルに切り出してコーディングしていきます。

text-alignプロパティで位置を指定

まずはtext-alignプロパティで位置を指定するサンプルコードです。

index.html

  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Image position Sample</title>
  6.   <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9. <div class="class1">
  10.   <img src="img/sample1.jpg">
  11. </div>
  12. <div class="class2">
  13.   <img src="img/sample1.jpg">
  14. </div>
  15. <div class="class3">
  16.   <img src="img/sample1.jpg">
  17. </div>
  18. </body>
  19. </html>

style.css

  1. .class1 {
  2.   text-align: left;
  3. }
  4.  
  5. .class2 {
  6.   text-align: center;
  7. }
  8.  
  9. .class3 {
  10.   text-align: right;
  11. }

サンプルコードをブラウザ上で確認すると下記のように表示されます。

marginプロパティ

次にmarginプロパティを使用して、同じように画像の位置指定を実施してみます。

index.html

  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Image position Sample</title>
  6.   <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9. <div>
  10.   <img src="img/sample1.jpg" class="class1">
  11. </div>
  12. <div>
  13.   <img src="img/sample1.jpg" class="class2">
  14. </div>
  15. <div>
  16.   <img src="img/sample1.jpg" class="class3">
  17. </div>
  18. </body>
  19. </html>

style.css

  1. img {
  2.   display: block;
  3. }
  4. .class1 {
  5.   margin-left: 0;
  6.   margin-right: auto;
  7. }
  8.  
  9. .class2 {
  10.   margin-left: auto;
  11.   margin-right: auto;
  12. }
  13.  
  14. .class3 {
  15.   margin-left: auto;
  16.   margin-right: 0;
  17. }

サンプルコードをブラウザ上で表示した結果は、text-alignプロパティで位置指定した場合と同じように表示されます。

HTMLで画像の位置調整にはピクセル単位での指定も可能


HTMLの画像の位置調整には、上述したような右・左・中央寄せ以外にも、ピクセル単位に画像をピンポイントで指定することも可能です。

画像の位置をピンポイントで指定する

画像の位置をピンポイントで指定するためには、「position」プロパティの「absolute」を指定します。

親要素に「position」プロパティの「relative」を指定しサイズを決めておくことで、「absolute」で指定した要素をピクセル単位で位置調整することが可能となります。

positionプロパティを使用したサンプルコード

では実際にpositionプロパティを使用して、画像をピンポイントで狙った位置に表示してみたいと思います。

index.html

  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Image position Sample</title>
  6.   <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9. <div class="class1">
  10.   <img src="img/potepan.png" class="class2">
  11. </div>
  12. </body>
  13. </html>

style.css

  1. .class1 {
  2.   position: relative;
  3.   margin: 50px;
  4.   width: 500px;
  5.   height: 500px;
  6.   background-color: gray;
  7. }
  8.  
  9. .class2 {
  10.   position: absolute;
  11.   top: 300px;
  12.   left: 100px;
  13.   width: 250px;
  14.   height: 100px;
  15. }

サンプルコードをブラウザ上で確認すると下記のように表示されます。

サンプルコード解説

サンプルコードでは、imgタグの親要素となるdivタグに対して、「position: relative」を指定しています。

縦幅・横幅を500pxと設定した、背景がグレーのボックスが作成されます。

次にimgタグに対して「position: absolute」を指定することで、ピクセル単位の位置調整が可能です。

今回の場合、「top: 300px」「left: 100px」と指定していますが、これは親要素であるdivタグの「上から300px」「左から100px」の絶対位置に要素を表示するという意味になります。

ポテパンダの一言メモ

画面全体ではなく、親要素を起点としていることに注意しておきましょう。

「width」「height」は画像自体の大きさを指定するプロパティですので、混同しないように気をつけてください。

さいごに：HTMLで画像を任意の位置に設定出来ればデザインの幅は大きく広がる


本記事では、HTMLで画像の位置を調整する方法についてご紹介してきました。

画像を任意の位置に設置出来るようになれば、Webサイトのデザインも大幅に向上させることが可能となります。

今回ご紹介した内容を組み合わせて、ご自身のWebサイトに最適なデザインとなるよう画像を上手く取り入れてみてください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。