HTML
CSS
HTML5
CSS3

なるべく短いコードで埋め込みGoogleカレンダーをレスポンシブに。

2019年3月8日の時点で「Googleカレンダー レスポンシブ」とググったら、その方法を解説しているサイトはいくつも出るのですが、検索結果の1ページ目に表示されたサイトを全部見てみて、「もうちょい簡単に書けそうだけどなぁ」と思ったのでこの記事を書きました。

この記事は、Googleカレンダーをレスポンシブに表示させる方法に焦点を当てるので、Googleカレンダーの埋め込み方法については触れません。知りたい方はググってください。埋め込むときはiframeタグで埋め込むことになります。


方法1 ビューポートのパーセント値で指定


CSS

iframe {

width: 80vw;
height: 80vw;
}

1552011978854.gif

これが一番簡単なんじゃないかな。

もちろん、単位はvwである必要はなくて、vhでもvmaxでもvminでもいいです。

アスペクト比を変えたい場合は「80」の部分を適当な数値にすればいいだけです。例えば、黄金比にしたければ…


CSS

iframe {

width: 80vw;
height: calc(80vw * 9 / 16);
}

1552012425641.gif

このままだと、画面幅が大きく(もしくは、小さく)なるにつれてカレンダーも大きく(もしくは、小さく)なってしまいます。その対策として、max-widthとかmax-heightとかmin-widthとかmin-heightを指定すればいいかと思います。また、スマホサイズの時はアスペクト比を1:1にしたいが、それ以外だと4:3にしたいということもあるかもしれません。その時はメディアクエリを使えばいいかと思います。

例えば、下のコードは次の要件を満たしたコードになります。

・500px未満ではアスペクト比は1:1。

・500px以上ではアスペクト比は4:3。

・カレンダーのサイズの最小は300px-300px

・カレンダーのサイズの最大は600px-450px


CSS

iframe {

width: 80vw;
min-width: 300px;
height: 80vw;
min-height: 300px;
}
@media screen and (min-width: 500px) {
iframe {
max-width: 600px;
height: calc(80vw * 3 / 4);
max-height: 450px;
}
}

1552013271350.gif


方法2 擬似要素にpadding-topを指定


HTML

<div class="calendar">

<iframe ></iframe> <!-- カレンダー埋め込みのためのiframe -->
</div>


CSS

.calendar {position: relative;}

.calendar::before {
content: "";
display: block;
padding-top: 100%;
}
.calendar iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}

1552014095874.gif

いわゆる、画像なり要素なりのアスペクト比を、画面幅が変わっても維持させるためによく使われる方法です。「Googleカレンダー レスポンシブ」とググったら、iframeをdivタグ2つで囲むやり方がよく紹介されていたのですが、「擬似要素使えばもっとシンプルになるんでないの?」と思ったので、その方法を載せています。

上のコードではアスペクト比は1:1ですが、変えたい場合はpadding-topの値を変えればいいです。例えば、アスペクト比4:3で表示させたい場合は次のようになります。


CSS

.calendar {position: relative;}

.calendar::before {
content: "";
display: block;
padding-top: calc(100% * 3 / 4);
}
.calendar iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}

1552014421494.gif

方法2でも、カレンダーの最小(もしくは最大)サイズを指定したり、画面幅によってアスペクト比を変えたりできますが、それは方法1と同じやり方なのでここでは省略します。