CSS3の新機能を学ぶフロントエンド #CSS

CSS3の現状

新しいCSS3機能には互換性の問題があります。
PCよりも優れたモバイルサポート
継続的な改善
比較的幅広い用途
この段階で学ぶべき主なこと：セレクタやボックスモデルなどの機能の追加

, CSS3の新しいセレクタ

CSS3では、対象となる要素をより簡単かつ自由に選択できるセレクタが追加されました。

プロパティセレクタ
構造擬似クラス・セレクタ
擬似要素セレクタ

プロパティセレクター

属性セレクタは、文字通り、タグ内の属性に基づいて要素を選択します。

属性セレクタは、文字通り、タグ内の属性に基づいて要素を選択します。
属性セレクタは、特定の属性に基づいて要素を選択することができます。これにより、classセレクタやidセレクタに頼ることなく要素を選択することができます。
属性セレクタは、カスタム属性を選択することもできます。
**注: **クラス・セレクタ、属性セレクタ、および重み10を持つ擬似クラス・セレクタ。コード例：

 /* タイプのみを選択する=text テキストボックスの入力を選択する。*/
input[type=text] {
 color: pink;
}
/* 最初にdivで、次にclass属性を持ち、属性の値がアイコンで始まっていなければならない要素を選択する。*/
div[class^=icon] {
 color: red;
}
/* 最初にセクション、次にclass属性を持ち、値がdataで終わる要素を選択する。*/
section[class$=data] {
 color: blue;
}

構造擬似クラス・セレクタ

構造擬似クラス・セレクタは、文書の構造に基づいて要素を選択し、親セレクタに基づいて子要素を選択するためによく使われます。

E:first-child

親要素Eの最初の子要素にマッチします。

 <style>
 ul li:first-child{
 background-color: red;
 }
 </style>
 <ul>
 <li>リスト項目1</li>
 <li>リスト項目2</li>
 <li>リスト項目3</li>
 <li>リスト項目4</li>
 </ul>

E:last-childは 最後のliタグを選択します。

E:nth-child(n)

親のn番目の要素にマッチ

親要素の2番目の子にマッチします。
ul li:nth-child(2){} 親要素が奇数である子要素にマッチ： oddは 奇数のキーワード
ul li:nth-child(odd){} 親要素が偶数の通し番号を持つ子要素にマッチ：偶数
親要素の最初の3つの子にマッチします： ul li:nth-child(even){}

よく使われる数式：数式は死語ではありません。ここに列挙したのは、パターンを探してコードを理解できるようにし、機能的なニーズに合ったコードを書けるようにするためです。よく使われる構造擬似クラス・セレクタは次のとおりです： nth-child(n) {...}。

E:nth-child :nth-of-type

<style>
 ul li:nth-child(2){
 /* フォントが赤くなる*/
 color: red;
 }
 ul li:nth-of-type(2){
 /* 背景が緑色になる。*/
 background-color: green;
 }
 </style>
 <ul>
 <li>リスト項目1</li>
 <p>pタグをいじる</p>
 <li>リスト項目2</li>
 <li>リスト項目3</li>
 <li>リスト項目4</li>
 </ul>

E:nth-child(n)は親要素Eのn番目の子にマッチします。つまり、nth-childは親要素の全ての子をソート順に選択します。
E:nth-of-type(n)は、同じ型のn番目の兄弟要素Eにマッチします。最初にEにマッチし、次にEに基づいてn番目の子を見つけます。

サマリー

構造擬似クラス・セレクタは一般的に、親クラス内の最初の子を選択するために使われます。
n 番目の子選択する親要素のすべての子を並べ替えます。
nth-of-typeは、親要素内の指定された子要素をソートして選択します。まず E にマッチし、次に E に基づいて n 番目の子を見つけます。
n番目の子については、nは0から数えることを知っておくことが重要です。
順不同のリストであれば、間違いなくn番目の子を使います。
クラス・セレクタ、属性セレクタ、擬似クラス・セレクタ、ウェイト 10

疑似要素セレクタ

擬似要素セレクタは、HTMLタグ注を必要とせずにCSSを使って新しいタグ要素を作成することで、HTML構造を簡素化するのに役立ちます：

の前後は要素を作成しますが、インライン要素です。
この新しく作成された要素は文書ツリーには存在しないので、擬似要素と呼ばれます。
構文element::before {}
beforeとafterにはcontent属性が必要です。
beforeは親要素の内容の前に要素を作成し、afterは親要素の内容の後に要素を挿入します。擬似要素セレクタはタグセレクタと同じで、重みは1です。

アプリケーションシナリオ1：フォントアイコン

実際には、フォントアイコンは、基本的に構造の利点を達成するために擬似要素である追加的にフォントアイコンラベルを定義する必要はありません、フォントアイコンエンコーディングを設定するには、content属性を介して

ステップ

構造体の中にdivボックスを定義
スタイル @font-face で最初にフォントを宣言します。
スタイル div::after{...} で擬似要素の後を定義します。
after擬似要素に、content属性を設定します。
after擬似要素にfont-family属性を設定
位置決めを使って擬似要素を適切な位置に配置します。位置決めのニーモニックを覚えておいてください。

応用シナリオ2：ジャガイモの模倣効果

ステップ

style で、大きな div ボックス用の before 擬似要素を設定します。
この擬似要素はマスクとして機能するので、内容を設定する必要はありませんが、content属性を設定する必要があります。
このマスクの幅、高さ、背景色を設定します（デフォルトでは非表示）。
マウスが div ボックスに移動したときにマスクを表示するには、hover を使用します。

アプリケーション・シナリオ3：クリア・フロート

フロートを消す方法を思い出してください：

エクストララベル法は、バルクヘッド法とも呼ばれ、W3Cの推奨プラクティスです。
親がオーバーフロー属性を追加
親要素は擬似要素の後に追加されます。
親はダブル擬似要素を追加します。

エクストラタグ法は、バルクヘッド法としても知られ、W3Cが推奨する方法です。注：この新しい空タグは、ブロックレベル要素である必要があります。

浮動小数点をクリアする最後の2つの擬似要素は、最初の追加タグ・メソッドのアップグレードと最適化のようなものです。

ボックスモデル

CSS3では、ボックスモデルはbox-sizingで指定できます。box-sizingにはcontent-boxとborder-boxの2つの値があり、ボックスサイズの計算方法が変わります。

それは2つのケースに分けられます：

box-sizing: content-box ボックスのサイズは width + padding + border です。
box-sizing: border-box ボックスのサイズは幅

box-sizing: border-box ボックスモデルが変更された場合、パディングとボーダーはボックスに対して大きすぎることはありません。

その他の特徴

アイコンのぼかし -- CSS3 フィルタフィルタ

filter CSS プロパティは、要素にぼかしやカラーシフトなどのグラフィック効果を適用します。

文法：

filter: を追加する。; --> 例：フィルター: blur(5px); --> blurぼかし：値が大きいほど、よりぼかす。

枠の幅の計算 -- calc関数

calc() この CSS 関数を使うと、CSS プロパティの値を宣言する際にいくつかの計算を行うことができます。

文法：

width: calc(100% - 80px);

括弧の中では + - * / を使って計算できます。

CSS3 トランジション

トランジションは、CSS3の破壊的な機能の1つで、FlashアニメーションやJavaScriptを使用せずに、あるスタイルから別のスタイルに変更する際に要素に効果を追加します。

トランジション・アニメーション： ある状態から別の状態への緩やかな移行。

ページの見栄えが良くなり、よりダイナミックになります。下位ブラウザではサポートされていませんが、ページのレイアウトには影響しません。

現在は:hoverと組み合わせて使われることが多いです。

文法：

transition: トランジションする属性：spend time、motion curve、when to start.;

プロパティ：変更したいCSSプロパティ、幅、高さ、背景色、内マージン、外マージン。すべての属性を変更したい場合は、all
滞在時間：秒単位、例：0.5秒。
モーションプロファイル：デフォルトでイージー
いつ開始するか：秒単位遅延トリガー時間を設定可能デフォルトは0秒
最後の2つの属性は省略可能です。
トランジションを使うときのニーモニックを覚えておいてください。

CSS3の新機能を学ぶフロントエンド