画像を思い通りに配置：HTML、CSS、そしてMarkdown記法で実現する画像配置の達人

2024-04-08

Markdownと画像配置：HTML、CSS、そしてMarkdown記法

Markdownは、シンプルな記法で文書を作成できる言語です。画像の挿入も簡単ですが、配置となると少し複雑になります。そこで、HTMLとCSSを用いて、画像を中央揃え、左右揃え、上下揃えなど、自由に配置する方法を紹介します。

画像の挿入
画像の配置 2.1. 中央揃え 2.1.1. Markdown記法 2.1.2. HTML 2.1.3. CSS 2.2. 左右揃え 2.2.1. Markdown記法 2.2.2. HTML 2.2.3. CSS 2.3. 上下揃え 2.3.1. Markdown記法 2.3.2. HTML 2.3.3. CSS
その他の配置方法

Markdownで画像を挿入するには、以下の2つの方法があります。

方法1: 参照型リンク

![画像の説明](画像のパス)

例:

![富士山](https://example.com/img/fuji.jpg)

方法2: インライン画像

![画像の説明](画像のパス "オプション")

![富士山](https://example.com/img/fuji.jpg "幅: 400px")

オプション

width: 画像の幅
height: 画像の高さ
alt: 画像の説明文
title: 画像のツールチップ

画像の配置

中央揃え

Markdown記法

中央揃えには、以下の3つの方法があります。

画像の説明: 画像のパス の両側に * を付ける
画像の説明: 画像のパス を <> で囲む
画像の説明: 画像のパス の後に {.text-center} を付ける

* ![富士山](https://example.com/img/fuji.jpg) *

<p align="center">![富士山](https://example.com/img/fuji.jpg)</p>

![富士山](https://example.com/img/fuji.jpg){.text-center}

HTML

<img src="https://example.com/img/fuji.jpg" style="display: block; margin: 0 auto;">

CSS

img.center {
  display: block;
  margin: 0 auto;
}

左右揃え

画像の説明: 画像のパス の後に {.float-left} または {.float-right} を付ける

![富士山](https://example.com/img/fuji.jpg){.float-left}

![富士山](https://example.com/img/fuji.jpg){.float-right}

<img src="https://example.com/img/fuji.jpg" style="float: left;">

<img src="https://example.com/img/fuji.jpg" style="float: right;">

img.left {
  float: left;
}

img.right {
  float: right;
}

上下揃え

画像をテーブル内に配置する

| ![富士山](https://example.com/img/fuji.jpg) |
|---|---|

<table style="width: 100%; height: 100%;">
  <tr>
    <td style="vertical-align: middle;">
      <img src="https://example.com/img/fuji.jpg">
    </td>
  </tr>
</table>

img.middle {
  vertical-align: middle;

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>中央揃え</title>
  <style>
    img.center {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <img src="https://example.com/img/fuji.jpg" class="center">
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>左揃え</title>
  <style>
    img.left {
      float: left;
    }
  </style>
</head>
<body>
  <img src="https://example.com/img/fuji.jpg" class="left">
  <p>これはテキストです</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>右揃え</title>
  <style>
    img.right {
      float: right;
    }
  </style>
</head>
<body>
  <p>これはテキストです</p>
  <img src="https://example.com/img/fuji.jpg" class="right">
</body>
</html>

**4. 上下

その他の画像配置方法

flexbox は、要素を柔軟に配置するためのレイアウトシステムです。以下のコードのように、display: flex を設定することで、要素を横並びや縦並びに配置できます。

<div style="display: flex; justify-content: center; align-items: center;">
  <img src="https://example.com/img/fuji.jpg">
</div>

<div style="display: grid; place-items: center;">
  <img src="https://example.com/img/fuji.jpg">
</div>

position プロパティを用いると、要素を絶対座標または相対座標で配置できます。以下のコードのように、position: absolute を設定することで、要素を画面上の任意の位置に配置できます。

<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
  <img src="https://example.com/img/fuji.jpg">
</div>

background-image

要素の背景画像として画像を設定することもできます。以下のコードのように、background-image プロパティを用いることで、要素の背景に画像を表示できます。

<div style="background-image: url('https://example.com/img/fuji.jpg'); background-position: center; background-size: cover;">
  <h1>これは見出しです</h1>
</div>

SVG は、ベクター画像を扱うための言語です。SVG を用いると、画像を拡大縮小しても画質が劣化することなく、自由に配置することができます。

html css markdown