Base自分用のナレッジベース。Server、オープンソース系のシステムやフリーソフトに関する情報、iPhone、Androidスマホ便利情報など役立つ情報などを覚書しておくためのブログ。リニューアルされました。リダイレクトされます。MapとYoutubeの動画を記事内に埋め込んでたりするのですが、スマホでブログを見た時に埋め込んだオブジェクトがスマホの画面に入りきらずに横が切れるというか、はみ出してしまいます。見た目的にあまりよろしくないので、スマホでブログを見た時にはスマホの画面サイズに合わせてサイズを可変させる、いわゆるレスポンシブにする方法を以下に記載します。MapやYoutube動画画面を埋め込む際は、<iframe>タグが使用されたhtmlをリンクとして使う形になる。こんな感じの地図を埋め込むと、html的には以下の様なhtmlを貼り付けることになります。Mapから<iframe>タグで囲まれた上記のうようなURLをコピーして貼り付けますが、もともとサイズが固定サイズで指定されており、そのサイズよりスマホ画面が小さければ当然画面からはみ出してしまいます。Mapの右端がはみ出す。Youtube動画の場合だとこんな感じです。これを解決してスマホの画面サイズに合わせて収まるようにサイズをカ変させる方法をこれから説明します。いわゆる「レスポンシブ・ウェブデザイン」てやつかな。<iframe>タグで埋め込まれたオブジェクトを画面サイズに合わせて変更する方法スマホやタブレットの画面サイズに合わせて<iframe>タグで埋め込まれたオブジェクトのサイズを動的に変更する最も簡単な方法は、スマホ用のテンプレートのスタイルシートに以下のスタイル定義を新たに追加します。}</style>スタイルシートにどう追加したらいいかわからない場合は、スマホ用テンプレートの</head>タグの手前に上記のコードをコピーペーストすればよいです。コピーペーストしたら必ず変更を保存してテンプレートを更新してください。Mapの画像が以下のように画面サイズに収まるように勝手にサイズが変わります。Youtube動画画面の場合、こんな感じにサイズ変更されます。これでスマホ画面のサイズに合わせて埋め込んだオブジェクトのサイズが自動的に調整されるのですが、単純に画面サイズに合わせて幅を100%にしているだけなのでなんとなく縦に間延びした感じになってしまいます。これで十分というのであれば、これでよいですが、やっぱり元々のオブジェクトの縦横比率に合わせた上でスマホ画面のサイズに合わせて自動調整したいなぁ、と思ったりもします。試したのですが、スマホ画面では綺麗に表示されるものの、PC画面では変な空間というか空白が入ってしまったりうまくいかないので、うまく出来るようになったらこの記事に追記するか別の記事として書きたいと思います。Mapなどのiframeで埋め込んだ画像や動画をスマホ画面サイズに合わせてサイズを変更する(レスポンシブ)方法」に詳しく記載しました。最新の記事を参照してください。実行MATCH関数タイトルログインユーザーSimplicity2予期しないエラープライベートスペースWindowsサーバーDelete受信VBScriptユーザビリティ効率VB.NETレスポンシブERRSSフィードイベントログchromeSubmit休日タグクラウドウィンドウサイズリサイズ署名ファイルを開くダイアログボックスウェブマスターツール端末にAPNが正しく設定されていません。(11/25)プロフィールこのブログの中の人:billyboyこのブログを見に来てくれてありがとうございます。このブログの中の人はExcel、AccessのVBAに関するカスタマーサポート、技術ドキュメントのの作成業務を経験後、開発系SEを経て現在は金融系企業のシステム運用/保守SEとして働いています。当初自分が困ったときに解決した方法や社内/外からの技術的な問い合わせに回答した時に作ったプログラムなどを自分用の備忘録としてこのブログを開設しました。たくさんの方に見に来ていただけてることに気づいてからはなるべく誰が見てもわかるような記事内容にすることを意識して書いています。