HTMLで画像の位置を任意の場所に設定しよう!サンプルコードで解説!
  • facebookページ
  • twitterページ
  • 2020.05.29

    HTMLで画像の位置を任意の場所に設定しよう!サンプルコードで解説!

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

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

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


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

    ポテパンダの一言メモ

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

    text-alignプロパティ

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

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

    左寄せ

    右寄せ

    中央寄せ

    marginプロパティ

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

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

    左寄せ

    右寄せ

    中央寄せ

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


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

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

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

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

    index.html

    style.css

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

    marginプロパティ

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

    index.html

    style.css

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

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


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

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

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

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

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

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

    index.html

    style.css

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

    サンプルコード解説

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

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

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

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

    ポテパンダの一言メモ

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

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

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


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

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

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



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE