CSS

iframeを横幅100%で埋め込みたいけど、高さを設定するには?

iframe の横幅(width)を指定して読み込むことはできますが、これだと スマートフォン で表示したときに、ページから iframe がはみ出てしまいます。 width に 100% を設定してみますが、これだと縦長になってしまいます。 横幅100% で 縦は横幅に対して 66.66% になるように、以下の方法で対応します。①position:relateive で 横幅100% と 縦のパディングトップ66.66% の枠を作ります。②中身の position:absolute は、width100% と height100% で relateive の枠(横幅100% と 縦のパディングトップの枠)まで引き伸ばします。 更に、横幅を最大 500px に抑えるには、max-width で囲みます。

CSS マージンの指定のしかた

①上、右、下、左 のマージンを指定する。 ②上下、左右 のマージンを指定する。 ③上、左右、下 のマージンを指定する。 ④全方向 のマージンを指定する。 値を入れない場合は「auto」を入力します。 H3 の上下に1文字分のマージンを設けます。

Scroll to Top