Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
疑似要素によるCSSセレクタ 株式会社ラクス 亀ノ上孝雄
Slide 2
Slide 2 text
目次 1.自己紹介 2.セレクターの種類 3.擬似クラス 4.疑似要素
Slide 3
Slide 3 text
自己紹介 亀ノ上孝雄 / 株式会社ラクス github:totocalcio 趣味:ゲーム、学習、料理
Slide 4
Slide 4 text
疑似要素のセレクター ・・・の前にCSSセレクターについて
Slide 5
Slide 5 text
セレクターの種類 ■基本となるセレクター - 要素・クラス・ID ■属性によるセレクター - a[disabled] , input[type=”text”] ■疑似クラスまたは疑似要素 - a:hover , div::before ■結合子 - p > span , li + li 大きく4種類
Slide 6
Slide 6 text
・擬似クラスを使用すると、基本セレクタでは表現できない、状態に基づいたオブ ジェクトへのスタイルの設定が可能 ・https://www.rakus.co.jp/example#title というURLはフラグメント識別子の #title を含んでいる。上記URLにCSSを適用する場合、target擬似クラスを使用する。 ・子をもたない要素にスタイルを適用する。 疑似クラス a:hover{} input:focus :last-child :not()
Slide 7
Slide 7 text
: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()
Slide 8
Slide 8 text
::after 要素のコンテンツの後に、生成された追加コンテンツを挿入する。 ::before 要素のコンテンツの前に、生成された追加コンテンツを挿入する。 ::first–letter 要素の最初の文字を選択する ::first–line 要素の最初の行を選択する ::placeholder placeholder属性を使用したinputまたはtextarea要素のプレースホルダー 文字列にスタイルを設定する。 ::selection カーソルで選択されたテキストのスタイル 疑似要素
Slide 9
Slide 9 text
::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
Slide 10
Slide 10 text
HTML CSS Result ::before と ::after 【コロンの数について (:before , ::before)】 ::は、疑似要素と疑似セレクターを区別すること を目的とした形式。IE 8のサポートが必要ない 場合は、ダブルコロンを使用する。 【アクセシビリティについて】 ・CSSをオフにすると表示されない ・スクリーンリーダーで読み上げられる
Slide 11
Slide 11 text
::first–letter 【機能】 ブロックレベル要素の最初の行の 最初の文字にスタイルを適用する。 【特徴】 ・インライン要素にはきかない ・先頭の文字が記号の場合は注意 ・利用可能なプロパティは限られて いる HTML CSS Result
Slide 12
Slide 12 text
::first–letter 【機能】 ブロックレベル要素の最初の行の 最初の文字にスタイルを適用する。 【特徴】 ・インライン要素にはきかない ・先頭の文字が記号の場合は注意 ・利用可能なプロパティは限られて いる HTML Result
Slide 13
Slide 13 text
::first-line HTML CSS Result 【機能】 ブロックレベル要素の最初の行にス タイルを適用する。 【特徴】 ・インライン要素にはきかない ・「最初の行」の長さはウィンドウサ イズや要素幅など様々な要因に左 右される。 ・利用可能なプロパティは限られて いる
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
::selection 【機能】 マウスでクリックやドラッグをして選 択したテキストの一部にスタイルを 適用する。 【特徴】 ・唯一のハイライト疑似要素 ・利用可能なプロパティは限られて いる HTML CSS Result
Slide 16
Slide 16 text
::placeholder 【機能】 inputまたはtextarea要素のプレー スホルダー文字列にスタイルを適用 する。 【特徴】 ・アクセシビリティには注意する (色覚、認知機能) HTML CSS Result
Slide 17
Slide 17 text
まとめ ・疑似要素を使用する際にはブラウザでサポートされているか確認する ・疑似要素ではそれぞれ利用できる CSSプロパティが異なる ・疑似要素を扱う際にはアクセシビリティにも気をつける。アクセシビリティに問題 が発生するようならば代替案を検討する
Slide 18
Slide 18 text
参考 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
Slide 19
Slide 19 text
ありがとうございました