Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンドLT会 - vol.4

94a1ac9357f8815adae0dd8b7760a827?s=47 takao
September 15, 2021
4.9k

フロントエンドLT会 - vol.4

94a1ac9357f8815adae0dd8b7760a827?s=128

takao

September 15, 2021
Tweet

Transcript

  1. 疑似要素によるCSSセレクタ 株式会社ラクス 亀ノ上孝雄

  2. 目次 1.自己紹介 2.セレクターの種類 3.擬似クラス 4.疑似要素

  3. 自己紹介 亀ノ上孝雄 / 株式会社ラクス github:totocalcio 趣味:ゲーム、学習、料理

  4. 疑似要素のセレクター ・・・の前にCSSセレクターについて

  5. セレクターの種類 ▪基本となるセレクター - 要素・クラス・ID ▪属性によるセレクター - a[disabled] , input[type=”text”] ▪疑似クラスまたは疑似要素

    - a:hover , div::before ▪結合子 - p > span , li + li 大きく4種類
  6. ・擬似クラスを使用すると、基本セレクタでは表現できない、状態に基づいたオブ ジェクトへのスタイルの設定が可能 ・https://www.rakus.co.jp/example#title というURLはフラグメント識別子の #title を含んでいる。上記URLにCSSを適用する場合、target擬似クラスを使用する。 ・子をもたない要素にスタイルを適用する。 疑似クラス a:hover{}   input:focus   :last-child   :not()

  7. :active :any-link :blank :checked :current (en-US) :default :defined :dir() :disabled

    :drop :empty :enabled :first :first-child :first-of-type :fullscreen :future (en-US) :focus :focus-visible :focus-within :has() :host :host() (en-US) :host-context() :hover :indeterminate :in-range :invalid :is() :lang() :last-child :last-of-type :left :link :local-link (en-US) :not() :nth-child() :nth-col() (en-US) :nth-last-child() :nth-last-col() (en-US) :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :past (en-US) :placeholder-shown :read-only :read-write :required :right :root :scope :target :target-within (en-US) :user-invalid (en-US) :valid :visited :where()
  8. ::after 要素のコンテンツの後に、生成された追加コンテンツを挿入する。 ::before 要素のコンテンツの前に、生成された追加コンテンツを挿入する。 ::first–letter 要素の最初の文字を選択する ::first–line 要素の最初の行を選択する ::placeholder placeholder属性を使用したinputまたはtextarea要素のプレースホルダー

    文字列にスタイルを設定する。 ::selection カーソルで選択されたテキストのスタイル 疑似要素
  9. ::after (:after) ::backdrop ::before (:before) ::cue ::cue-region (en-US) ::first-letter(:first-letter) ::first-line

    (:first-line) ::grammar-error ::marker ::part() ::placeholder ::selection ::slotted() ::spelling-error
  10. HTML CSS Result ::before と ::after 【コロンの数について (:before , ::before)】

    ::は、疑似要素と疑似セレクターを区別すること を目的とした形式。IE 8のサポートが必要ない 場合は、ダブルコロンを使用する。 【アクセシビリティについて】 ・CSSをオフにすると表示されない ・スクリーンリーダーで読み上げられる
  11. ::first–letter 【機能】 ブロックレベル要素の最初の行の 最初の文字にスタイルを適用する。 【特徴】 ・インライン要素にはきかない ・先頭の文字が記号の場合は注意 ・利用可能なプロパティは限られて いる HTML

    CSS Result
  12. ::first–letter 【機能】 ブロックレベル要素の最初の行の 最初の文字にスタイルを適用する。 【特徴】 ・インライン要素にはきかない ・先頭の文字が記号の場合は注意 ・利用可能なプロパティは限られて いる HTML

    Result
  13. ::first-line HTML CSS Result 【機能】 ブロックレベル要素の最初の行にス タイルを適用する。 【特徴】 ・インライン要素にはきかない ・「最初の行」の長さはウィンドウサ

    イズや要素幅など様々な要因に左 右される。 ・利用可能なプロパティは限られて いる
  14. None
  15. ::selection 【機能】 マウスでクリックやドラッグをして選 択したテキストの一部にスタイルを 適用する。 【特徴】 ・唯一のハイライト疑似要素 ・利用可能なプロパティは限られて いる HTML

    CSS Result
  16. ::placeholder 【機能】 inputまたはtextarea要素のプレー スホルダー文字列にスタイルを適用 する。 【特徴】 ・アクセシビリティには注意する (色覚、認知機能) HTML CSS

    Result
  17. まとめ ・疑似要素を使用する際にはブラウザでサポートされているか確認する ・疑似要素ではそれぞれ利用できる CSSプロパティが異なる ・疑似要素を扱う際にはアクセシビリティにも気をつける。アクセシビリティに問題 が発生するようならば代替案を検討する

  18. 参考 https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements https://drafts.csswg.org/css-pseudo-4/ https://www.sitepoint.com/premium/books/css-master-3rd-edition/read/1/ https://w3g.jp/blog/reader_pseudo-elements_readable https://parashuto.com/rriver/development/pseudo-elements-with-double-and -single-colons

  19. ありがとうございました