class="iframerespo">埋め込みコード</div>実際にYouTube動画のコードを埋め込むを下のようになります。allowfullscreen></iframe></div>これでHTMLの準備は完了です。次にCSSに下のコードを追加します。スマホ用なので480px以下となるようにしました。多いため、横幅に対し縦は56.25%ということです。これでYouTubeやGoogleMapを表示するエリアを確定します。ぺしゃんこになってしまいます。全ての幅を%で指定することにより、iPhoneとアンドロイドなどの微妙な横幅の違いをカバーしてくれます。表示位置の基準を設定するものです。表示基準を決める値になります。これが設定されたタグの子タグの表示位置の基準になります。実際に埋め込むためのコードの表示位置を指定するためのものです。表示位置を左上から縦横いっぱいになるようにします。埋め込んだYouTubeやGoogleMapの上下に隙間を作っているだけで、無くても大丈夫です。埋め込みコードの取得方法は次にまとめました。埋め込み方YouTube埋め込みたいページを開き、「共有」をクリック。「埋め込む」をクリック。「コピー」をクリック。これで埋め込みコードがコピーされます。あとはHPの埋め込みたい部分にコピーした埋め込みコードを貼り付けるだけです。GoogleMapGoogleマップを検索し、埋め込みたい場所を開きます。「地図を共有または埋め込む」をクリック。「地図を埋め込む」をクリック。「HTMLをコピー」をクリック。これで埋め込みコードがコピーされます。あとはHPの埋め込みたい部分にコピーした埋め込みコードを貼り付けるだけです。まとめ埋め込みコードはそのまま埋め込むとスマホで表示したときに縦長になったり横にはみ出してしまう。タグで囲いCSSを指定する。表示領域を確保し、その幅に合わせて縦横いっぱいに表示することでデバイスサイズに関係なく縦横非を設定した通りに表示できる。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。JavaとJavaScriptって似てるけど違うの?レスポンシブcssでtableを縦表示したり横スクロールする方法RECOMMENDこちらの記事も人気です。HTML+CSS2018.8.8CSSでドロップダウンメニューを上に開く方法HTML+CSS2019.3.2htmlのbuttonをcssだけでおしゃれなデザインにするおすすめページHTML+CSS2018.9.18CSSでグラデーションを作成する方法HTML+CSS2018.8.14CSS+HTMLで画像の表示サイズを変更する方法を3つ紹介HTML+CSS2018.8.6HTMLに画像と文章を挿入(マークアップ)するHTML+CSS2018.8.15HTMLのテーブルを使いメニュー表などを作成し見やすくするHTML+CSS2018.9.20inline-blockでwidth:50%でも横に並ばない原因と解決す...HTML+CSS2018.8.8CSSで画像の下の謎の余白を消す方法と原因むねひろ現在36歳。プログラマー歴16年。高校卒業後は調理師見習いをしていたけど、不況で先が不安になり離職。その後上京しハローワークの紹介でプログラマーに。分からないことだらけで辛い日々だったけど、3年頑張ったら色々見えてきてフリーランスに。面白そうなシステム開発をもっとしたい。