コンテンツにスキップ
2025年03月09日 | 2025年03月14日

インタラクティブ要素の例

MkDocsでは、JavaScriptやSVGを使って様々なインタラクティブなコンテンツを埋め込むことができます。

インタラクティブなSVG

クリックすると色が変わる円です:

クリックしてください

シンプルな計算機

インタラクティブなグラフ(D3.js)

画像フィルター適用デモ

埋め込みコンテンツ

YouTube動画埋め込み

Google Mapの埋め込み

拡張機能の利用

このページでは様々なインタラクティブ要素を紹介しました。これらを自分のMkDocsサイトに実装する方法:

  1. JavaScriptとCSSを適切に構成する
  2. 必要なライブラリを外部から読み込む
  3. SVGやHTML要素をマークダウンに直接埋め込む
  4. イベントリスナーを追加して動的な振る舞いを実装する

より高度なインタラクティブ要素については高度な機能のページをご覧ください。

Your Name

Your Name

技術とデザインが好きなエンジニア。WebとAIについて発信しています。

前の記事
Mermaid図表
次の記事
高度な機能