HTML埋め込み

Markdownの強力な機能の一つは、HTMLコードを直接埋め込むことができることで、ドキュメントにより豊かな表現力と機能拡張を提供します。

基本的なHTML埋め込み

インラインHTML要素

Markdown内でHTMLタグを直接使用できます：

これは<strong>太字テキスト</strong>と<em>斜体テキスト</em>を含む段落です。

<code>インラインコード</code>や<mark>ハイライトテキスト</mark>を使用できます。

これは<a href="https://www.markdownlang.com" target="_blank">外部リンク</a>です。

レンダリング結果：

これは太字テキストと斜体テキストを含む段落です。

インラインコードやハイライトテキストを使用できます。

これは外部リンクです。

ブロックレベルHTML要素

<div class="alert alert-info">
  <h4>情報</h4>
  <p>これはHTMLで作成された情報アラートボックスです。</p>
</div>

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>これはカスタムスタイルのブロッククォートです。</p>
  <footer>—— 出典</footer>
</blockquote>

レンダリング結果：

情報

これはHTMLで作成された情報アラートボックスです。

これはカスタムスタイルのブロッククォートです。

—— 出典

一般的なHTML拡張

画像拡張

画像サイズ制御

<!-- HTMLを使用して画像サイズを精密に制御 -->
<img src="example.jpg" alt="サンプル画像" width="300" height="200">

<!-- レスポンシブ画像 -->
<img src="example.jpg" alt="レスポンシブ画像" style="max-width: 100%; height: auto;">

<!-- 画像配置 -->
<div align="center">
  <img src="example.jpg" alt="中央配置画像" width="400">
</div>

画像ギャラリー

<div style="display: flex; gap: 10px; justify-content: center;">
  <img src="img1.jpg" alt="画像1" style="width: 200px;">
  <img src="img2.jpg" alt="画像2" style="width: 200px;">
  <img src="img3.jpg" alt="画像3" style="width: 200px;">
</div>

<!-- 画像グリッド -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
  <img src="img1.jpg" alt="画像1" style="width: 100%;">
  <img src="img2.jpg" alt="画像2" style="width: 100%;">
  <img src="img3.jpg" alt="画像3" style="width: 100%;">
  <img src="img4.jpg" alt="画像4" style="width: 100%;">
</div>

動画とメディア埋め込み

動画埋め込み

<!-- YouTube動画 -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

<!-- Bilibili動画 -->
<iframe src="//player.bilibili.com/player.html?bvid=BV_ID&page=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true" 
        width="100%" 
        height="400">
</iframe>

<!-- HTML5動画 -->
<video controls width="100%" height="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  お使いのブラウザは動画タグをサポートしていません。
</video>

音声埋め込み

<!-- HTML5音声 -->
<audio controls style="width: 100%;">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  お使いのブラウザは音声要素をサポートしていません。
</audio>

<!-- 网易云音乐 -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" 
        width="330" height="86" 
        src="//music.163.com/outchain/player?type=2&id=SONG_ID&auto=1&height=66">
</iframe>

テーブル拡張

複雑なテーブル構造

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">商品</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">売上データ</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">総売上</th>
    </tr>
    <tr style="background-color: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 8px;">Q1</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">商品A</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥100,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥120,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥220,000</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">商品B</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥80,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥90,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥170,000</td>
    </tr>
  </tbody>
</table>

レンダリング結果：

商品	売上データ		総売上
	Q1	Q2
商品A	¥100,000	¥120,000	¥220,000
商品B	¥80,000	¥90,000	¥170,000

フォームとインタラクティブ要素

基本的なフォーム要素

<form>
  <div style="margin-bottom: 1rem;">
    <label for="name" style="display: block; margin-bottom: 0.5rem;">名前:</label>
    <input type="text" id="name" name="name" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="email" style="display: block; margin-bottom: 0.5rem;">メール:</label>
    <input type="email" id="email" name="email" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="message" style="display: block; margin-bottom: 0.5rem;">メッセージ:</label>
    <textarea id="message" name="message" rows="4" 
              style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
    </textarea>
  </div>
  
  <button type="submit" 
          style="background-color: #007bff; color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer;">
    送信
  </button>
</form>

インタラクティブ要素

<!-- 折りたたみ可能なコンテンツ -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">詳細を表示するにはクリック</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>これは折りたたみセクション内の詳細コンテンツです。</p>
    <p>ここに任意のHTMLコンテンツを含めることができます。</p>
  </div>
</details>