万年カレンダー(HTML5版)


2005年にJavaScript版、2008年にFlash版を公開していた「万年カレンダー」のHTML5版を作成しました。


次のHTMLコードを記載することで表示させることができます。

<iframe src="https://www.minagi.jp/apps/cld/" width="163" height="183" frameborder="0" style="width: 163px; height: 183px; border: none;"></iframe>

このカレンダーは、横163ピクセル×縦183ピクセルで設計されていますが、CSS3のtransform:scaleを使うことで拡大・縮小できます。

例)2倍に拡大する場合

<div style="width: 326px; height: 366px;"><iframe src="https://www.minagi.jp/apps/cld/" width="163" height="183" frameborder="0" style="width: 163px; height: 183px; border: none; transform: scale(2); transform-origin: 0 0;"></iframe></div>

【2020.9.10】バージョン1.1.0を公開しました。ウィンドウサイズに自動でフィットするようになりましたので、2倍に拡大する場合は下記のコードで済むようになりました。

<iframe src="https://www.minagi.jp/apps/cld/" width="326" height="366" frameborder="0" style="width: 326px; height: 366px; border: none;"></iframe>

transform: scaleのカッコ内の数値が倍率です。単純に1より大きくした場合、後続の文字などにかかってしまうため、拡大後のサイズの<div>タグの中に<iframe>タグを記述するようにしてください。縮小する場合も同様です。

この「万年カレンダー」は基本的にFlash版の表示・動作を再現しています。

本作をもって、当サイトにおけるFlashコンテンツの移行が完了しました。