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

メインで使う画像のcssについて

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。 画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。 imgタグをd …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …

no image

頻出CSSのまとめ

普段PHPでシステムを作るときはほぼフレームワークを使い、よく出る頻出処理に関してはユーティリティ系のクラスにまとめてます。(特に日付、配列やコレクション、文字列がらみの操作) で、CSSでもよく出る …

no image

Bootstrapでのラジオボタンの装飾について(toggle)

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。 下記のようなボタンの状態をtoggl …

no image

compassについて

sassをベースにしたフレームワークがcompassです。 Contents1 compassとは?2 使用方法3 参考リンク compassとは? sassの記法をベースにCSSファイルの作成が可能 …