CSS

Links †

• マージンと余白
• 脱初心者をめざす人のためのホームページ作成講座
• ホームページ作成入門
• 内部リンク
  • デザイン要素
  • section要素

CSSとは †

　CSS（Cascading Style Sheets：カスケーディング・スタイル・シート）は、HTMLで記述されたWebページのスタイルを効率的に定義するための技術。HTMLで内容を定義し、CSSでスタイルを定義することにより、内容とスタイルを分離することが可能となる。

ボックスモデルの構造 †

マージンと余白 †

マージン（margin）の指定 †

• margin　（値）

     上下左右の４方向について、すべて同じマージンを指定

• margin　（上）　（右）　（下）　（左）

     上下左右のマージンをそれぞれ別に指定
     （例）　margin 10px　5px　10px　5px

• margin-top（値）：上マージンを指定
• margin-bottom（値）：下マージンを指定
• margin-left（値）：左マージンを指定
• margin-right（値）：右マージンを指定

余白（padding）の指定 †

• padding　（値）

     上下左右の４方向について、すべて同じ余白を指定

• adding　（上）　（右）　（下）　（左）

     上下左右の余白をそれぞれ別に指定
     （例）　padding 10px　5px　10px　5px

• padding-top（値）：上の余白を指定
• padding-bottom（値）：下の余白を指定
• padding-left（値）：左の余白を指定
• padding-right（値）：右の余白を指定

枠線（border）の指定 †

線の太さ †

• border-width　（値）

     上下左右の４辺の枠線すべてを、同じ太さに指定する

• border-width　（上）　（右）　（下）　（左）

     上下左右の４辺それぞれの太さを指定する
     （例）　border-width 3px　5px　3px　5px

• border-top-width（値）：上枠線の太さを指定
• border-bottom-width（値）：下枠線の太さを指定
• border-left-width（値）：左枠線の太さを指定
• border-right-width（値）：右枠線の太さを指定

線のスタイル †

• border-style　（スタイル）

     上下左右４辺の枠線に共通のスタイルを指定

  • none　 ： 枠線なし
  • solid ： 実線
  • double 　： 二重線
  • dotted ： 点線

• border-style　（上）　（右）　（下）　（左）

     上下左右の４辺それぞれにスタイルを指定

• border-top-style（スタイル）：上枠線にスタイルを指定
• border-bottom-style（スタイル）：下枠線にスタイルを指定
• border-left-style（スタイル）：左枠線にスタイルを指定
• border-right-style（スタイル）：右枠線にスタイルを指定

線の色 †

• border-color　（色）

     上下左右４辺の枠線に同一の色を指定

• border-color　（上）　（右）　（下）　（左）

     上下左右の４辺それぞれに色を指定

• border-top-color（色）：上枠線に色を指定
• border-bottom-color（色）：下枠線に色を指定
• border-left-color（色）：左枠線に色を指定
• border-right-color（色）：右枠線に色を指定

サンプル †

• box-model.html：HTMLファイル
• ：GIFファイル