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

HTML5のinputタグのvalidatorについて

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。 必須入力のほかにも、telやemail、時間など様々なタイプのもの …

no image

compassについて

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

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

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

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

アーカイブ