オカマニブログ(岡山マニア)
  • WEBサイト
  • ホーム
  • 岡山の事故
  • 岡山の事件
  • 岡山のコラム
  • 岡山の物件@大島てる

レスポンシブデザイン・Googleマップ(iframe)を簡単に対応させる方法

  • PC等
このエントリーをはてなブックマークに追加
Tweet
Pocket

サイトのレスポンシブデザインかを少しずつ進めているのですが、ひとつ厄介だったのがGoogleマップです。
ストリートビューや地図を貼り付けて使用しています。
これをPCで見た場合にちょうどいいサイズに指定すると、スマホなどで見た場合に画面の横幅に収まらなくなってしまいます。

かと言ってスマホサイズにすると、PCから見ると違和感が出てしまう。
モバイルフレンドリーテストでは問題にならないのですが、実際に見るとデザインも良くないし、操作性も良くない。

…で、簡単な方法が一つ。
横幅を数値ではなく%で指定するのです。
Googleマップのタグを<width=”◯◯◯(横幅の数値)”>となっているのを、例えば<width=”85%”>とします。
これはGoogleマップの横幅がカラムの横幅の85%の数値にするためのタグですが、これでOK。

すごく伝統的な、昔ながらの操作方法ですが実際に対応できています(^^)




More from my site

  • 地名考-瑞祥地名地名考-瑞祥地名
  • 【岡山県南】女性教諭が男子生徒にキスなどわいせつ行為 公立中学校の女性教諭を懲戒免職 岡山【岡山県南】女性教諭が男子生徒にキスなどわいせつ行為 公立中学校の女性教諭を懲戒免職 岡山
  • 【傷害事件】シェアハウスで男性ののど骨折る 住人の42歳男逮捕、岡山県警真庭署【傷害事件】シェアハウスで男性ののど骨折る 住人の42歳男逮捕、岡山県警真庭署
  • 【真庭市】上町商店街を散策してきたよ!【真庭市】上町商店街を散策してきたよ!
  • ZEN TOUCH2からX-FiへZEN TOUCH2からX-Fiへ
  • 倉敷美観地区♪倉敷美観地区♪
こちらもお勧め  Linux版Sea Monkeyの中クリックの動作修正&URLをワンクリックで全選択
2016年11月7日

Post navigation

都道府県の地名の由来やります。 → ← 玉原親水公園

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

お勧め記事

SEA MONKEY COMPOSERの保存形式について(.html)

現在、HPの編集にTeraPadというテキストエディタに加え […]

Kubuntu 外付けHDDを(超簡単!)自動的にマウントさせる

最近、PCのディストロにKubuntu(Linux)を使用し […]

これはすごい、Ptengine

ヒートマップ サーバーを使っているロリポップ!で、提携サービ […]

【android】extract resources needed dy Il2CPPのエラーを調べてみた

android端末でゲームを開こうとしたら【extract […]

最近の投稿

  • 【岡山市】津島遺跡を久しぶりに見てきたよ! 2023年1月31日
  • 花田食品の横綱一番を食べてみたよ! 2023年1月30日
  • 岡山駅・公衆電話遺構群 2023年1月29日
  • 【破産】(有)もみじ産業/破産手続き開始決定 2023年1月28日
  • 【矢掛町】雰囲気たっぷりだけど、通行止めの橋 2023年1月27日

ブログをメールで購読

メールアドレスを記入して頂ければ、記事の更新をメールにてお知らせします。

573人の購読者に加わりましょう
  • 備前市 , 岡山の話題
    【備前市】新旧の歩道橋が二連で並んでいた

    備前市伊部周辺を散策していると、少し違和感のある歩道橋が見えてきました。 まずは遠目で写真をご覧ください。 …分かりますか? ではもう少し近付いてみて...

  • ニュースの感想
    【不起訴】88歳母親を殺害した疑い 57歳女を逮捕 岡山・津山

    88歳母親を殺害した疑い 57歳女を逮捕 岡山・津山(https://headlines.yahoo.co.jp/hl?a=20200225-0001...

  • 岡山の話題 , 総社市
    【破産】(有)もみじ産業/破産手続き開始決定

    (有)もみじ産業/破産手続き開始決定 <岡山>(https://n-seikei.jp/2023/01/post-88395.html) (有)もみじ...

  • 岡山の話題 , 岡山市
    閉業した稲荷山健康センターを見てきたよ!

    Googleマップで何気なく岡山市北区の稲荷山健康センターを検索した所、閉業になっていました。 2020年に新型コロナウイルスの影響で民事再生の道を選...

  • 岡山の話題 , 岡山市
    大島てるで岡山市・清輝地域周辺の物件を調べてみた

    日本全国の事故物件の情報を集めている「大島てる」というサイトがあります。 自由に投稿できるスタイルのために、不確かな情報や明らかに「事故物件」という表...

  • 岡山の話題 , 岡山市
    大島てるで岡山市・岡南地区の物件を調べてみたよ!

    全国の事故物件の情報を集めている「大島てる」というサイトがあります。 自由に投稿できるスタイルのために、不確かな情報や明らかに「事故物件」という表現と...

  • 備前市 , 岡山の話題 , 日記
    【備前市】トービホテルを見てきたよ

    備前市を散策していると「トービホテル」という変わった名前のホテルの看板を見かけました。 興味を惹かれて実際に行ってみました。 ここまで来て気づきました...

  • PC等 , 日記
    【テンプレート】わが社の運輸安全マネジメントの取組み(エクセル)

    知人に頼まれて【わが社の運輸安全マネジメントの取り組み】という書類を作成しました。 (※項目だけで中の本文は入っていない、空の状態です) 全日本トラッ...

  • 倉敷 , 岡山の話題 , 日記 , 食べ物
    花田食品の横綱一番を食べてみたよ!

    両備プラッツの岡山県内の業者が製造するお菓子のコーナーに、横綱一番というレトロ調なお菓子がありました。 見た目は〇〇揚げのシリーズっぽい感じです。 見...

  • 岡山の話題 , 岡山市
    岡山駅・公衆電話遺構群

    岡山市の地下街を歩いていると、一角だけ人が全く立ち寄らない場所がありました。 それがこちらです。 公衆電話コーナー…! まだあったのか!! 昔はここに...

カテゴリー

タグ

PC等 お土産 お店 お菓子 イベント カメラ ニュース マルフク レトロ写真 レトロ看板 事件 事故 交通 倉敷市 備前市 公園 動画 各地の怪談 地名の由来 変な看板 変態 大島てる 天地無用の聖地巡礼 実写!日本恐怖100名所 寺院 岡山市 新見市 橋 津山市 浅口市 瀬戸内市 火事 玉野市 真庭市 矢掛町 神社 笠岡市 総社市 聖地巡礼 赤磐市 閉店 食べ物 飲食 駅 高梁市
2023年1月
月 火 水 木 金 土 日
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
« 12月    

最近のコメント

  • 岡山県・市町村の合併しなかった理由や事情 に 【勝央町】田舎暮らしを夢見るなら勝央⁉ ほどヨイ田舎の役場を紹介するよ! - オカマニブログ(岡山マニア) より
  • 【考察】「とりめし」は岡山のご当地グルメなのか!? に やまだやまお より
  • 新見市のふるさと切手(たまがき)を入手したよ! に ・岡山県新見市【twitter】(2022-12-30 04:55)【地域ニュース・商品グッズ2】 より

アーカイブ

何をお探しですか?

下の『 タグクラウド』のキーワードをクリックすると、それに関連した記事が選ばれます。

検索用フォームもご利用下さい。

Search

タグクラウド

PC等 (103) お土産 (67) お店 (362) お菓子 (84) イベント (44) カメラ (69) ニュース (868) マルフク (35) レトロ写真 (168) レトロ看板 (88) 事件 (67) 事故 (179) 交通 (120) 倉敷市 (426) 備前市 (50) 公園 (56) 動画 (46) 各地の怪談 (67) 地名の由来 (28) 変な看板 (33) 変態 (26) 大島てる (26) 天地無用の聖地巡礼 (33) 実写!日本恐怖100名所 (35) 寺院 (63) 岡山市 (471) 新見市 (36) 橋 (32) 津山市 (72) 浅口市 (47) 瀬戸内市 (48) 火事 (74) 玉野市 (341) 真庭市 (34) 矢掛町 (34) 神社 (148) 笠岡市 (37) 総社市 (53) 聖地巡礼 (62) 赤磐市 (49) 閉店 (96) 食べ物 (304) 飲食 (218) 駅 (28) 高梁市 (89)

カテゴリー

2023年1月
月 火 水 木 金 土 日
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
« 12月    

最近の投稿

  • 【岡山市】津島遺跡を久しぶりに見てきたよ! 2023年1月31日
  • 花田食品の横綱一番を食べてみたよ! 2023年1月30日
  • 岡山駅・公衆電話遺構群 2023年1月29日
  • 【破産】(有)もみじ産業/破産手続き開始決定 2023年1月28日
  • 【矢掛町】雰囲気たっぷりだけど、通行止めの橋 2023年1月27日
  • 【岡山市】西大寺緑化公園のイルミネーションを見てきたよ! 2023年1月26日
  • 【倉敷】餃子の自販機があったよ! 2023年1月25日
  • 【岡山市】さん太ホールを見てきたよ! 2023年1月24日
  • 【新見市】いんでいらのえびめしを食べたよ! 2023年1月23日
  • 【倉敷市】YESの日替わり定食、チキン南蛮を食べたよ! 2023年1月22日

フォローする

RSS 岡山ニュース

  • チョコを使ったバレンタイン向け練り切り 和菓子店「今八ふたわ」が限定商品 2023年1月30日
  • 岡山市内で中華風の「牡蠣重」「牡蠣まん」 瀬戸内市・虫明のご当地グルメに 2023年1月27日
  • 国立療養所「長島愛生園」のカフェで個展 風景・植物のスケッチなど 2023年1月26日
  • ベネッセのオフィスビル内に無人決済の「ファミリーマート」 中国地方初 2023年1月25日
  • 「人新世の資本論」の斎藤幸平さん、岡山・真庭市で講演 SDGsは万能か? 2023年1月24日
  • ホテルグランヴィア岡山が「恵方巻きロール」 白桃やイチゴなど8種 2023年1月23日
  • 岡山・西奉還町商店街でメタバース化計画 NFTアートをスマホで 2023年1月20日
  • 「徳永こいのぼり」が現代のひな人形 岡山出身の彫刻家・灰原愛さんと共同開発 2023年1月19日
  • ミュージカル「ハロルド!」出演者発表 主役の女子高生「どうしてもやりたかった」 2023年1月18日
  • 「文学創造都市」イラストコンテストの優秀作品展示 岡山市内6カ所で 2023年1月14日
Powered by WordPress | テーマ名Diamond