インフラエンジニアを募集中です。横幅がハミ出してしまう問題の解決法HTML&CSSスマホサイト制作Latin2014.07.23こんにちはLatinです。みなさん夏休みの予定はもう決まりましたか?LCC全盛という事で、沖縄などの国内のリゾート地にも随分と安い金額で行けるようになりましたよね。沖縄行きて~!さて、今回はスマホサイト制作のTipsです。ウィジェットを埋め込む事も多いかと思います。!important;」が効かず、「横幅がはみ出てしまう」という事態によく陥ります。この時の対処法をまとめていきます。data-widget-id="00000000000000000">バシャログ。--></div>HTMLはこんな感じです。検索ウィジェットを読み込んでいます。ウィジェットのみにしてあります。200px;}CSSはこんな感じ。!important;」とする事で、端末ごとの横幅サイズにフィットさせます。問題のiPhoneの表示iPhoneでの表示はどうでしょうか。問題の表示を確認してみます。Portraitいやん。12pxはみ出してしまいます。Landscapeばかん。Landscapeもダメ。ウィジェットだけはフィットしてくれず、はみ出して描画されます。描画してくれない」という癖があるようで、特に「%(パーセンテージ)指定」とかだとこのようなおかしな事になってしまうようです。考え抜いた末、横幅は「px指定」で対応する事にしました。使って、「縦・横」時の幅を固定値で記述する対応にしました。対応させる必要がある場合は、さらに追記する必要がありそう。指定する」のは、苦肉の策という感じが否めない気も。Queries」を書く必要もないので、それが一番ベストなんでしょうけど・・・。この謎についても迫っていきたいと思います。試すブラウザfujihara2019.06.13はてブバシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。