CSS
無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00〜PM7:00
| ホーム |
| 無料講座 | Dreamweaver編 | ボックスの概念 |
8.ボックスの概念

CSSでは、各要素が持つ「ボックス」という矩形領域に対してスタイルを指定するという方法を取ります。
このため、ボックスの構造を理解することがCSSによるレイアウトの基礎となります。

CSSの適用先である要素はすべて、ボックスと呼ばれる構造に従って表示されることになっています。その名の通り、箱状の場所だと考えましょう。
ボックスは四角形で、テキストや画像などの要素内容を表示する領域のほかに、パディングと呼ばれる余白があり、その外側にボーダー、さらにその外側の余白であるマージンという4つの部分から構成されます。

ボックスの説明図

CSSの初期値としては、マージン・パディング・ボーダーのいずれもが「0」の状態となっていますが、要素の種類によっては、ブラウザのデフォルト値としてマージンやパディングが設定されている場合もあります。


一般にbody要素にはマージンが設定されていますが、Operaのように、マージンではなくパディングが設定されているブラウザもありますし、h1〜h6要素やp要素をはじめとするブロックレベル要素には、ブラウザの初期値としてマージンが設定されていることが多いです。「h1は大事で目立つべきものだから、場所もその分大きく取りますよ」というふうに考えておくとよいでしょう。

また、ボーダーは色・太さ・線の3つの種類を設定することが可能ですが、初期値では線の種類が「none」=表示なし、となっているため、これを変更しなければ、いくら太さや色を設定しても線は表示されないので注意しましょう。

パディングとマージンは、いずれも余白として機能するので区別しづらいかもしれませんが、もちろん明確な違いをもっています。

要素に設定した背景は、パディングで指定した余白に表示されますが、マージン部分はつねに透明で、背景は表示されないようになっています。
また背景については、ボーダー部分まで範囲内となっているので、両方を使う時には気をつけましょう。

つまり背景とボーダーの両方を表示したとき、見えないだけで実際にはボーダーの下側にも背景が存在しています。線に敷かれている、と思って下さい。
背景画像はボーダーの優先順序が高いため見えでないだけであり、ボーダーを透明にするか点線や破線の状態にすると、背景も表示されます。

 

もどる すすむ

<< PAGE TOP >>


無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00〜PM7:00
| ホーム |
| 無料講座 | Dreamweaver編 | ボックスの概念 |

| 繝帙シ繝繝壹シ繧ク蛻カ菴 莠ャ驛ス縺ョ繝帙シ繝繝壹シ繧ク菴懈舌ッ繝ェ繝・繧ヲ繝

CSS
縺雁撫蜷医○縺ッ縺薙■繧峨°繧峨TEL 075-257-4588 蝟カ讌ュ譎る俣縲AM10:00ス霸M7:00
| 繝帙シ繝 |
| 404 Not found |

404 Not found

縺頑爾縺励ョ繝壹シ繧ク縺ッ隕九▽縺九j縺セ縺帙s縺ァ縺励◆縲ゅい繝峨Ξ繧ケ縺碁&縺」縺ヲ縺繧九°縲√壹シ繧ク縺悟炎髯、縺輔l縺溷庄閭ス諤ァ縺後#縺悶>縺セ縺吶

<< PAGE TOP >>

BACK UP 蛻晏ソ閠縺ァ繝帙シ繝繝壹シ繧ク繧定縺医※繧峨l縺ヲ繧区婿縺ク

迢ャ閾ェ繝阪ャ繝医す繝ァ繝繝励d讌ス螟ゥ繧キ繝ァ繝繝励サYAHOO繧キ繝ァ繝繝鈴°蝟カ縺輔l繧句晏ソ閠縺ョ譁ケ繧ゅ∫┌譁吶〒縲∬ヲェ蛻縺ォ繧「繝峨ヰ繧、繧ケ縺縺溘@縺セ縺吶
シウシ・シッ繝サ譛域ャ。譖エ譁ー繝サ繝ェ繝九Η繧「繝ォetc

繝帙シ繝繝壹シ繧ク蛻カ菴懊ョ莠九↑繧

菴輔〒繧ゅ♀蝠丞粋縺帙¥縺縺輔>縲
縺雁撫蜷医○繝輔か繝シ繝縺ッ縺薙■繧峨°繧

繝帙シ繝繝壹シ繧ク菴懈舌ッ莠ャ驛ス縺ョ繝ェ繝・繧ヲ繝譬ェ蠑丈シ夂、セ

莠ャ驛ス蟶ゆクュ莠ャ蛹コ讖句シ∵カ逕コ222逡ェ蝨ー
繝偵Λ繧、繝薙Ν3髫

TEL 075-257-4588
蝟カ讌ュ譎る俣 AM10:00-PM7:00

縺雁撫蜷医○縺ッ縺薙■繧峨°繧峨TEL 075-257-4588 蝟カ讌ュ譎る俣縲AM10:00ス霸M7:00
| 繝帙シ繝 |
| 繝壹シ繧ク縺瑚ヲ九▽縺九j縺セ縺帙s縺ァ縺励◆ |
CSS
Ryuumu

CSS
Ryuumu