ITエンジニア/デザイナ向けにオープンソースを毎日紹介

本を読んでいると、左右に余白があって、必要に応じて単語の説明が記載されていることがあります。注釈を本の最後にまとめて載せているのに比べると分かりやすく、読みやすいのではないでしょうか。

そんな効果をWeb上で実現してくれるのがmarginotesです。Webらしく、よりインタラクティブになっています。

marginotesの使い方

marginotesは次のように指定します。descという要素を使います。

<span desc="The rainiest place in Europe. Probably. Maybe.">Brión</span>

注釈はマウスオーバーで表示されます。リンクとは別で下線が入っている部分が説明対象です。

右側に出すこともできます。

marginotesは普段見慣れない仕組みですが、文頭で「下線のあるところは注釈が出ます」とでも書いておくとユーザビリティが高くなるでしょう。括弧で説明を書き加えるよりも、たくさんの説明ができるのではないでしょうか。

marginotesはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

fdansv/marginotes: Quick, cool margin notes with jQuery

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2