こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、HTML・CSS・JSの学習や技術解説の場でよく見かける「MDN風のマイクロドキュメント（小型リファレンスブロック）」を、自分のサイトで実装する方法を紹介します。
簡潔かつ整った定義＋説明＋リンクのまとまりは、学習者や検索流入ユーザーにもとても親切です。
今回はこれを自作で再現するUIパターンと実装方法を見ていきましょう！
マイクロドキュメントとは？
「マイクロドキュメント」とは、ある1つの関数・要素・概念を簡潔に説明する小型ブロックUIのことです。
例：JavaScriptのメソッド紹介
<div class="micro-doc">
<div class="md-name">Array.prototype.map()</div>
<div class="md-desc">配列の各要素に対してコールバック関数を実行し、新しい配列を返します。</div>
<a class="md-link" href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map"> MDNで詳しく見る </a>
</div>
このようなUIをいくつか記事中に埋め込むことで、可読性と専門性の高いコンテンツが構築できます。
CSSでMDN風デザインを再現
以下のCSSで、シンプルかつ再利用しやすいマイクロドキュメントカードを作成できます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このスタイルを使えば、MDN風の小さなドキュメントカードを簡単に量産できます。
視覚的にも区切りがついて、テクニカル記事の信頼感アップにも貢献します。
さらに便利にする応用テクニック
1. 複数カテゴリで色を切り替える
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
HTMLに次のようにクラスを追加し、色分けすることで、複数の技術要素を整理しやすくなります。
まとめ
MDN風のマイクロドキュメントを自作できれば、自分のブログ・技術メモ・学習記事にプロ感が加わります。
また、読者にとっても「この項目はどういう機能か」が一目で伝わるので、UX向上とSEO的にも効果大です。
- MDN風のリファレンスは、学習サイトや技術ブログで効果的
- HTMLとCSSだけで簡単に再現可能
- 構造化して再利用性を上げれば、運用にも便利
ちょっとした工夫で、読者が「おっ」と思うUIが作れます。
ぜひ次回の技術記事に取り入れてみてくださいね！
satokotadesignキャンペーン実施中！
