mozilla
Your Search Results

    Boxes

    これは CSS Getting Started チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。

    ボックスについて

    ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。

    中央に、要素(elment)がその内容を表示するのに必要なスペースがあります。その周りに パディング(padding) があり、その周りに ボーダー(border) があります。その周りには マージン(margin) があって、他要素とその要素を隔てています。

    マージン

    ボーダー

    パディング

    要素

    薄い灰色がレイアウトの部品を示します。

     

     

     

    要素nt

    ブラウザではこう見えます。

    パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。

    彩色

    パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。

    マージン

    ボーダー

    パディング

    要素

    要素の背景色は緑です。

     

     

     

    要素

    ブラウザではこう見えます

    ボーダー

    ボーダーを使って、要素を線や枠囲みで装飾できます。

    要素の境界線をすべて同じにするには、border プロパティを使います。幅(画面表示されるときの単位は通常 pixel です)、スタイル、色を定義します。

    選べるスタイル:

    solid
    dotted
    dashed
    double
    inset
    outset
    ridge
    groove

    また、スタイルを nonehidden にして、明示的にボーダーを消したり、色を transparent にして、レイアウトを変えずにボーダーを透明にしたりできます。

    一辺ずつボーダーを定義するには、次のプロパティを使います: border-topborder-rightborder-bottomborder-left。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。

    次のルールは、見出し要素の背景色と上辺のボーダーを定義します:

    h3 {
      border-top: 4px solid #7c7; /* mid green */
      background-color: #efe;     /* pale green */
      color: #050;                /* dark green */
    }

    結果は次のようになります:

    スタイルつきの見出し

    次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:

    img {border: 2px solid #ccc;}
    

    結果は次のようになります:

    画像: Image:Blue-rule.png

    マージンとパディング

    マージンとパディングで要素の位置を調整し、周りに余白を作ります。

    margin プロパティと padding プロパティでそれぞれ、マージンの幅、パディングの幅を設定します。

    幅を一つだけ記述すると、要素の全ての枠(top(上辺)、right(右辺)、bottom(下辺)、left(左辺))に適用されます。

    幅を2つ記述すると、1番目が top と bottom に、2番めが right と left に適用されます。

    4つすべての幅を定義するには、次の順番で記述します: top、 right、bottom、left

    次のルールは、remark クラスを持つ段落に、四辺すべてを囲むような赤い枠を与えます。

    パディングで囲むことで、テキストから枠が少し離れます。

    左マージンは段落を他のテキストからインデントします:

    p.remark {
      border: 2px solid red;
      padding: 4px;
      margin-left: 24px;
      }
    

    結果は次のようになります:

    ここは通常の段落です。

    ここは remark 用の段落です。

    さらに詳しく

    マージンとパディングで要素の配置方法を調整すると、そのスタイルのルールとブラウザのデフォルトが、複雑な方法で相互作用します。

    ブラウザによって、要素の配置方法が異なります。スタイルシートで変えなければ、結果は同じに見えるかもしれません。このため、時折スタイルシートのもたらす結果に驚くことがあります。

    望む結果を得るには、文書のマークアップを変更する必要があるかもしれません。このチュートリアルの次のページで、このことについてもっと触れています。

    パディング、マージン、ボーダーについての詳しい情報は、リファレンスの ボックスモデル をご覧ください。

    実習: ボーダーの追加

    CSS ファイル style2.css を編集します。次のルールを追加して、見出しのそれぞれで、ページを横切る線を描くようにしてください:

    h3 {border-top: 1px solid gray;}
    

    前のページのチャレンジを終えていれば、そこで作ったルールを編集するか、次の新しいルールを追加して、各リスト項目の真下にスペースを置くようにしてください:

    li {
      list-style: lower-roman;
      margin-bottom: 8px;
      }
    

    ブラウザを更新すると次の結果になります:

    (A) The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    (B) Numbered paragraphs

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

    チャレンジ

    スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:

    (A) The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    (B) Numbered paragraphs

    . . .

    (幅や色を正確に同じにする必要はありません。)

    このチャレンジの解答を見る。

    さて次は?

    マージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の レイアウト を変えます。

    ドキュメントのタグと貢献者

    Contributors to this page:
    最終更新者: teoli,