先生のスクールはこちらまずは無料体験!!今日は、意識してあまり使わない要素でもある「iframe」要素についてのお話しになります。Mapを例にiframe要素を見てみると、「埋め込みサイズ」を決める必要があります。そのため、レスポンシブ(=デバイス幅による動的変化)はできないかも?と思ってる方が意外と多いようです。確かに、属性でサイズを指定しただけですと「固定」となりますが、CSSを使うことによってレスポンシブ対応は可能です。ブラウザによって多少異なるかもしれませんが、基本的に属性値での大きさはCSSで指定した大きさで上書きができます。Map等の埋め込みコード(iframe)をコピペします。そのときに、埋め込みコードの親になるようにブロックレベル要素で囲みます。allowfullscreen></iframe></div>そしてCSSで以下のように指定します。iframe{position:absolute;top:0;left:0;width:100%;height:100%;}クラス「.google_map」で指定したい大きさにするのですが、高さ(haight)はゼロにし、代わりに上の余白(paddign-top)に高さにしたい数値を入れます。割合を入れておくと、どのデバイスでも基本的に同じ比率で確認することができます。これでレスポンシブ対応は完了です。PC表示の場合はさらに親を作成し、それに対して固定値を入れることで希望の大きさになるかと思います。最後に今回は有名な例を1つご紹介させて頂きました。最初は「なんで?」と思う対応も1つずつ確認することにより、自分のスキルになりますので、ゆっくり自分のペースで確認してみてください。それでもわからないことは、自分で調べるのも良いですが、詳しい人に聞くことが一番の近道です!当スクールの講師に気軽にご相談ください!・2019/2/25追記Akros東京校ではマンツーマンのPRO講座以外にも短期で学べる「短期講座」も開催しています。上記以外にも限定講座なども開校しておりますので気になる方はぜひご確認・ご受講ください。POSTバンドラーでフロントエンド開発環境を整えようエクセルファイルをスプレッドシートとしてアップする方法セレクト講座でよくある質問3つAIDMAはもう古い?マーケティング理論、どう活用していますか。Catalinaへアップグレードしてみた。(土日祝定休)Akrosでは、受講生と一緒に成長したい仲間を募集していますWEB制作会社が作ったWEBデザイナー育成スクールAkros。