London-Net - Web Designers

css

【css用語】

  • cssとは
  • Cascading Style Sheets
  • ■HTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、W3Cによる勧告の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
  • ■CSS は HTML で表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる ユーザーエージェント、ウェブサイト制作者、ユーザがそれぞれ定義した CSS のもたらす効果を重ね合わせることができる。
  • ■しかし、拡張・修正の続いている CSS 仕様の全てを完全に実装しているユーザーエージェントは事実上皆無といってよく、実際シェアで多数を占めるユーザエージェントは部分対応にすぎない。しかし実用上支障のないレベルの実装はされてきており、なおかつ表現のお互いの互換性についても考慮されてきている。
  • ■スタイルの情報は読み込む内容やユーザーエージェントの設定の二ヶ所に記載できる。またユーザーエージェントも独自のスタイルを持っている。
  • ■作成者スタイルシートはマークアップ文書の中に直接記述するか、別文書として読み込ませる形で利用される。CSS の利便性を最大限発揮する為に、別文書として読み込ませる事が推奨されている。

【cssタグ】

  • 色
  • { color: color; }
    { color: #ff0000; }
    { color: #f00; }
    { color: rgb(255, 0, 0); }
    { color: rgb(100%, 0%, 0%); }
  • 【マージン】※ボーダーの外側の余白
  • margin: 1px;
    /上下左右1px
    margin: 1px 3px;
    /上下1px 左右3px
    margin: 1px 3px 6px;
    /上1px 左右3px 下6px
    margin: 1px 3px 6px 9px;
    /上1px 右3px 下6px 左9px
    margin-top:
    /上を設定
    margin-right;
    /右を設定
    margin-bottom:
    /下を設定
    argin-left:
    /左を設定
  • 【パディング】※ボーダーの内側の余白
  • padding: 1px;
    /上下左右1px
    padding: 1px 3px;
    /上下1px 左右3px
    padding: 1px 3px 6px;
    /上1px 左右3px 下6px
    padding: 1px 3px 6px 9px;
    /上1px 右3px 下6px 左9px
    padding-top:
    /上を設定
    padding-right:
    /右を設定
    padding-bottom:
    /下を設定
    padding-left:
    /左を設定
  • 【ボーダー】
  • border: width,style,color
    /枠線上下左右すべて設定
    border-top: width style color
    /枠線上のみ設定
    border-right: width style color
    /枠線右のみ設定
    border-bottom: width style color
    /枠線下のみ設定
    border-left: width style color
    /枠線左のみ設定
  • 【ボーダースタイル】
  • border-style: top right bottom left
    /枠線のスタイル上下左右すべて設定
    border-top-style: style
    /枠線のスタイルを上のみ設定
    border-right-style: style
    /枠線のスタイルを右のみ設定
    border-bottom-style: style
    /枠線のスタイルを下のみ設定
    border-left-style: style
    /枠線のスタイルを左のみ設定
  • 【ボーダーカラー】
  • border-color: color
    /枠線の色上下左右すべて設定
    border-top-color: color
    /枠線の色を上のみ設定
    border-right-color: color
    /枠線の色を右のみ設定
    border-bottom-color: color
    /枠線の色を下のみ設定
    border-left-color: color
    /枠線の色を左のみ設定
  • 【リスト】
  • list-style:: type position image
    /リストtype position imageをすべて設定
    list-style-type: type
    /マーカーの形を設定
    ・disc（黒丸）
    ・circle（白丸）
    ・square（四角）
    ・decimal（1, 2, 3）
    ・lower-roman（i, ii, iii）
    ・upper-roman（I, II, III）
    ・lower-alpha（a, b, c）
    ・upper-alpha（A, B, C）
    ・decimal-leading-zero（01, 02, 03）
    ・lower-greek（α、β、γ）
    ・upper-greek（Α、Β、Γ）
    ・lower-latin（小文字ラテン文字）
    ・upper-latin（大文字ラテン文字）
    ・hebrew（ヘブライ数字）
    ・armenian（アルメニア数字）
    ・georgian（グルジア数字）
    ・cjk-ideographic（一、二、三）
    ・hiragana（あ、い、う）
    ・katakana（ア、イ、ウ）
    ・hiragana-iroha（い、ろ、は）
    ・katakana-iroha（イ、ロ、ハ）
    ・none（なし）
    ・inherit（継承）
    list-style-position: position
    /マーカーの位置を設定　outside（外側）、inside（内側）、inherit（継承）
  • 【背景】
  • background: color image repeat attachment position
    /背景をすべて設定
    border-top-color: color
    /枠線の色を上のみ設定
    border-right-color: color
    /枠線の色を右のみ設定
    border-bottom-color: color
    /枠線の色を下のみ設定
    border-left-color: color
    /枠線の色を左のみ設定
  • 【フォント】
  • font:
    styleやvariantなどを一括で指定
    font-style: style
    /フォントのスタイルを設定　normal（通常）, italic（イタリック）, oblique（斜め）
    font-variant: variant
    /アルファベットの小文字を大文字に設定　normal（通常）, small-caps（大文字）
    font-weight: weight
    /フォントの太さを設定
    font-size: size
    /フォントの大きさを指定