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を使うことで拡大・縮小できます。
例）２倍に拡大する場合
<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を公開しました。ウィンドウサイズに自動でフィットするようになりましたので、２倍に拡大する場合は下記のコードで済むようになりました。
<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コンテンツの移行が完了しました。
