Markdownで画像を横並びにする方法

ブログ記事や技術文書を書いている時、複数の画像を横に並べて表示したいと思うことがあります。

しかし、標準的なMarkdown記法だけでは横並び表示は難しいのが現状です。

この記事では、初心者にもわかりやすく、画像を横並びにする実用的な方法をご紹介します。

標準Markdownの限界を理解する
HTMLタグを使った基本的な横並び方法
テーブルを使った横並び表示
実践的な横並び表示例
スタイル属性による詳細調整
各プラットフォームでの対応状況
1. 主要サービスでの対応
2. プラットフォーム別の推奨方法
よくある問題と解決方法
より高度なテクニック
アクセシビリティの配慮
1. alt属性の重要性
2. スクリーンリーダー対応
まとめ

標準Markdownの限界を理解する

通常のMarkdown記法

標準的なMarkdownでは、以下のように画像を表示します：

![画像の説明](画像のURL)

複数画像を並べる時の問題

複数の画像を連続して書いても、多くの環境では縦に並んでしまいます：

![画像1](image1.jpg)
![画像2](image2.jpg)
![画像3](image3.jpg)

結果：多くの場合、画像は縦に一列に並んで表示されます。

環境による違い

Markdownの表示結果は、使用するプラットフォームによって大きく異なります：

縦並びになりやすい環境：

GitHub
はてなブログ
WordPress（テーマによる）
多くの静的サイトジェネレーター

横並びになることがある環境：

一部のMarkdownエディター
簡易プレビューアー
カスタムCSSが適用されている環境

HTMLタグを使った基本的な横並び方法

imgタグによる基本的な方法

最も確実で柔軟な方法は、HTMLの<img>タグを使うことです。

基本的な書き方：

<img src="image1.jpg" width="150">
<img src="image2.jpg" width="150">
<img src="image3.jpg" width="150">

表示結果：画像が横に並んで表示されます。

画像サイズの統一

横並びにする時は、画像のサイズを統一することが重要です：

<img src="before.jpg" width="200">
<img src="after.jpg" width="200">

ポイント：

width属性で幅を指定
高さは自動的に調整される
統一された見た目になる

画像の間隔調整

画像同士がくっついて見えるのを防ぐため、間隔を調整しましょう：

<img src="image1.jpg" width="150" style="margin-right: 10px;">
<img src="image2.jpg" width="150" style="margin-right: 10px;">
<img src="image3.jpg" width="150">

スタイル属性の説明：

margin-right：右側の余白
margin-left：左側の余白
margin：上下左右の余白

テーブルを使った横並び表示

tableタグの活用

HTMLのテーブル機能を使うと、より整った横並び表示ができます：

<table>
  <tr>
    <td><img src="image1.jpg" width="150"></td>
    <td><img src="image2.jpg" width="150"></td>
    <td><img src="image3.jpg" width="150"></td>
  </tr>
</table>

キャプション付きの表示

テーブルを使うと、画像にキャプション（説明文）を簡単につけられます：

<table>
  <tr>
    <td><img src="before.jpg" width="200"></td>
    <td><img src="after.jpg" width="200"></td>
  </tr>
  <tr>
    <td align="center">変更前</td>
    <td align="center">変更後</td>
  </tr>
</table>

テーブルのメリット

テーブルを使った方法には以下の利点があります：

整列がきれい：自動的に高さが揃う
キャプション追加：説明文を簡単に配置
レスポンシブ対応：画面サイズに応じて調整
セル単位の装飾：個別にスタイル設定可能

実践的な横並び表示例

Before/After比較

商品改善やデザイン変更を見せる時によく使います：

<table>
  <tr>
    <td>
      <img src="old_design.jpg" width="250">
    </td>
    <td>
      <img src="new_design.jpg" width="250">
    </td>
  </tr>
  <tr>
    <td align="center"><strong>変更前</strong></td>
    <td align="center"><strong>変更後</strong></td>
  </tr>
</table>

手順説明での活用

操作手順を説明する時にも効果的です：

<table>
  <tr>
    <td><img src="step1.jpg" width="150"></td>
    <td><img src="step2.jpg" width="150"></td>
    <td><img src="step3.jpg" width="150"></td>
  </tr>
  <tr>
    <td align="center">手順1: ファイルを開く</td>
    <td align="center">手順2: 設定を変更</td>
    <td align="center">手順3: 保存する</td>
  </tr>
</table>

商品紹介での活用

複数の角度から撮影した商品写真を表示：

<table>
  <tr>
    <td><img src="front.jpg" width="120"></td>
    <td><img src="side.jpg" width="120"></td>
    <td><img src="back.jpg" width="120"></td>
    <td><img src="detail.jpg" width="120"></td>
  </tr>
  <tr>
    <td align="center">正面</td>
    <td align="center">側面</td>
    <td align="center">背面</td>
    <td align="center">詳細</td>
  </tr>
</table>

スタイル属性による詳細調整

基本的なスタイル属性

より細かい調整をしたい場合は、CSSスタイルを活用します：

<img src="image1.jpg" style="width: 200px; margin: 5px; border: 1px solid #ccc;">
<img src="image2.jpg" style="width: 200px; margin: 5px; border: 1px solid #ccc;">

よく使うスタイル属性

サイズ調整：

width: 200px：幅を指定
height: 150px：高さを指定
max-width: 100%：最大幅を制限

間隔調整：

margin: 10px：四方向の余白
margin-right: 15px：右側の余白
padding: 5px：内側の余白

装飾：

border: 1px solid #ccc：枠線
border-radius: 5px：角を丸くする
box-shadow: 2px 2px 4px rgba(0,0,0,0.1)：影をつける

レスポンシブ対応

スマートフォンでも見やすくするための工夫：

<div style="display: flex; flex-wrap: wrap; justify-content: center;">
  <img src="image1.jpg" style="width: 30%; min-width: 150px; margin: 5px;">
  <img src="image2.jpg" style="width: 30%; min-width: 150px; margin: 5px;">
  <img src="image3.jpg" style="width: 30%; min-width: 150px; margin: 5px;">
</div>

各プラットフォームでの対応状況

主要サービスでの対応

プラットフォーム	imgタグ	tableタグ	styleサポート	推奨方法
GitHub	✅	✅	一部制限	imgタグ
Qiita	✅	✅	✅	tableタグ
はてなブログ	✅	✅	✅	両方OK
WordPress	△	△	△	テーマ依存
Notion	❌	❌	❌	独自方法

✅：完全対応　△：制限あり　❌：非対応

プラットフォーム別の推奨方法

GitHub：

<img>タグが最も確実
style属性は一部制限あり
width属性を使用

Qiita：

HTMLタグ全般をサポート
<table>でのレイアウトが効果的
CSSスタイルも利用可能

はてなブログ：

柔軟なHTML対応
独自のMarkdown拡張もあり
デザインテーマとの調和を考慮

WordPress：

テーマによって制限が異なる
事前にプレビューで確認
プラグインでの拡張も検討

よくある問題と解決方法

問題1：画像が縦に並んでしまう

原因：

HTMLタグが認識されていない
CSSが適用されていない
プラットフォームの制限

解決方法：

<!-- 確実に横並びにする方法 -->
<p>
<img src="image1.jpg" width="150" style="display: inline-block;">
<img src="image2.jpg" width="150" style="display: inline-block;">
</p>

問題2：画像サイズがバラバラ

原因：

元画像のサイズが異なる
サイズ指定が統一されていない

解決方法：

<!-- 高さを統一する方法 -->
<img src="image1.jpg" height="150" style="margin-right: 10px;">
<img src="image2.jpg" height="150" style="margin-right: 10px;">

問題3：スマートフォンで見切れる

原因：

固定幅で指定している
レスポンシブ対応していない

解決方法：

<!-- パーセンテージで指定 -->
<img src="image1.jpg" style="width: 48%; margin: 1%;">
<img src="image2.jpg" style="width: 48%; margin: 1%;">

問題4：画像の読み込みが遅い

原因：

画像ファイルサイズが大きい
高解像度の画像を使用

解決方法：

画像を事前に最適化
適切なサイズにリサイズ
WebP形式などを検討

より高度なテクニック

Flexboxを使った方法

CSSのFlexboxを使うと、より柔軟な配置ができます：

<div style="display: flex; justify-content: space-around; align-items: center;">
  <img src="image1.jpg" style="width: 30%;">
  <img src="image2.jpg" style="width: 30%;">
  <img src="image3.jpg" style="width: 30%;">
</div>

Gridレイアウトの活用

CSS Gridを使った均等配置：

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;">
  <img src="image1.jpg" style="width: 100%;">
  <img src="image2.jpg" style="width: 100%;">
  <img src="image3.jpg" style="width: 100%;">
</div>

画像にリンクを付ける

クリックで拡大表示させたい場合：

<a href="large_image1.jpg" target="_blank">
  <img src="thumb_image1.jpg" width="150" style="margin-right: 10px;">
</a>
<a href="large_image2.jpg" target="_blank">
  <img src="thumb_image2.jpg" width="150">
</a>

アクセシビリティの配慮

alt属性の重要性

画像には必ずalt属性（代替テキスト）を設定しましょう：

<img src="before.jpg" alt="リニューアル前のウェブサイトデザイン" width="200">
<img src="after.jpg" alt="リニューアル後のウェブサイトデザイン" width="200">

スクリーンリーダー対応

視覚的に読む人だけでなく、音声で読み上げる人への配慮：

<table>
  <caption>ウェブサイトリニューアルの比較</caption>
  <tr>
    <th>変更前</th>
    <th>変更後</th>
  </tr>
  <tr>
    <td><img src="before.jpg" alt="旧デザイン" width="200"></td>
    <td><img src="after.jpg" alt="新デザイン" width="200"></td>
  </tr>
</table>