HTMLで画像の下に文字を入れる方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLで画像の下に文字を入れる方法について解説しています。画像の下に説明文を入れる方法として、div要素で囲うやり方とtableを使うやり方があります。それぞれの書き方と実際の見え方を確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLで画像の下に文字を入れる方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

画像の下に文字を入れる方法について詳しく説明していくね!

大石ゆかり

お願いします!

画像の下に文字を入れる基本的な使い方

以下のように、写真の下に文字を配置する方法はいくつかあります。

その中でもこの記事では、div要素で囲う方法とtable要素を使う方法についてみていきましょう。

画像と文字をセットで複数横並びにする方法

divとtableの使い方をみていきます。

 

div要素で囲う方法

写真と文字をdiv要素で囲います。

div要素はblock要素のため、そのままでは横並びにならないため、CSSで「display: inline-block;」を指定してください。

 

tableを使う方法

写真の行と説明の行を用意し、<td>タグの中に要素を入れていきます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際にタグでレイアウトしてみよう

今回のサンプルプログラムでは、div要素とtable要素を使って、画像と文字をセットで横並びにする方法を確認します。

以下、div要素を使用したコードです。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>sample</title>
  <style>
    .pic_frame {
      display: inline-block;
      text-align: center;
    }

    table {
      text-align: center;
    }
  </style>
  </head>
<body>
  <div class="pic_frame">
    <img src="pic1.jpg">
    <p>写真1の説明</p> 
  </div>
  <div class="pic_frame">
    <img src="pic2.jpg">
    <p>写真2の説明</p>
  </div>
  <div class="pic_frame">
    <img src="pic3.jpg">
    <p>写真3の説明</p>
  </div>

  <br><br>
以下、table要素を使用したコードです。
  <table>
    <tr>
      <td><img src="pic1.jpg"></td>
      <td><img src="pic2.jpg"></td>
      <td><img src="pic3.jpg"></td>
    </tr>
    <tr>
      <td>写真1の説明</td>
      <td>写真2の説明</td>
      <td>写真3の説明</td>
    </tr>
  </table>
</body>
</html>

実行結果は以下のようになります。

 



どちらも綺麗に横並びになっているのが確認できるでしょう。

写真の下に文字を入れる方法の中でも、div要素とtable要素は非常に使いやすいため使い分けていきましょう。

 

監修してくれたメンター

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容がよくわかったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

はい!HTMLで画像の下に文字を入れる方法を活用していきたいと思います!

TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみましょう。