画像構文
画像はドキュメントにおける重要な視覚的要素です。Markdownは、画像の挿入と管理のための簡潔な構文を提供します。
基本的な画像構文
インライン画像
 形式を使用します：
markdown
タイトル付き画像
オプションのタイトルを追加します：
markdown
画像にホバーすると、タイトルテキストが表示されます。
参照形式の画像
基本的な参照形式
markdown
![代替テキスト][画像参照]
[画像参照]: https://www.markdownlang.com/image.jpg "オプションのタイトル"ショートカット参照形式
参照ラベルが代替テキストと同じ場合：
markdown
![Markdownロゴ][]
[Markdownロゴ]: https://www.markdownlang.com/markdown-logo.png画像パスの種類
絶対URL
markdown
相対パス
markdown
ルート相対パス
markdown
高度な画像機能
画像リンク
画像をリンクでラップします：
markdown
[](https://www.markdownlang.com)レンダリング結果: 画像をクリックすると、指定されたリンクにジャンプします。
HTMLを使用した画像の制御
サイズ指定
markdown
<img src="image.jpg" alt="説明" width="300" height="200">画像の配置
markdown
<!-- 中央揃え -->
<div align="center">
<img src="image.jpg" alt="中央揃えの画像" width="400">
</div>
<!-- 右揃え -->
<div align="right">
<img src="image.jpg" alt="右揃えの画像" width="300">
</div>レスポンシブ画像
markdown
<img src="image.jpg" alt="レスポンシブ画像" style="max-width: 100%; height: auto;">画像の組み合わせ表示
横並び表示
markdown
<img src="img1.jpg" width="45%"> <img src="img2.jpg" width="45%">画像グリッド
markdown
<table>
<tr>
<td><img src="img1.jpg" width="200"></td>
<td><img src="img2.jpg" width="200"></td>
</tr>
<tr>
<td><img src="img3.jpg" width="200"></td>
<td><img src="img4.jpg" width="200"></td>
</tr>
</table>画像とテキストの混在
markdown
<img src="avatar.jpg" align="left" width="100" style="margin-right: 10px;">
これは左側に画像がフローティングする段落のテキストです。テキストは画像の周りに折り返され、混合レイアウトを作成します。個人プロファイルや製品紹介に使用できます。
<div style="clear: both;"></div>代替テキストのベストプラクティス
説明的なテキスト
markdown
✅ 推奨: 画像の内容を説明
❌ 推奨されない: 意味のないテキスト
機能的な画像
markdown
✅ 推奨: 画像の機能を説明
❌ 推奨されない: 周囲のテキストを繰り返す
クリックして検索 装飾的な画像
markdown
✅ 推奨: 装飾的な画像には空の代替テキストを使用
❌ 推奨されない: 不要な説明
一般的な画像形式
Web向けの形式
| 形式 | 用途 | 特徴 |
|---|---|---|
| JPEG | 写真、複雑な画像 | 小さいファイルサイズ、非可逆圧縮 |
| PNG | アイコン、透過背景 | 可逆圧縮、透過性をサポート |
| WebP | モダンなWeb画像 | より小さいサイズ、高品質 |
| SVG | ベクターグラフィック、アイコン | スケーラブル、小さいファイルサイズ |
| GIF | シンプルなアニメーション | アニメーションをサポート、色数制限 |
形式選択のアドバイス
markdown
✅ 推奨される使用法:
 ← 写真にはJPEG
 ← アイコンにはPNG
 ← ベクターグラフィックにはSVG
 ← シンプルなアニメーションにはGIF
❌ 推奨されない:
 ← アイコンにJPEGは不適切
 ← PNGファイルは大きくなる可能性がある画像最適化のヒント
ファイルサイズの最適化
適切な解像度を選択
markdown<!-- Web表示に推奨 --> <img src="image.jpg" width="800" alt="説明"> ← 高DPIスクリーン用に2倍の画像適切な圧縮を使用
markdown<!-- JPEG品質: 70-80%を推奨 --> 遅延読み込み
markdown<img src="image.jpg" alt="説明" loading="lazy">
CDNと画像ホスティングの使用
markdown
<!-- 高速化のためにCDNを使用 -->
<!-- 画像ホスティングサービス -->
一般的なエラーと解決策
1. パスエラー
markdown
❌ エラー:
 ← パスが存在しない
✅ 正しい:
 ← ファイルパスを確認
 ← 正しい相対パスを使用2. 代替テキストの欠落
markdown
❌ エラー:
 ← 代替テキストがない
✅ 正しい:
 ← 意味のある代替テキストを追加3. 画像の読み込みエラー
markdown
❌ エラー:
 ← 存在しない画像
✅ 正しい:
 ← デフォルト画像を提供画像の検証とアクセシビリティ
画像の検証
markdown
<!-- 画像の存在を確認 -->
アクセシビリティのヒント
- 意味のある代替テキスト
- 適切な色のコントラスト
- スクリーンリーダーのサポート
HTML出力
Markdownの画像構文はHTMLに変換されます：
markdown
変換後：
html
<img src="image.jpg" alt="代替テキスト" title="タイトル">関連構文
練習
以下の画像関連タスクを試してみてください：
- レスポンシブな画像グリッドの作成
- タイトルと代替テキストを含む画像の挿入
- 画像をリンクでラップ
- 異なる形式の画像を比較
- アクセシビリティを考慮した画像の最適化