niwadesign

ホームページ制作のネタ発信

CSS講座 小ネタ

パーセント(%)指定したボックスにボーダーを指定する方法

投稿日:

50%

最近はスマホサイトの制作も増え、ボックスの幅をパーセント(%)指定することが増えてきました。
その際にボックスにボーダーを追加するとボーダー分幅が広くなりカラム落ちすることがあります。
そんな時は、ボーダーを付けたいボックスに対してbox-sizing: border-box;を指定すればOK!
ちなみにpaddingも外側ではなく内側でとってくれるので、便利

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

-CSS講座, 小ネタ

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

no image

IE10以降にだけにCSSを適応するハック

最近あまりIE用のCSSハックを使うことが無くなったけど、どうしてもハックする必要がでてきたのでメモ。 @media all and (-ms-high-contrast:none){ .red { …

幅いっぱいのスマホサイトのメニューで1pxのボーダーを追加する方法

基本的にスマホサイトを作る際はリキッドレイアウトにすることが多いと思う。 その際1つ1つの要素に対して%(パーセント)指定をするが、1pxのボーダーを要素の間にいれようと思うと、 これがなかなかうまく …

CSS 角丸グラデーションボックス

html <div class="box_01"> <div class="box_02"> <ul> <li> …

[CSS]iPhoneのSafariで背景画像のposition: fixed;が効かない時の対処法

スマホ用のサイトを制作中にiPhoneのSafariで背景画像のposition: fixed;が効かなかったので、それの対処法の備忘録。 この「ああああああ」のボックスが上のメインビジュアルの上を移 …

iPhoneのフォームでフォーカスがズームされるのを防ぐ方法

スマホ用のサイトを作っている時にフォームのテキストフィールドやセレクトをタップすると、画面がズームされることはありませんか? そんな時はフォントサイズを16px以上にするとズームされるとこなく、入力す …