いまやスマホは当たり前の時代ですが
スマホでは普通のサイトは見にくいですね

だいたいこのくらいになるのかな？？

※当の本人もスマホを持っていないため、
なんとなくの縮尺率で表示（汗）まあ、だいたいは拡大して拡大して確認して
なんて手順なんでしょうね・・・



そんななか広まっているサイトシステムのスタイルの一つに

「レスポンシブ・デザイン」

なんてものがあります。
聴き馴染みはないと思いますが意外とあります。

ちなみにこのブログも対応しています。
携帯端末で見る場合はそれ専用になるので関係ないですが。


対応しているかどうかは
あなたが「今」みているこの画面を小さくしたり大きくしたりすれば分かります。

要は表示する画面の大きさに適応するゴムみたいなエクスプローラーですね。



面白いでしょ？


え？


「そんなに面白くない？」


そんなこと言わないで下さいよ。


技術は常に変化するから面白いんですよ？
いつまでも変わらず続けていく博物館だってクラシックだって
内容は同じだけど、見せ方、宣伝方法はどんどん変わっているでしょ？


そんなわけで僕のサイトもその形にしようとして
最近こねこねいじくっていたのですが


・・・



慣れないですねぇ。



やっとこさ「使い物になるかな～？」

ってとこまで来たのですが
今度は張り付けている動画フレームも

「レスポンシブ」

しないとカッコ悪いな

と思い、どういうhtmlタグでできるだろうと
ネットの中をさまよいアレコレ試行錯誤しておりました。

結局、テンプレートではできす、
独自にCSSを変えてやる方法になったんですが、
意外と簡単でした（汗）

以下はその一文。

まずヘッダーの前に一文。

---

---

<style type="text/css">
<!--
.iframe-content {
    position: relative;
    width: 100%;
    padding: 75% 0 0 0;
}
.iframe-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
-->
</style>

---

---

要は
「フレームサイズはどんな時でも
相対的(relative)に4：3ですよ」


と指定します。
これでインラインフレームを使用した際に
class（iframe-content）の指定をするとレスポンシブに対応

ということになります。

さっそく実行。

---