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

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

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

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-5ed01 …

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-5ed0118c12 …

no image

CSS positionについて

本日はpositionについて。 要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。 Contents1 positionの使い方1.1 相対配置 relati …