>>>HOME >>>CSSの基礎知識① >>>CSS基礎知識②:仕組み その1 >>>CSS基礎知識②:仕組み その2
>>>CSS基礎知識②:ボックスの構造
ようこそ「HP-Knowledge」へ。このホームページは、「ホームページ作成・制作」におけるHTMLとCSS(スタイルシート)の基礎知識を紹介するホームページ作成初心者向けのページです。ホームページを作るために知っておくべきHTMLとCSS(スタイルシート)の基礎知識を身につけてホームページ作成に強くなろう!

スタイルシート基礎知識②:ボックスの構造

ホームページを構成する「ボックス」。その構造について知識を深めましょう。
ボックスにかけることができる効果には以下のものがあります。

border

ボックスの外枠のことを指します。プロパティにsolid(実線)やdotted(点線)などを設定すれば見た目の変更が可能です。 ボックスにかかる余白部分はborderの外側がmarginで内側がpaddingとなります。marginとpaddingはホームページ作成において頻繁に設定・調整することになるので、自然と覚えられるようになるでしょう。marginとpaddingについては下記項目を参照して下さい。

margin

ボックスとボックスの間の幅を決めることができます。ボックスに設定した背景には適用されないので注意。

padding

余白の詰めを指します。borderの内側の余白の調整にはこのpaddingを使います。marginと同じように背景には適用されません。

width

ボックスコンテンツエリアの横幅をこのwidthで指定します。ボックス全体の幅ではないことに注意。ボックス全体の幅は左右のmarginと左右のpadding、あと左右のborderのピクセル分とwidthの値、これら全てを足した長さがボックス全体の幅になります。

height

コンテンツエリアの縦幅です。横幅と違ってこちらの数値は基本はautoにしておきましょう。autoにしておけばメインテキストを書くボックスなど、下に伸びた分だけ自動で調整してくれます。

実際に見てみよう

説明だけだと今いち分からないという方のために、実際に「.testbox」というクラスを使ってボックスコンテンツを作ってみました。
ボックスの中身
スタイルシートの記述は以下の通り。
    .testbox{
    margin:10px;←外側の余白は10px
    width:300px;←横幅は300px
    height:30px;←縦幅は30px
    border:1px solid #000000;←枠線の太さは1px/色は黒
    background-color:#FFFFFF;←ボックスの背景色は白
    }
ボックス全体の横幅は300px、高さは30pxと指定していますが、実際は黒色に指定したborderの1pxが左右合計2pxあるので横幅の正確な数値は302pxとなります。 またボックス外側の余白を上下左右全てに10px指定し(わかりやすいようにマージン部分は赤くしてあります)、ボックスの背景色を白に指定しています。

ボックスのプロパティ

左側で説明したプロパティはすべてスタイルシートのプロパティです。 widthの計算は複雑なので、きちんと計算して指定しておかないと、レイアウトが大幅にズレてしまうので注意してください。 さらに全体の横幅に関してはブラウザによっては解釈の仕方が違うのでここでも見た目のズレが発生するので覚えておきましょう。 ブラウザ毎で見た目が大幅にズレさせないためにも、最初のうちはborderやmargin/paddingの数値に大きな値を指定しないようにしましょう。 慣れてくればブラウザ毎の解釈の特徴を掴めてくるので、自由自在に余白の設定ができるようになります。

check

最終更新日:2015/7/10

Copyright(C)2008 HP-Knowledge. All Rights Reserved.