リンクと画像チートシート

リンク構文

インラインリンク

[リンクテキスト](https://www.markdownlang.com)
[タイトル付きリンク](https://www.markdownlang.com "リンクタイトル")

参照リンク

[リンクテキスト][ref]
[リンクテキスト][]

[ref]: https://www.markdownlang.com "オプションのタイトル"
[リンクテキスト]: https://www.markdownlang.com

自動リンク

<https://www.markdownlang.com>
<email@example.com>

アンカーリンク

[見出しにジャンプ](#見出し名)
[トップに戻る](#top)

画像構文

インライン画像

![代替テキスト](image.jpg)
![代替テキスト](image.jpg "画像タイトル")

参照画像

![代替テキスト][img-ref]

[img-ref]: image.jpg "オプションのタイトル"

画像リンク

[![代替テキスト](image.jpg)](https://www.markdownlang.com)

サイズ指定

<img src="image.jpg" alt="代替テキスト" width="300" height="200">

一般的な組み合わせ

リンク付き画像

[![プロジェクトロゴ](logo.png)](https://github.com/user/repo)

中央揃えの画像

<div align="center">
  <img src="image.jpg" alt="説明">
</div>

並列画像

<img src="img1.jpg" width="48%"> <img src="img2.jpg" width="48%">

ベストプラクティス

タイプ	提案	例
リンクテキスト	説明的なテキストを使用	✅ [ユーザーガイド]()
リンクテキスト	「ここをクリック」を避ける	❌ [ここをクリック]()
画像ファイル	相対パスを使用	✅ ./images/pic.jpg
代替テキスト	画像の内容を説明	✅ ![UIスクリーンショット]()
ファイル形式	Web対応の形式	✅ JPG, PNG, WebP

HTML出力

Markdown	HTML
[text](url)	<a href="url">text</a>
	<img src="img" alt="alt">
<url>	<a href="url">url</a>

一般的な間違い

❌ 不正な例：
[Link(https://www.markdownlang.com)     ← 右括弧が不足
![Image](image.jpg             ← 右括弧が不足
[ Link ]( https://www.markdownlang.com ) ← 不要なスペース

✅ 正しい例：
[Link](https://www.markdownlang.com)
![Image](image.jpg)
[Link](https://www.markdownlang.com)