バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

[CSS3]box-sizingプロパティ

3月になりました。

春が待ち遠しい、桜が大好きなスタッフ「ほ」です。

さて、本日はWebネタです。

Web作成の授業をしていると、どうしても皆様の前に立ちはだかるボックスサイズの壁。

通常、CSSでボックスのサイズを指定する場合、ちょっとした計算が必要になります。

たとえば、DIVボックスを用意して、

div { width:300px; }

という指定を行ったとします。

この場合、ほかの指定がなければ、

width = ボックスの幅

ということになります。

ただ、このままではボックスの内側の文字まわりに余白がまったくないために窮屈な印象を受けます。

そこで、ボックスにpaddingの指定を行ったとします。

#box2 {
width:300px;
   padding:50px;
}

下図の2つ目のボックスにpaddingの指定を行っています。

ボックスのサイズが大きくなってしまいました。

これは、widthが「内容の幅」を指定するプロパティだからです。

この場合、width:300pxは下図の幅を指定しています。

この指定の場合、ボックスの幅は

左padding(50px)+width(300px)+右padding(50px)

という計算が必要で、400pxになります。

これは、ボーダーにも言えることで、今度はボックスに25pxの太さのボーダーをつけてみました。

#box3 {
width:300px;
   border:25px solid orange;
}

widthは同じ300pxにしていますが、ボーダーの太さの分だけボックスの幅が広がったのがわかるでしょうか。

この場合は、

左ボーダー(25px)+width(300px)+右ボーダー(25px)

で350pxの幅となります。

このように、ボックスにpaddingやボーダーの指定を行うと、とたんにサイズの把握が難しくなるのです。

たいていWeb作成を始めたばかりの方は、ここでつまづいてレイアウトを崩してしまいます。

そこで、今回のネタである「box-sizing」プロパティの登場です。

先ほどのCSS指定に1行追加をします。

div {
   box-sizing:border-box;
}

結果、すべてのボックスが等しく300pxで統一されます。

今回挿入したbox-sizing:border-boxは、widthの幅を内容の幅ではなく、ボーダーを含んだサイズにするための指定です。

この指定をすると、純粋に画面に表示されたボックスの大きさが指定できるようになります。

計算不要!すごく便利!!

IE8以降で対応しておりますので、IE7以下を対象ブラウザからはずしてOKなサイトであれば、ぜひぜひ使ってみてください!!


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!Dreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

The following two tabs change content below.
アバター画像

スタッフ 「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験 認定インストラクター

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。グラフィック制作の流れを体験していただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ