【66-2】ユーザーアクション擬似クラス :active :hover

今回からユーザーアクション擬似クラスを見ていきましょう。 ユーザーアクション擬似クラスは、ユーザーの操作の状態によって要素をセレクトするための擬似クラスです。 ですのでユーザー側の操作が必要な <a>要素や、フォーム関連の要素などに使うことが多いです。 今回はまず、:active :hover を見てみましょう。 ちなみに ユーザーアクション擬似クラスは <a>要素やフォーム関連の要素によく使わ...

【66-1】ロケーション擬似クラス :target :target-within :local-link

ロケーション擬似クラスの続きです。 今回は、:target :target-within :local-link を使ってみます。 擬似クラスって何？というかたは、こちらをご覧ください。 【66】擬似クラスと疑似要素（2つの違いとそれぞれの特徴） 擬似クラスも含めた セレクター一覧いちらんはこちらです。 【65】CSSのセレクターを整理しよう（セレクター 一覧） 本日のINDEX :target（リンク先の要素をセレクト） :t...

【66-1】ロケーション擬似クラス :link :visited :any-link

今回から擬似クラスについて、1つずつ見ていきましょう。 擬似クラスは、基本的なセレクター（エレメンタルセレクターや属性セレクター）の後にくっつけて、その要素の「ある状態」をセレクトすることができるモノ。 いっぱいある擬似クラスの中で、まずはロケーション擬似クラスを見てみよう。 これは、リンクの状態（今いる位置、リンク履歴など）によって要素をセレクトします。 ですので href 属性を持つ <a>要...

【66】擬似クラスと疑似要素（2つの違いとそれぞれの特徴）

今回から、疑似クラス や 疑似要素 について見ていきましょう。 今回はまず全体像の話。この↑2つの違いと それぞれの特徴をまとめてみます。 疑似クラス ・ 疑似要素は、今までやってきた エレメンタルセレクターや 属性セレクターにくっつけて使うことで、より詳細なセレクターを作ることができます。 そして、この2つを使うことで HTML や CSS をスッキリ短くすることもできるんです。 本日のINDEX 擬似ク...

（ちょっとメモ）名前空間（ネームスペース）とCSSセレクター

名前空間（name space）って、プログラマーのかたには聞き慣れたコトバかもですが、主にデザイン業務の私には、聞いたことが無い世界でした（汗）。 CSSのセレクターの仕様書では「名前空間」に属する要素を対象にしたセレクターの書き方が載っています。 今回はとりあえず、それが「どんなものなのか」だけ、触れておこうと思います。 本日のINDEX CSSセレクターでの名前空間（ネームスペース） CSSセレクタ...

【65-3】クラスセレクター（.）と IDセレクター（#）

クラスセレクターと IDセレクターは、両方とも Level 1 からの、すっごい古くからあるセレクターなんですが、仕様書 Selectors Level 3から、「属性」セレクターに分類されているんです。 たしかに、class属性や ID属性を使ったセレクターだもんね。 class属性と ID属性はグローバル属性。HTMLのどの要素にも共通で使える属性です。 クラスセレクターと IDセレクターは、今まで何度もサンプルで登場したセレクターです...

【65-3】属性セレクター [att=&quot;val&quot; i] [att=&quot;val&quot; s]

属性セレクター（attribute selector）の続きです。 今回は、属性値の大文字小文字の区別を「する・しない」を指定できるセレクターです。 本日のINDEX 属性値の大文字・小文字の区別 [att="val" i] att属性の値の大文字・小文字は区別しない [att="val" s] att属性の値の大文字・小文字も一致する 参考： ・Selectors Level 4 W3C Working Draft ・CSS セレク...

【65-3】属性セレクター [att^=&quot;val&quot;] [att$=&quot;val&quot;] [att*=&quot;val&quot;]

属性セレクター（attribute selector）の続きです。 今回は、部分照合属性セレクター（Substring matching attribute selectors）を使ってみます。 本日のINDEX 「部分照合」属性セレクター [att^="val"]（att属性があって、値の先頭がこの文字から始まる） [att$="val"]（att属性があって、値の最後がこの文字で終わる） [att*="val"]（att属性があって、値のどこかにこ...

【65-3】属性セレクター [att] [att=&quot;val&quot;] [att~=&quot;val&quot;] [att =&quot;en&quot;]

今回から属性セレクター（attribute selector）を使ってみよう。 属性セレクターは、要素に ・その「属性（attribute）」があるかどうか ・その属性の「値」がどうなっているか で要素を詳細に指定するセレクターです。 今回はその中の、属性存在＆属性値セレクター（Attribute presence and value selectors）って呼ばれてるのを使ってみよう。 これはセレクターLevel 2（わりと初期）からあるセレクターです。 ...

【65-2】結合子を使うセレクター（E F, E &gt; F, E + F, E ~ F）

今回は「結合子」を使ったセレクターを使ってみよう。 単独で使えるセレクター同士を「結合子」でつなげば、よりピンポイントに要素を指定できます。 本日のINDEX 結合子（Combinators）で要素をより詳しく指定する 子孫結合子（E F）は子孫全部が対象 子結合子（E > F）は子要素の場合のみ 隣接兄弟結合子（E + F）は兄弟同士で直後のものだけが対象 一般兄弟結合子（E ~ F）は兄弟同士であとにあ...

（ちょっとメモ）「,」で区切る「セレクターリスト」

セレクターの記事の途中ですが、今回はセレクターリスト（selector list）についてメモっておきます。 けっこうよく使うし、知っておくと便利です。 本日のINDEX 「,」で区切るセレクターリストを使うと便利！ 無効なセレクターがあるとリスト全部が無効になるよ 寛容なセレクターリストの :is( ) と :where( ) 参考： ・Selectors Level 4 W3C Working Draft ・CSS セレクター...

【65-1】エレメンタルセレクター（要素名で指定するセレクター）

今回から CSSのセレクター（Selectors）を1つずつ見ていきましょう。 今回は、 ・要素名（HTMLタグの名前）で指定するセレクター ・すべての要素を指定するセレクター（ユニバーサルセレクターと言います） の2種類です。 2つ合わせて W3C仕様書ではエレメンタルセレクター（Elemental selectors）と呼んでます。 そもそもセレクターってなんだ？というかたは、前回の 【65】CSSのセレクターを整理しよう（セ...

【65】CSSのセレクターを整理しよう（セレクター 一覧）

今回から、CSSのセレクター（Selectors）について まとめていこうと思います。 ずいぶん前の記事 【3】id とか classって何？（セレクタの「種類」を知っておこう）で ざっくりと セレクターの種類について書いていますが、もっと詳しくサンプルを作って試していこうと思います。 今回はまずは「セレクター 一覧いちらん」です。 本日のINDEX CSSのセレクターとは CSSのセレクター一覧 エレメン...

【64-11】アイテム配置を一括指定する place-itemsショートハンド

place-itemsショートハンドプロパティは、 ・justify-itemsプロパティ（主軸） ・align-itemsプロパティ（交差軸） の2つを一括で指定するショートハンドです。 コンテナ側に指定します。 本日のINDEX place-itemsショートハンドの値 値が1個の場合の場合の注意点 place-itemsを使ってみた（サンプル） Grid Layout での place-itemsショートハンド Flexbox での place-itemsショート...

【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)

align-selfプロパティは アイテムが占めるエリア内での交差軸方向の位置を個別に決めるものでした。 align-selfプロパティではアイテムに指定してその1個だけに効きましたが、今回の align-itemsプロパティは、コンテナ側に指定し、同じ指定をアイテム全員に効かすことができます。 交差軸（ブロック軸）については、 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください 本...

【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)

justify-selfプロパティでは指定したアイテム1個だけに効きましたが、 今回の justify-itemsプロパティは、同じ主軸方向の位置指定をアイテム全員にいっせいに効かすことができます。 ですのでコンテナ側に指定します。 主軸（インライン軸）については、 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください 本日のINDEX justify-itemsプロパティの値 legacyとい...

【64-8】アイテム個別の配置を一括指定する place-selfショートハンド

place-selfショートハンドプロパティは、 ・justify-selfプロパティ（主軸） ・align-selfプロパティ（交差軸） の2つを一括で指定するショートハンドです。 アイテム側に指定し、アイテムを個別に指定します。 本日のINDEX place-selfショートハンドの値 値が1個の場合の場合の注意点 place-selfを使ってみた（サンプル） Grid Layout での place-selfショートハンド Flexbox での p...

【64-7】アイテム個別の配置を指定する align-self (交差軸方向)

align-selfプロパティは、コンテナ内のアイテム側に指定し、アイテムが占めるエリア内での交差軸方向の位置を決めます。 align-content と違って、アイテムを個別に指定するプロパティです。 アイテムの margin を調整するような感じです。 交差軸（ブロック軸）については、 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください。 本日のINDEX align-selfプロパ...

【64-6】アイテム個別の配置を指定する justify-self (主軸方向)

justify-selfプロパティは、コンテナ内のアイテム側に指定し、そのアイテムが占めるエリア内での主軸方向の位置を決めます。 justify-content と違って、アイテムを1つずつ個別に指定するプロパティです。 アイテムの margin を調整するような感じです。 主軸（インライン軸）については、 【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください 本日のINDEX justif...

【64-5】アイテムの配置・分布を指定するショートハンド place-content

place-contentショートハンドプロパティは、前回と前々回の ・justify-contentプロパティ（主軸） ・align-contentプロパティ（交差軸） の2つを一括で指定するショートハンドです。 コンテナ側に指定します。 本日のINDEX place-contentショートハンドの値 値が1個の場合の場合の注意点 place-contentを使ってみた（サンプル） Grid Layout での place-contentショートハンド Flexbo...