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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

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

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

CSS javascriptを使わずmin-heightをIEで使えるようにするCSS

今はjavascriptでやるのが主流? とりあえず今回はCSSで対応しました。 div { min-height: 100px; height:auto !important; height: 10 …

CSS Firefoxのリンクの線を消す方法

CSSにて背景画像(画像置換)をしてリンクを付けている場合、Firefoxで閲覧するとはみ出てアウトラインが表示されてしまいます。 そこでこのアウトラインを表示させない方法のご紹介。 a { outl …

iPhone Safariのsubmitボタンのデザインを変更する方法

通常CSSでbackgroundやborder-radiusをかけることによってスタイルを定義することができますが、 iPhoneSafariの場合は最初にリセットする必要があります。 #hdSear …

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

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