HTML関連

Web技術関連

用語

  • 置換要素 replaced element:要素の内容がドキュメントの内容では直接表せないものと置き換えられる要素。コンテンツがない。例)img, input
  • 非置換要素 nonreplaced element:要素自体が表示されるもの。例)span
  • ブロックレベル要素:親要素のコンテンツエリアを埋める要素。要素ボックスの前後に改行を生成する。例)p, div
  • インラインレベル要素:行の流れを分断することなく、テキスト行に要素ボックスを生成する。要素ボックスの前後に改行を生成しない。例)a, strong, em

一般記事

  • http://jp.cssez.com/
    • CSSEZは、短時間で簡単にCSSデザインが作成できる、オンラインCSSメーカーです。

入門サイト

ブラウザ対応

Bootstrap

Tips/サンプル

Flexbox

ブラウザスタイルの初期化

  • 参照:http://code.nanigac.com/source/view/134
    *{
       margin: 0;
       padding: 0;
       background-color: transparent;
       color: black;
       font-size: medium;
       font-family: Verdana, Arial, "ヒラギノ角ゴ Pro W3", "Osaka", "MS P ゴシック", san-serif;
    }

セレクタの種類

  • 基本のセレクタ
    body,h1{プロパティ名:値}
    *{ } すべてに適用
  • idセレクタ
    div#header { } divタグの id="header" の要素に適用
    #header{} すべてのタグの id="header" 要素に適用
  • クラスセレクタ
    div.hoge{} class="hoge" の指定のある要素に適用
    div[class="hoge"] {} 別表記
    .hoge{} すべてのclass="hoge"指定のある要素に適用
  • 疑似クラスセレクタ
    a:visited すでに訪れたことのあるリンク
    • その他、:hover, :focus, :active など
  • 子孫セレクタ
    A B {} Aタグの中のBタグの要素に適用
  • 擬似要素 セレクタの最後に付ける
    • :first-letter
    • :first-line
    • :before
    • :after
  • 属性セレクタ
    h1[class] {} h1タグでclass属性を持っているものを選択
    div[id="header"] {} divタグの id="header" の要素に適用

セレクタの詳細度(specificity)

  • 複数のセレクタ指定で同じ要素に複数のスタイル指定が競合した場合は、セレクタの詳細度が最も詳細なスタイルが適用される。
  • 詳細度の高さは ID > クラス、属性選択、疑似クラス > 要素 (p.66)

コンビネータ

  • 子コンビネータ child combinator: 子供の要素を指定 例)h1 > strong{}
  • 隣接コンビネータadjacent-sibling combinator: 兄弟の要素を指定 例)h1+p {}

プロパティの種類

  • 基本書式=<名前>:<値>;
  • margin:0;
  • color:#fff;
  • background:#fff;
  • display:none; //ある要素を表示させたくないとき
  • margin, border, padding, height, width の関係
cssbox.png

コメント

  • コメントは /* */で囲む

添付ファイル: filecssbox.png 296件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-08-11 (木) 18:43:45 (10h)