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

Drop capというのは英字新聞や英語メディアでよく見られる、頭の文字だけ大きくした表現になります。インパクトがありますし、段落のはじまりが分かりやすくなります。とはいえ単に文字を大きくすればいいわけではなく、回り込みの表現や文字サイズの調整も大事です。

新聞などではすでに長い間使われているだけにすでに確立した方法があるでしょうが、Webではまだまだです。そこでデザインを重視している企業の代表ともいえるAdobe社が開発したのがdropcap.jsです。

dropcap.jsの使い方

デモです。美しい表現です。
デモです。美しい表現です。

フォントの変更もできます。
フォントの変更もできます。

文字サイズの変更も可能。このとき、フォントサイズではなく、何行分で選んでいるのが注目点です。
文字サイズの変更も可能。このとき、フォントサイズではなく、何行分で選んでいるのが注目点です。

段落の文字サイズを変更すると、それに伴ってDrop capの文字も変更されます。
段落の文字サイズを変更すると、それに伴ってDrop capの文字も変更されます。

単にDrop capの文字サイズを決めるのではなく、段落側の文字サイズに合わせて調整しているのがユニークです。フォントサイズ、行間の高さも変更ができるようになっています。日本語ではあまり使わないかも知れませんが、英語対応する際などには大事なポイントになってきそうです。

dropcap.jsはJavaScript製のオープンソース・ソフトウェア(Apache License 2.0)です。

dropcap.js Intro

adobe-webplatform/dropcap.js

 

MOONGIFTの関連記事

  • DevRel
  • Com2