CSS(Cascading Style Sheets)
 
 
 

目 次

Links


CSSとは

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

ボックスモデルの構造

box-gif.gif

マージンと余白

マージン(margin)の指定

  • margin (値)
       上下左右の4方向について、すべて同じマージンを指定
  • margin (上) (右) (下) (左)
       上下左右のマージンをそれぞれ別に指定
       (例) margin 10px 5px 10px 5px
  • margin-top(値):上マージンを指定
  • margin-bottom(値):下マージンを指定
  • margin-left(値):左マージンを指定
  • margin-right(値):右マージンを指定

余白(padding)の指定

  • padding (値)
       上下左右の4方向について、すべて同じ余白を指定
  • adding (上) (右) (下) (左)
       上下左右の余白をそれぞれ別に指定
       (例) padding 10px 5px 10px 5px
  • padding-top(値):上の余白を指定
  • padding-bottom(値):下の余白を指定
  • padding-left(値):左の余白を指定
  • padding-right(値):右の余白を指定

枠線(border)の指定

線の太さ

  • border-width (値)
       上下左右の4辺の枠線すべてを、同じ太さに指定する
  • border-width (上) (右) (下) (左)
       上下左右の4辺それぞれの太さを指定する
       (例) border-width 3px 5px 3px 5px
  • border-top-width(値):上枠線の太さを指定
  • border-bottom-width(値):下枠線の太さを指定
  • border-left-width(値):左枠線の太さを指定
  • border-right-width(値):右枠線の太さを指定

線のスタイル

  • border-style (スタイル)
       上下左右4辺の枠線に共通のスタイルを指定
    • none  : 枠線なし
    • solid : 実線
    • double  : 二重線
    • dotted : 点線
  • border-style (上) (右) (下) (左)
       上下左右の4辺それぞれにスタイルを指定
  • border-top-style(スタイル):上枠線にスタイルを指定
  • border-bottom-style(スタイル):下枠線にスタイルを指定
  • border-left-style(スタイル):左枠線にスタイルを指定
  • border-right-style(スタイル):右枠線にスタイルを指定

線の色

  • border-color (色)
       上下左右4辺の枠線に同一の色を指定
  • border-color (上) (右) (下) (左)
       上下左右の4辺それぞれに色を指定
  • border-top-color(色):上枠線に色を指定
  • border-bottom-color(色):下枠線に色を指定
  • border-left-color(色):左枠線に色を指定
  • border-right-color(色):右枠線に色を指定

サンプル



添付ファイル: fileback.gif 218件 [詳細] fileb-test.JPG 69件 [詳細] filetest1.html 156件 [詳細] filecss-a.html 98件 [詳細] filebox-gif.gif 131件 [詳細] filebox-model.html 793件 [詳細] filep2.JPG 72件 [詳細] filep1.JPG 61件 [詳細] fileb3.JPG 59件 [詳細] fileb2.JPG 64件 [詳細] fileb4.JPG 73件 [詳細] filem1.jpg 65件 [詳細] filem2.JPG 63件 [詳細] fileb1.JPG 72件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-09-26 (火) 14:27:45 (658d)