MDN Web docs ウェブ開発を学ぶ (CSS – Styling the Web)

3月 5, 2024

MDNで、CSSの基礎を再確認した時の覚書です。普段あまり使わないタグを中心に、書き留めておきます。

CSS

CSSの第一歩

  • CSSリファレンス
  • list-style-type
    • 文字を指定できる
  • ディセンダント・コンビネーター
    • これは２つの異なるセレクタのあいだにスペースを設けて、要素を限定させる
  • adjacent sibling combinator：アジェイセント・シブリング・コンビネーター
    • セレクタ同士の間に + を入れ、前要素の直後の要素に限定させる
  • 状態に基づいてスタイリングする
    • a:link, a:visited, a:hover など
  • calc() CSS内で簡単な計算
    • calc(90% - 30px)
  • transform
    • rotate()
  • background-image
  • color
    • rgb(), rgba(), hsl(), hsla()
  • @rules
    • @import, @media
  • ショートハンドプロパティ(shorthand properties)
    • 一行に複数のプロパティの値を設定できるもの
    • font, background, padding, border, margin
  • カスケード、詳細度、継承
  • 継承の制御 inherit, initial, unset
    • revert 新しい値であるため、ブラウザのサポートは制限されている
  • 詳細度の計算
    • 1000: style属性、100: IDセレクター、10: クラスセレクター・属性セレクター・疑似クラス、1: 要素セレクター、疑似要素
    • 低レベルの詳細度でスコアを稼いでも、高レベルのスコア一つが勝つ
  • !important 低レベルでも、指定したプロパティ値を有効とする
  • セレクター一覧
    • 要素・クラス・ID
    • 属性
      • a[title] {}
      • a[href="https://example.com"] {}
    • 擬似クラス・疑似要素
      • a:hover {} 擬似クラス
      • p::first-line {} 疑似要素
    • 結合子
      • 子結合子 (>)
        • article > p {} <article>要素の直接の子である段落
      • 子孫結合子 ( )
        • article p {}
      • 隣接兄弟結合子 (+) 1つ目
      • 一般兄弟結合子 (~) それ移行
    • 属性セレクター
      • [attr] [attr=value] [attr~=value1 value2] (value1 and value2) [attr!= value1 vallue2] (value1 or value2)
      • [attr^=value] (valueで始まる] [attr!=value] (valueで終わる) [attr*=value] (文字列の任意の場所のvalue)
    • [...i] 閉じカッコの前のiで、大文字小文字の区別なし
      • 新しい[….s] は、通常大文字小文字が区別されないコンテキストで、区別するようにする。ただし、ブラウザのサポートがまだ多くない。
    • ::before ::after
      • content プロパティと共に使用。content の値を挿入
      • CSSで矢印 のように使われることがある
    • :nth-child()
      • table tr:nth-child(2n) 1行置きにセレクト
span.class-name と .class-name spanの違い

この2つの違いが理解できていない。そもそも後者の構文は合っている？

CSSの構成要素

テキストの装飾

  • ウェブセーフフォントのリスト
  • font-style normal, italic, oblique
  • font-wight normal, bold, lighter, bolder, 100～900
  • text-transform none, uppercase, lowercase, full-width
  • text-decoration none, underline, overline, line-through
    • text-decoration-line, text-decoration-style, text-decoration-color
  • text-shadow
  • text-align left, right, center, justify
    • justifyは慎重に検討する必要がある。hyphensなどの代替案も検討
  • line-height
  • letter-spacing word-spacing
  • list-style-type list-style-position list-style-image
    • list-style-image より background-image プロパティファミリーを使うほうが良い
  • <ol start="4" reversed>
    • <li value="6">
  • @font-face

CSSレイアウト

  • display block inline inline-block flex gird float table
  • position static relative absolute fixed sticky
  • 段組みレイアウト column-count column-width
  • flex-flow flex-directionflex-wrap の一括指定
    • flex flex-grow flex-shrink flex-basis の一括指定
    • align-items
    • align-self
    • justify-content flex-start flex-end center space-around space-between
  • grid grid-template-columns gap grid-auto-rows
    • grid-column-start grid-column-end grid-row-start grid-row-end
    • grid-column grid-row
    • grid-template-areas grid-area
  • position static relative absolute fixed sticky
    • z-index
  • multicol column-count column-width column-gap column-rule
    • column-rule-color column-rule-style column-rule-width
    • break-inside
      • page-break-inside (古いプロパティ)
  • Responsive Design
    • media query
      • @media media-type and (media-feature-rule) {}
        • media-type all print screen speech
        • media-feature-rule
          • width height min-* max-*
          • orientation portrait landsacape
          • hover pointer
    • multicol flex grid
    • picture srcset
    • responsive typograpy
    • meta viewport
      • initial-scale height minimum-scale maximum-scale user-scalable
  • ブラウザで機能がサポートされているか？　https://caniuse.com/

プログラム開発

Posted by iwadjp