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まとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …

no image

css写経学習で感じたこと

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。 常時追加予定。 Contents1 全体2 レスポンシブ3 レイアウト4 list系5 display …

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …