skillup

技術ブログ

デザイン

スマホサイトの横ぐらつき ~border-size:border-boxigについて

投稿日:2017年10月31日 更新日:

スマホサイトをつくっていたところ、横幅がぐらつくというあり得ない事態に・・・

どうやら内部の幅が100%を超えるときにこの現象が起きてしまうようです。

対策1 コンテンツの幅が100%を超えている部分がないか

100%の幅を超過しているような部分がないか調べましょう。

具体的には下記のような点を注意しましょう。

  • 幅を指定しておらず内部のコンテンツに依存するようになっている。
  • 画像のcssにwidthの指定がされていない
  • 非改行の文字列などを使っている

対策その2 border-size:border-boxingを使う

上記のチェック点が問題なくとものちに説明しますが、CSSの仕様上幅が自然にくんでいて100%を超えてしまうことはおこりえます。

その場合、全称セレクタ(before,afterは個別に設定)にborder-size:border-boxigで解決します。

border-size:border-boxigについて

通常cssでは幅をとるときpaddingとborderはwidthとは別物になります。

これをボックスモデルというようです。例えばある領域に関してwidth:100pxとやってpaddingやborderをとった場合、paddingやborderも含めるとその領域は100pxを超えてしまいます。

そこでpaddingやborderまで含めた領域をとるときにborder-size:border-boxingをつかうことで含めて100pxになります。

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定

margin?padding?ボックスモデルを理解しよう!あとbox-sizingが便利だよ、って話

 

-デザイン
-

執筆者:


comment

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

関連記事

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

CSSでのtableについて

tableで気を付けたいポイントなど。 Contents1 ボーダー表示2 テーブルの背景色とボーダーのスタイル3 tableのレイアウト3.1 table-layout auto3.2 table- …

no image

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …