にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:24.

widthプロパティを100%にすると「はみ出す」のを防ぐbox-sizingプロパティ

横幅を100%にした際、親ボックスからはみ出すのを防ぐ

スタイルシートを使って、画像やボックスなどを横幅いっぱいに広げる目的で、widthプロパティの値(=横幅)を「100%」と指定すると、なぜか親ボックスの領域(表示領域)からはみ出してしまう……という現象に遭遇することがあります。
このとき、意図せずはみ出てしまうのは、CSSでのwidth(=横幅)の『解釈』が原因かも知れません。

スタイルシートで細かくデザインしている際などにたまに遭遇する「微妙にはみ出してしまう」現象について、その原因と、box-sizingプロパティを使って解決する方法をAll Aboutで解説しました。

横幅を100%にした際、親ボックスからはみ出すのを防ぐ(@All About ホームページ作成)

この方法を覚えておくと、「微妙にはみ出してしまう」問題に遭遇しても、イライラする頻度を減らせるかも知れません。(^_^;;;

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---