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

Transcript

1. 疑似要素によるCSSセレクタ 株式会社ラクス　亀ノ上孝雄
2. 目次 １．自己紹介 ２．セレクターの種類 ３．擬似クラス ４．疑似要素
3. 自己紹介 亀ノ上孝雄 / 株式会社ラクス github:totocalcio 趣味：ゲーム、学習、料理
4. 疑似要素のセレクター ・・・の前にCSSセレクターについて
5. セレクターの種類 ▪基本となるセレクター - 要素・クラス・ID ▪属性によるセレクター - a[disabled] , input[type=”text”] ▪疑似クラスまたは疑似要素 - a:hover , div::before ▪結合子 - p > span , li + li 大きく４種類
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 【機能】 ブロックレベル要素の最初の行にス タイルを適用する。 【特徴】 ・インライン要素にはきかない ・「最初の行」の長さはウィンドウサ イズや要素幅など様々な要因に左 右される。 ・利用可能なプロパティは限られて いる
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. ありがとうございました