CSSで、要素は基本的に長方形のボックスまたはストライプとして扱われます。ボックスの記述には、以下の皆さんにはすでにおなじみのプロパティが使用されます:
• width – 要素の幅
• height – 要素の高さ
• left – 左の間隔
• right – 右の間隔
• top – 上の間隔
• bottom – 下の間隔
• margin – 外部余白
• border – 要素の周囲にある境界
• padding – 内部余白、つまり境界から要素の内容までの間隔
これらのプロパティはすでに紹介されています。
要素の合計幅は、個々の指定の幅を合計したものです。(同様に高さにも当てはまります)
例:
div#box {
width: 100px;
padding: 20px; /* それぞれ左右に20px /
border: 2px solid; / それぞれ左右に2px /
margin: 0 30px; / それぞれ左右に30px */
}このdiv領域の幅はいくつですか？各値について見てみましょう:
• 100ピクセル
• 20ピクセル×2
• 2ピクセル×2
• 30ピクセル×2
この要素の合計幅は204ピクセルです。
要素の幅と高さは、widthとheightで決定されます。スタイルシートにこれらの指定が明示されていない場合、次のようになります:
• widthがない場合、ボックスは周囲の要素と同じ幅になります。
• heightがない場合、要素は内容の高さと同じ高さになります。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* それぞれ左右に2px */
margin: 0 30px; /* それぞれ左右に30px */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
ブラウザで表示すると、次のようになります:
div要素の親要素はbodyです。したがって、要素は実際にはbody要素と同じ幅になります。高さは内容に応じます。
すべてをゼロに
各ブラウザには組み込みのスタイルシートがあります。これらのスタイルシートにはいくつかの標準値が定義されています。たとえば、paddingやmarginも同様にです。しかし、これらの標準値は異なるブラウザ間で異なるため、例えばボックスモデルと関連して異なるブラウザで同じ結果を得るのは難しいです。そのため、ブラウザに事前に設定されている余白をゼロに設定することをお勧めします。以下のように行います:
* { padding: 0; margin: 0; }
この行をスタイルシートの先頭に追加します。これにより、ボックスを希望の位置に配置する準備が整います。
ボックスの種類
要素が最終的にどのように表示され、他の要素にどのように影響を与えるかは、要素の種類によって異なります。実際、CSS仕様ではブロック要素とインライン要素の間に区別がされています。(他にも種類はありますが、ここではそれほど重要ではないため、省略します)。
ブロック要素は常に新しい行を生成します。その後の要素も新しい行から始まります。典型的なブロック要素には、p, div, h1, ulなどがあります。これらの要素には、先ほど紹介した外部余白、内部余白、高さ、幅、境界のプロパティが適用されます。
<h1>Digital Painting & Matte Painting: Bildaufbau definieren</h1> <p>Modul 2 - Teil 2: Ein Bild ist immer ein Ganzes. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
ブラウザでの表示結果を見ると、h1とpがそれぞれ独自の行を生成することがわかります。
一方、インライン要素は独自の段落を生成せず、通常のテキストフロー内に表示されます。代表的なインライン要素には、span, em, strong, img, brなどがあります。インライン要素には垂直外側の余白や幅、高さの指定は適用されません。
<h1><em>Digital Painting & Matte Painting</em>: Bildaufbau definieren</h1> <p>Modul 2 - Teil zwei: <strong>Ein Bild ist immer ein Ganzes</strong>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
そして、こちらが結果です：
本来ブロック要素である要素をインライン要素に変更することができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Teil 2: <em>画像は常に一体化しています</em>。ただし、常に観察者が最初に見る場所を考える必要があります。</p>
</body>
</html>ブラウザで結果をご覧ください。
h1見出しの背景色は、要素が全体の幅を占めることを示しています。幅は親のbody要素に基づいています。
そして、display特性が関わってきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Teil 2: <em>画像は常に一体化しています</em>。ただし、常に観察者が最初に見る場所を考える必要があります。</p>
</body>
</html>display: inlineにより、要素の幅が変化します。
実際、要素の幅がコンテンツに合わせて調整されます。どの値がdisplayに割り当てられるかについての概要は以下の通りです：
• none – 表示なし
• block – 要素がブロック要素として表示され、新しい行が作成されます。
• inline – 要素がインライン要素として表示され、テキストフロー内に表示されます。
• inline-block – 外観的にはブロックを作成し、高さ、幅、外側の余白を指定できますが、各要素はテキストフロー内に残ります。つまり、ブロック要素とインライン要素の組み合わせとなります。
• list-item – 要素がブロック要素として表示されます。ただし、前に項目符号が付けられます。
• run-in – コンテンツに応じてブロック要素またはインライン要素を作成します。
• table – HTMLのtable要素のような効果を発揮します。
• inline-table – HTMLのtable要素と同様ですが、インラインです。
• table-row – 要素には横並びの子要素が含まれます。これはHTMLのtr要素のように機能します。
• table-cell – 要素はテーブルセルを表し、thおよびtdの2つのHTML要素のように機能します。
• table-row-group – 複数の横並びの子要素を含む要素グループを含み、tbody HTML要素のように機能します。
• table-header-group – 複数の横並びの子要素を含む要素グループを含み、thead HTML要素のように機能します。
• table-footer-group – 複数の横並びの子要素を含む要素グループを含み、tfoot HTML要素のように機能します。
• table-column – 列のセルのプロパティを記述します。 table-column は HTMLの col 要素のように機能します。
• table-column-group – 列のセルのプロパティを記述する要素のグループを含み、HTMLの colgroup 要素のように機能します。
• table-caption – テーブルのキャプションを定義します。 このプロパティはHTMLのcaption要素のように機能します。
実際には、異なる種類の要素に対してさまざまな表示オプションがCSSで提供されています。要素の配置と関連して重要な役割を果たします。次のチュートリアルでさらに詳しく説明します。
