1.DIVの定義
典型的な定義 div の例を分析します。
#sample{ マージン: 10px 10px 10px 10px;
パディング:20px 10px 10px 20px;
ボーダートップ: #CCC 2px ソリッド;
ボーダー右: #CCC 2px ソリッド;
ボーダーボトム: #CCC 2px ソリッド;
ボーダー左: #CCC 2px ソリッド;
背景: url(images/bg_poem.jpg) #FEFEFE 繰り返しなし右下;
色: #666;
テキスト配置: 中央;
行の高さ: 150%;
手順は次のとおりです。
レイヤーの名前は「sample」です。このスタイルは、ページ上で <div id="sample"> を使用して呼び出すことができます。
MARGIN は、レイヤーの境界線の外側に残される空白スペースを指し、ページの余白または他のレイヤーとの隙間を作成するために使用されます。 「10px 10px 10px 10px」はそれぞれ「上・右・下・左」（時計回り）の４つの余白を表し、すべて同じであれば「MARGIN: 10px;」と省略できます。マージンがゼロの場合は、「MARGIN: 0px;」と記述します。注: 値がゼロの場合、後にパーセント記号を続ける必要がある RGB カラー値 0% を除き、その他の場合には単位「px」を続ける必要はありません。 MARGIN は透明な要素であるため、色を定義できません。
PADDING は、レイヤーの境界線とレイヤーのコンテンツの間のスペースを指します。マージンと同様に、上、右、下、左の境界線からコンテンツまでの距離をそれぞれ指定します。すべて同じ場合は、「PADDING:0px」に短縮できます。左側を個別に指定するには、「PADDING-LEFT: 0px;」と記述します。 PADDING は透明な要素であるため、色を定義できません。
BORDER は、レイヤーの境界線を指します。「BORDER-RIGHT: #CCC 2px Solid;」は、レイヤーの右側の境界線の色を「#CCC」、幅を「2px」、スタイルを「実線」として定義します。 。
点線のスタイルが必要な場合は、「dotted」を使用できます。
BACKGROUND はレイヤーの背景を定義します。これは 2 つのレベルで定義されます。最初に画像の背景を定義し、「url(../images/bg_logo.gif)」を使用して背景画像のパスを指定します。次に、背景色「#FEFEFE」を定義します。 「no-repeat」は、背景画像を繰り返す必要がないことを意味します。水平方向に繰り返す場合は「repeat-x」を使用し、垂直方向に繰り返す場合は「repeat-y」を使用し、カバーするまで繰り返します。背景全体を印刷するには、「リピート」を使用します。次の「rightbottom;」は、背景画像が右下隅から始まることを意味します。背景画像がない場合は、背景色 BACKGROUND: #FEFEFE のみを定義できます。
COLOR は、前のセクションで紹介したフォントの色を定義するために使用されます。
TEXT-ALIGN は、レイヤー内のコンテンツの配置を定義するために使用されます。center は中央、left は左側、right は右側です。
LINE-HEIGHT は、行の高さが標準の高さの 150% であることを意味します。LINE-HEIGHT:1.5 または LINE-HEIGHT:1.5em と書くこともできますが、これは同じ意味です。
WIDTH は定義されたレイヤーの幅で、500px などの固定値、またはここでは「60%」などのパーセント値にすることができます。この幅はコンテンツの幅のみを指し、マージン、ボーダー、パディングは含まれないことに注意してください。ただし、一部のブラウザではこのように定義されていないため、さらに試してみる必要があります。
2.CSS2ボックスモデル
1996 年の CSS1 の発表以来、W3C 組織は、Web ページ上のすべてのオブジェクトをボックス内に配置し、定義を作成することでこのボックスのプロパティを制御できるようにすることを推奨しています。そしてレイヤー<div>。ボックス モデルは主に、コンテンツ、パディング、ボーダー、マージンの 4 つの領域を定義します。上で説明したサンプル レイヤーは典型的なボックスです。初心者にとっては、margin、background-color、background-image、padding、content、border のレベル、関係、相互影響について混乱することがよくあります。ここにボックス モデルの 3D 概略図を示します。理解しやすく、覚えやすくなると思います。
XHTML+CSSレイアウトを利用する場合、従来のテーブルレイアウトとは異なる考え方と言うべきか、最初は慣れない技術があります。それは補助画像を全て実装するというものです。背景。次のようなもの:
背景: url(images/bg_poem.jpg) #FEFEFE 繰り返しなし右下;
<img> をコンテンツに直接挿入することもできますが、これはお勧めしません。ここでいう「補助絵」とは、ページ上で表現すべき内容ではなく、装飾や間取り、注意喚起などにのみ使用される絵のことを指します。たとえば、フォト アルバムの画像、画像ニュースの画像、および上記の 3D ボックス モデルの画像はすべてコンテンツの一部であり、<img> 要素を使用してページに直接挿入できますが、その他の画像はロゴやタイトルに似ています。画像、およびリスト プレフィックス画像はすべて、バックグラウンド モードまたは他の CSS メソッドを使用して表示する必要があります。
これには 2 つの理由があります。
パフォーマンスを構造から完全に分離し (別の記事「構造からパフォーマンスの分離を理解する」を参照)、CSS を使用してすべての外観とパフォーマンスを制御し、修正を容易にします。
ページをより使いやすく、親しみやすいものにします。たとえば、視覚障害者がスクリーン リーダーを使用する場合、バックグラウンド テクノロジを使用して実装された画像は読み上げられません。