CSS3_html/css_WEB-ITnose の新しいテクノロジー

CSS3 の新技術

CSS メディア クエリ

メディア クエリには、メディア タイプと、幅、高さ、色などのメディア プロパティを使用してスタイル シートの範囲を制限する少なくとも 1 つの式が含まれます。 CSS3 に追加されたメディア クエリにより、コンテンツを変更せずに、さまざまなサイズの特定のデバイスにスタイルを適用できるようになります。それがレスポンシブレイアウトです。

メディア クエリが true の場合、関連するスタイル シートまたはスタイル ルールが通常のカスケード ルールに従って適用されます。メディア クエリが false を返した場合でも、 タグにメディア クエリを含むスタイルシートはダウンロードされます (適用されないだけです)。

メディア タイプはオプションであり、not または Only 演算子が使用されない場合はデフォルトで all になります。

メディアクエリでは大文字と小文字が区別されません。不明なメディア タイプを含むクエリは通常 false を返します。

論理演算子

演算子 not と and のみは、複雑なメディア クエリを構築するために使用できます。

and 演算子は、複数のメディア属性を同じメディア クエリに結合するために使用されます。このクエリの結果は、各属性が true の場合にのみ true になります。

not 演算子は、メディア クエリの結果を否定するために使用されます。 not キーワードはクエリ全体にのみ適用でき、スタンドアロン クエリには適用できません。

only 演算子は、メディア クエリが正常に一致した場合にのみ、指定されたスタイルを適用することを意味します。これを使用すると、メディア属性を含むクエリをサポートしていない古いブラウザーが特定のスタイルを適用するのを防ぐことができます。

not または Only 演算子を使用する場合は、メディア タイプを明示的に指定する必要があります。

複数のメディア クエリをカンマで区切ってまとめることもできます。そのうちの 1 つが true である限り、メディア ステートメント全体が true を返します。 or 演算子と同等です。

ほとんどのメディア プロパティには、「以下」と「以上」を表すために使用される「min-」と「max-」という接頭辞が付いています。これにより、HTML および XML と競合する「」文字の使用が回避されます。メディア プロパティの値を指定せず、プロパティの実際の値がゼロ以外の場合、式は true に解決されます。

メディアプロパティ

<!-- link元素中的CSS媒体查询 --><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /><!-- 样式表中的CSS媒体查询 --><style>@media (max-width: 600px) {  .facet_sidebar {    display: none;  }}</style>

orientation

portrait

landscape

resolution 出力デバイスの解像度（ピクセル密度）を指定します。解像度は、インチあたりのドット数 (dpi) またはセンチメートルあたりのドット数 (dpcm) で表すことができます。

tv TV メディア

ハンドヘルド デバイス

モノクロ白黒は、白黒 (グレースケール) デバイスのピクセルあたりのビット数を指定します。白黒デバイスの場合、値は 1 です。

color カラーを表示できるデバイス

min-color 各カラー単位には少なくとも n ビットがあります

color-index は、出力デバイスのカラー ルックアップ テーブルのエントリの数を指定します。

min-color-index: 256 少なくとも 256 色のインデックス付きデバイス

aspect-ratio アスペクト比 この値には、「/」で区切られた 2 つの正の整数が含まれます。水平ピクセル数 (1 番目の値) と垂直ピクセル数 (2 番目の値) の比率を表します。

device-aspect-ratio デバイスのアスペクト比

device-height

device-width

grid 出力デバイスがグリッド デバイスであるかビットマップ デバイスであるかを決定します。この値は、デバイスがグリッドベース (テレタイプ端末や 1 つのグリフしか表示できない電話など) の場合は 1、それ以外の場合は 0 です。

height メディア プロパティは、出力デバイスのレンダリング領域の高さを記述します (表示可能領域の高さ、プリンター トレイの高さなど)。

幅

スキャン

プログレッシブテレビを順次スキャン

インターレース

Mozilla独自のメディアプロパティ LINK

CSSカウンター

本質的に、CSSカウンターはCSSによって維持される変数であり、使用状況を追跡するために追加されたCSSルールに基づいている可能性があります。これにより、ドキュメントの位置に基づいてコンテンツの表示を調整できます。 CSSカウンターはCSS2.1における自動カウント数部分の実装です。

カウンタの値は、カウンタ リセットおよびカウンタ インクリメント操作を使用してコンテンツに counter() または columns() 関数を適用することによってページに表示されます。

CSS カウンターを使用する前に、値にリセットする必要があります。デフォルトは 0 です。要素のカウンターをインクリメントするには、counter() 関数を使用します。

body {  counter-reset: section;           /* 重置计数器成0 */}h3:before {  counter-increment: section;      /* 增加计数器值 */  content: "Section " counter(section) ": "; /* 显示计数器 */}

カウンターのネスト

counters() 関数を使用すると、さまざまなレベルでネストされたカウンターの間に文字列を挿入できます。

ol {  counter-reset: section;                /* 为每个ol元素创建新的计数器实例 */  list-style-type: none;}li:before {  counter-increment: section;            /* 只增加计数器的当前实例 */  content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */}

CSS 変換

CSS 変換プロパティ

CSS 変換の定義に使用される 2 つの主要なプロパティ:transform とtransform-origin

transform-origin: 原点の位置を指定します。デフォルト値は要素の中心であり、移動できます。回転、スケーリング、傾斜など、多くの変形ではこのプロパティの使用が必要であり、それらはすべてパラメータとして指定された点を必要とします。

transform: 要素に適用される変換を指定します。値は、結合された操作リクエストであるかのように個別に実行される変換のスペースで区切られたリストです。

回転回転。単位: 度、度

skewxtilt

3D 固有の CSS プロパティ

まず、パースペクティブを設定する必要があります。遠近感の値は 3D がどのように実装されるかを決定します。要素がビューアから遠ざかるほど、要素は小さくなります。

perspective-origin プロパティを通じて観測者の位置を設定します。デフォルトの遠近値は観察者の中心ですが、これは常に適切であるとは限りません。

CSS Flexbox

ページがさまざまな画面サイズやデバイスの種類に適応する必要がある場合に、要素が適切に動作するようにするレイアウト方法。多くのアプリケーションでは、フレックスボックスは、浮動小数点数を使用したり、フレックスボックス コンテナーとそのコンテンツの間のマージンをマージしたりしないことにより、ブロック モデルを改善します。

多くのデザイナーは、フレックス ボックスを使い始めるのが簡単だと感じるでしょう。フレキシブルボックス内の子要素は、全方向に配置することで親要素の表示領域に柔軟に適応できます。子要素の表示順序はコード内の順序とは独立しているため、フレックスボックスを使用すると、子要素の配置が簡単になり、より明確なコードを使用して複雑なレイアウトをより簡単に実装できます。独立した表示は、コード宣言やナビゲーション順序に基づくのではなく、表示される要素に対してのみ設定されます。

フレキシブル ボックス レイアウトの定義では、子要素の高さと幅を自動的に調整して表示デバイスの利用可能な表示スペースを満たすことができ、コンテンツがオーバーフローするのを防ぐためにコンテンツを縮小することができます。

垂直方向にレイアウトされるブロックレベル要素や水平方向にレイアウトされるインライン要素とは異なり、フレックスボックス レイアウト アルゴリズムは方向に依存しません。

ブロックレベルの要素レイアウトはページ内で適切に機能しますが、ユーザー エージェントが垂直から水平に切り替えるなどの変更に基づいて、方向の切り替え、サイズ変更、伸縮、縮小を必要とする参照コンポーネントをサポートするには十分に定義されていません。

大規模レイアウトを対象とした今後の

グリッド レイアウトとは異なり、Flexbox レイアウトはアプリケーション コンポーネントや小規模レイアウトに適しています。どちらも、さまざまなユーザー エージェント、さまざまな書き込みモード、その他の柔軟性のニーズに対応するための CSS ワーキング グループによる取り組みです。

コンセプト

フレキシブルコンテナ: フレキシブル子要素の親要素。 表示プロパティの値を flex または inline-flex に設定して、フレックス コンテナーとして定義します。

flex 値は、フレックス コンテナーがブロック レベルであることを示します。 inline-flex 値は、フレックス コンテナーがアトミックな行レベル要素であることを示します。

フレキシブル子要素: フレキシブルコンテナの各子要素はフレキシブル子要素になります。フレックス コンテナに直接含まれるテキストは、匿名のフレックス子要素になります。

軸: 各フレックスボックス レイアウトは 2 つの軸に配置されます。フレキシブルなサブエレメントが主軸に沿って次々に配置されます。横軸は主軸に対して垂直です。

属性 flex-direction は主軸の方向を定義します。

justify-content 属性は、現在の行の主軸に沿って弾性子要素を配置する方法を定義します。

align-items 属性は、現在の行の交差軸に沿って弾性子要素を配置する方法を定義します。

align-self 属性は、親要素の align-items 属性をオーバーライドし、個々の伸縮性のある子要素を交差軸に沿って配置する方法を定義します。

方向: フレキシブル コンテナの主軸の開始エッジ、主軸の終了エッジ、側軸の開始エッジと側軸の終了エッジは、弾性サブ要素の配置の開始位置と終了位置を表します。これらは、特に、writing-mode 属性 (左から右、右から左など) によって設定されるベクトル内の主軸および交差軸の位置に依存します。

order 属性は要素を順番にグループ化し、どれが最初に表示されるかを決定します。

属性 flex-flow は、属性 flex-direction と flex-wrap の略称であり、伸縮性のあるサブ要素を配置するために使用されます。

Row: 柔軟な子要素は、flex-wrap 属性によって制御される軸の交差方向に従って 1 行または複数の行に配置できます (この方向に新しい垂直線を確立できます)。

サイズ: フレックスサブ要素の幅と高さは、それに応じてメインサイズとサイドサイズと同等にすることができ、両方ともフレックスコンテナーの主軸と側軸にそれぞれ依存します。

min-height 属性と min-width 属性の初期値は、新しいキーワード auto です。

属性 flex は、flex-basis、flex-grow、flex-shrink の略語で、弾性サブ要素の弾性を表します。

フレックスコンテナ内に含まれるテキストは、自動的に匿名のフレックス子要素になります。ただし、空白のみを含む flex 子要素は、display:none に設定されているかのようにレンダリングされません。

隣接する flex サブ要素はマージンとマージされません。 auto を使用したマージンにより、垂直方向と水平方向に余分なスペースがもたらされ、隣接する flex の子を整列または分離するために使用できます。

Elastic 子要素が適切なデフォルトの最小サイズを持つようにするには、min-width:auto と min-height:auto を使用します。 Elastic 子要素の場合、auto 属性はその最小幅と高さがコンテンツのサイズ以上であることを計算し、そのサイズがレンダリング中にコンテンツを収容するのに十分であることを保証します。

CSS の他の中央揃え方法とは異なり、フレキシブル ボックスの配置は正確に中央揃えになります。これは、フレックス コンテナーがオーバーフローしても、子要素は中央に配置されたままであることを意味します。これは問題になる場合がありますが、ページの上端または左端 (英語などの左から右に記述する言語の場合は、この問題は右から左に記述する言語の右端で発生します) からはみ出しても問題が発生します。アラビア語など）、そこにコンテンツがあっても、そこにスクロールすることはできないからです。

そういえば、要素の表示順序はソースコード内の順序とは関係ありませんが、この独立性は表示効果にのみ有効であり、音声順序とソースコードベースのナビゲーションを除きます。たとえ順序であっても、言語やナビゲーションの順序には影響しません。したがって、開発者は、ドキュメントのアクセシビリティを損なうことを避けるために、ソース コード内の要素を慎重に配置する必要があります。

フレックスボックスのプロパティ

フレックスボックスは異なるレイアウトロジックを使用するため、一部のプロパティはフレックスコンテナでは無効になります。

複数列モジュールの column-* 属性は、伸縮性のある子要素には無効です。

float および clear は、flex 子要素には無効です。 float を使用すると、display プロパティが block に評価されます。

vertical-align は、flex 子要素の配置には影響しません。

自分で試してみてください!

すべてのブラウザがプレフィックスのない属性名をサポートしているわけではないことに注意してください。この機能を最新のブラウザーで動作させるには、各プロパティを 3 回記述する必要があります。1 回目は -moz プレフィックス付き、1 回目は -webkit プレフィックス付き、そして 1 回目はプレフィックスなしです。

@Rule

@ルールは、'@' (U+0040 COMMERCIAL AT) 記号で始まり、その後に識別子、または最初のセミコロン ';' (U +003B SEMICOLON) が続く CSS ステートメントです。それ以外の場合は、次で終わります。最初の宣言ブロック。

ここでは、識別子によって指定される @ ルールをいくつか示します。各ルールは異なる構文を持っています:

@charset、スタイル シートで使用される文字セットを定義します。

@import、CSS エンジンに外部スタイル シートを導入するように指示します。 .

@namespace は、XML 名前空間を考慮する必要があることを CSS エンジンに指示します。

ネストされた @ ルールは、スタイル シート内のステートメントとして使用できるだけでなく、メディア クエリの条件が次の場合、条件付きルール グループ内でも使用できます。条件を満たすと、条件付きルール グループのルールが有効になります。

@page、ドキュメントの印刷時のレイアウト変更を記述します。

@font-face、ダウンロードされる外部フォントを記述します。

@keyframes、CSS アニメーションの中間ステップを説明します。

@supports、指定された条件が満たされると、条件付きルール グループ内のルールが有効になります。

@document、ドキュメント スタイル シートが指定された条件を満たしている場合、条件付きルール グループ内のルールが有効になります。 (CSS レベル 4 仕様に準拠)

条件ルール グループ

属性値と同様に、各 @ ルールは異なる構文を持ちますが、一部の @ ルールは 1 つのカテゴリにグループ化できます: これらのステートメントは同じ構文を使用します。これらはすべて、ルールまたは @rules のネストされたステートメントです。

それらはすべて次のことを表します: それらが参照する条件 (さまざまなタイプ) は常に true または false と同等であり、それが true の場合、それらのステートメントは有効になります。

条件付きルール グループは、CSS 条件レベル 3:

@media,

@supports,

@document (CSS レベル 4 仕様に準拠)

条件付きルール グループはステートメントをネストできるため、ネスト レベルが決まります。不定。

リンク

MDN