GSSの紹介：グリッドスタイルシート

最近、HTMLとCSSの世界でグリッドスタイルのシート（GSS）を聞いたことがあるかもしれません。 GSSはCSSレイアウトを再想像し、ブラウザのレイアウトエンジンを cassowary Constraint Solverを活用するエンジンに置き換えます。その言葉を理解していなかったあなた方は…こんにちは、歓迎！

GSSはより良い未来を約束します。 GSSは、相対的なポジショニングとサイジングを約束します。 GSSは、ある1行のコードで別の要素を別の要素に集中させることを約束します。 GSSは配信します。問題は、どのように？

です この記事では、GSSの簡単な歴史と、それが提供する機能の詳細な概要について説明します。また、制約ベースのレイアウト、Cassowary Constraint AlgorithmのGSSを調べて、GSSのインストールと使用のプロセスを説明します。

W3Cやブラウザが追いつくのを待たない人たちは、GSSである謎を説明しながら、そこに固執して細心の注意を払うことをお勧めします。そのメモで、少し歴史から始めましょう。

キーテイクアウト

GSSの使用を開始するには、Bowerを介してインストールするか、githubを介してzipファイルとしてダウンロードする必要があります。その後、GSSスタイルシートは、a

タグにtype = text/gssを追加するか、a

>を使用してロードできます。 簡単な歴史

GSSは、Dan Tocchiniが創設者兼CEOとしてのグリッドの作成です。これは、なぜそれほどグリッドではないスタイルシートがグリッドスタイルのシートと呼ばれるのかと答えています。

ウェブ開発者とフロントエンドテクノロジーとの間の戦争は、ウェブにアイデアを提示することが何年も続いています。 CSSは、過去10年間に勝利していることが証明されています。ただし、時間とともに進化していないツールを使用してますます複雑なユーザーインターフェイスを構築することは、Web開発者が定期的に行うことが期待されることです。たとえば、要素をCSSで垂直に中心にすることは、特に可変高さの要素を使用して、最も単純なタスクではありませんでした。

FlexBoxは最新のソリューションの1つですが、そこで小さな変更でさえ、HTMLコンテンツとCSSプレゼンテーションの奥深くに進み、変更を加える必要があります。

GSSがアリーナを取る時が来ました。 GSSはこれらの問題やその他多くの問題に取り組んでいます - 開発者が10年以上抱えてきた問題。

本質的に、GSSはCSSプリプロセッサであり、cassowary.jsを悪用するJavaScriptランタイムです。まだ知らない人、cassowary.jsは、cocoa autolayoutで使用しているJavaScript Port Appleです。

GSSとCassowaryの両方が制約プログラミングに基づいているため、CSSのような宣言言語に力を与えるのに理想的です。制約プログラミングは、Web開発者が「What」を宣言し、「方法」を数学的ソルバーに任せることに関心があるパラダイムです。

制約プログラミングは、実装ではなく意図に焦点を当てています

背景情報をいくつか確立したので、GSSオファーの機能に進みましょう。 GSSの概要

CSSの最大の問題の1つは相対性です。 CSS要素には、パディング、高さ、幅、フロート、マージン、境界線、アウトラインなどのプロパティの終わりのないリストがあると期待できますが、この情報は、ページ上の他の要素に関連して要素がどこにあるかを教えてくれません（またはページ全体）。また、エンドレスリストは、異なる画面サイズで要素が表示される場所にも答えません。

これは、GSSの最初の機能に私たちをもたらします。レイアウトが何であるかを定義します。無数の時間を費やし、レイアウトの構築方法を戦略化する時代は終わりました。

GSSがcassowary.jsを利用していることをすでに説明しているため、GSSのもう1つの優れた機能を次に示します。要素は、1つのコードを持つ他の任意の任意の中心にできます。これにより、多くの回避策が不要になり、過去のものがあります。 たとえば、

たとえば、サイトのページの右側にある見出しと垂直にサブスクライブボタンを追加する場合は、次のコードを使用します。

別の機能：GSSは、フロート、テーブルセル、クリアフィックス、および水平/垂直センタリングを廃止します。フロート自体がアプリケーションレイアウトに理想的ではないと言っているため、フロートである危険な落とし穴に別れを告げます。

「ウェブサイトが簡単なドキュメントから複雑でインタラクティブなアプリケーション、ドキュメントレイアウト用のツールに進化したため。フロートは、アプリケーションレイアウトに必ずしも適していませんでした。」

- W3Cグリッドレイアウトモジュール（作業ドラフト）

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

重要なCSS機能はどうですか？重要ですか？ GSSの4番目の機能は同様のことを行います。GSSは制約階層を使用して、制約を強度で優先順位付けします。ここでは、4つの組み込み強度レベルについて話しています：

！弱い

！medium

！strong

• ！
を要求します
requireは、制約が保持されることを保証する
• 特別
強度であり、それがそうでない場合、すべてが壊れることに注意してください。慎重かつ頻繁に使用することをお勧めします
• 強度のレベルがリストの下に上昇し、実行中により強い制約がより高い優先度を与えられます。例を見てみましょう：

ここまで行ったことがあります。制約ベースのレイアウトを今すぐ見てみましょう。 制約ベースのレイアウトのGSS

制約は、基本的に、保持される可能性のある2つ以上の変数間の関係です。要素のすべての数値特性は、制約される資格があります。例を次に示します：

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

• pはセレクター
と呼ばれます
• line-heightは、GSSが
の値を計算するプロパティです。
• []は、プロパティへのアクセスに使用されます
• =不平等制約を定義します
• 10および20は、ピクセル
の数値値です

上記の例では、両方の制約が有効になります。以下は、保持されない制約の例です。

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

最初に、Elements ElementaとElementBの両方が150pxの高さを持つように制約されています。 3行目では、2つの要素の合計は225pxです。したがって、2つの要素の制約の1つは保持されません。 GSS

のセレクター GSSのセレクターは、HTML要素のグループに対するクエリであり、最終的に制約の影響を受ける要素を決定するために使用されます。セレクターは、制約を適用する前にDOMから要素を選択して観察する必要があるため、重要です。

次の基本的なセレクターは、GSSによってサポートされています

GSSのルールセット

ルールセットでは、単一のセレクターを介して複数の制約を定義できます。それらをネストして、それらにCSSプロパティを使用することもできます。

このネストされたルールセット：

p[line-height] >= <span>10;
</span>p[line-height] ::window[height] / 20;

は：

と同じです

GSS

のプロパティ

上記の例ではすでにプロパティをカバーしていますが、もう少し詳しく見てみましょう。 GSSでは、プロパティは要素に属する変数です。 CSSで知られているプロパティを使用する場合、対応するGSS計算値は、要素のインラインスタイルとして割り当てられます。

このようなもの：

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

は次のとおりです

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

キャッソワリー制約アルゴリズムの紹介

GSSは、1999年にバドロス、ボーニング、スタッキーによるキャッサワリー線形算術制約解くアルゴリズムのJavaScriptポート（cassowary.js）を採用しています。

ユーザーは、入力の制約が互いに矛盾しないことを確認する必要はありません。実際、これはキャッソワリーアルゴリズムの本質です。制約を段階的に評価し、最適なソリューションを自動的に発見します。

キャッソワリーアルゴリズムの計算制限

<span>section   <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span></span>

GSSの背後にある制約ソルバーは、Cassowaryアルゴリズムと呼ばれます。このアルゴリズムは、線形の制約のみを計算できます（つまり、y = mx cの形式）。基本演算子（、 - 、 *、 /）はアルゴリズムによってサポートされています。 2つ（またはそれ以上）制約された変数の乗算と分割は線形ではないため、エラーが発生します。

<span>(section </span>

gss

のインストール クライアント側のインストールの場合、Bower：

を介してインストールします

次に、このコードをマークアップのセクションに追加します：

github経由でzipファイルとしてバージョン2.0.0をダウンロードすることもできます。

gssをインストールしたら、タグにtype = text/gssを追加して.gss styleSheetsをロードしてください：

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

または

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

すべてが稼働していると、いくつかのコードの例とともにフォローを開始できます。以下に、初心者のチュートリアルについて説明します

a GSS初心者のチュートリアル

作成する例はCodepenを介して表示されますが、標準のHTMLドキュメントなどのチュートリアルを使用します。最初に、次のコード行をHTMLに追加して、GSSエンジンスクリプトを追加します。

ファイルのCodepen-Hostedバージョンを使用しますが、ここでCDNホストバージョンを見つけることができます。次に、GSSリファレンススクリプト（上記に追加した行）の下に次のコードを追加して、GSSをドキュメントオブジェクトに渡します。

p[line-height] >= <span>10;
</span>p[line-height] ::window[height] / 20;

必要に応じて、これはエンジンスクリプトの後に含まれる別のJavaScriptファイルに配置できます。

例1：要素を垂直に中心に

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

divを作成し、GSSレイアウトのH2タグにいくつかのテキストを囲み、HTMLに追加します：

基本的なスタイリングを追加した後、レイアウトを作成するためにいくつかのGSSを追加することができます。これが楽しみが始まるところです。

私の目標は、そのサイズにもかかわらず、ビューポート内の.foo要素を垂直に中央に集中させ、要素のサイズが変更されても同じアライメントを所定の位置に保つことができることです。

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

この目標を達成するために適用する制約は次のとおりです。

::ウィンドウセレクターを使用して、要素をブラウザ内のページの可視部分と中央に集中させます。

使用:: [Intrinsic-Height]属性は、相対幅を決定するために使用される要素の高さの相対値を取得します。

最初に、type属性をテキスト/gssに設定して、

追加するGSSを定義するには、
• a
• そしてそれが必要なすべてです。この要素は、GSSを垂直に使用して（動的高さで）中心になっています。以下はデモです：

CodepenのSitePoint（@SitePoint）のGSSを使用したペンの垂直センタリングを参照してください。

フル画面のデモを試して、ブラウザを垂直にサイズ変更して、任意のウィンドウサイズの中心にある要素を確認してみてください。

例2：動的に変更されたウィンドウ幅に基づく要素の回転

<span>section   <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span></span>

この次の例では、シンプルな色の正方形の形状を作成し、動的に回転させます。まず、ドキュメントのセクションに次のコード行を追加してGSSを起動しましょう。

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

上記のコードを編集して、ファイルの正しい場所を指す必要があることに注意してください。 worker.jsファイルはこちらで、gss.jsファイルをこちらを入手できます。

注：いくつかのバグのため、上記のファイルパスは、これを機能させるためにGSSの2.0.0以前のバージョンを指します。 ここで、これをHTMLに追加して正方形の形状を作成しましょう：

…そして、CSSにいくつかのスタイリングを追加します：

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

ここで、HTMLに戻り、GSS制約をいくつか追加します。

p[line-height] >= <span>10;
</span>p[line-height] ::window[height] / 20;

GSSを使用すると、意図を作成し、数学的計算をアルゴリズムに任せたままにしておくことに留意してください。この例では、ウィンドウの幅が動的に変化するときに要素と要素で回転が生成される要素とウィンドウの間に制約を作成しようとしています。

この目標を達成するために適用する制約は次のとおりです。

:: window [center] selectorを使用して、要素を中心にブラウザ内のページの可視部分を中心にします。

>

使用:: window [width]回転zで制約を作成し、z軸の周りの要素に回転効果を作成します。ここで、:: window [width]から受け取った値は、回転の程度を表します。

最初の例のように、テキスト/gssにセットされたタイプセットを使用して、HTMLにスタイルブロックを追加します。追加するGSSを定義するためにスタイルブロックが必要であることを忘れないでください。
スタイルタグ内に次のコードを追加することにより、GSS制約を使用してスクエアボックスを画面に関連付けます。
そしてそれで、それは完了です。最終的なCodepenデモをご覧ください：

codepenでSitePoint（@sitepoint）によるGSSを使用したペン動的回転を参照してください。

フル画面のデモを表示する場合は、ウィンドウを変更してみてください。ウィンドウの幅が変更されたときに、四角いボックスが回転位置を変更することに気付くでしょう。

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

GSSの未来

GSSの未来は有望に見えます。フロントエンドテクノロジーで前進する時が来ました。 StyleSheetライブラリ全体を引き裂く前に、小規模なプロトタイプで練習することをお勧めします。

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

ここで取り上げたのは、GSSでできることのほんの一部ですが、このチュートリアルがあなたを始めるために役立つ有益であることを願っています。

まだGSSを使用しましたか？あなたの経験はどうでしたか？コメントセクションでお知らせください。

GSS（グリッドスタイルシート）

に関するよくある質問

GSS（グリッドスタイルのシート）とは？

GSS、またはグリッドスタイルシートは、Web開発者とデザイナーにとって強力なツールです。これは、シンプルで直感的な構文を使用してレスポンシブで柔軟なレイアウトを作成できる制約ベースのレイアウトエンジンです。 GSSは、制約の概念を導入することにより従来のCSSモデルを拡張します。これにより、要素間の関係をより正確かつ柔軟な方法で制御できるようになります。

従来のCSSは、レイアウトにボックスモデルを使用します。これは、複雑なレイアウトを作成するときに制限されて複雑になる可能性があります。一方、GSSは制約ベースのモデルを使用します。これにより、柔軟性と精度が向上します。 GSSを使用すると、要素間の関係を定義し、より直感的な方法で動作を制御できます。あなたのプロジェクトで。これは、公式WebサイトからGSSライブラリをダウンロードするか、NPMのようなパッケージマネージャーを使用することで実行できます。 GSSエンジンがプロジェクトに含まれると、CSSファイルにGSSコードの書き込みを開始できます。

既存のCSSコードでGSSを使用できますか？従来のCSSと並んで。これは、既存のCSSコードを書き換えることなく、プロジェクトにGSSを徐々に導入できることを意味します。 GSSコードは、個別のファイルで記述したり、通常のCSSコードと混合したりすることができます。

GSSを使用することの利点は何ですか？レイアウトをより正確に制御できるようになり、複雑で応答性の高いデザインを簡単に作成できます。また、GSSはコードを簡素化するため、読みやすくなりやすくなります。さらに、GSSはライブ編集をサポートしています。つまり、コーディングとしてリアルタイムで変更を確認できます。

GSSはすべてのブラウザーによってサポートされていますか？エンジンは、JavaScriptをサポートする最新のブラウザで機能する必要があります。ただし、新しいテクノロジーと同様に、複数のブラウザでデザインをテストして互換性を確保することをお勧めします。 GSSを学習するために利用可能なリソース。公式のGSS Webサイトは、包括的なガイドとドキュメントを提供しています。 GSSを詳細にカバーするいくつかのオンラインチュートリアルとコースもあります。その制約ベースのレイアウトエンジンは、さまざまな画面サイズと向きに適応するレスポンシブデザインを可能にします。これにより、さまざまなデバイスで一貫したユーザーエクスペリエンスを簡単に作成できます。

GSSはオープンソースですか？

はい、GSSはオープンソースプロジェクトです。これは、誰でも開発に貢献し、プロジェクトで無料で使用できることを意味します。 GSSのソースコードはGithubで入手できます。

GSSの将来は何ですか？

比較的新しいテクノロジーとして、GSSはまだ進化しています。ただし、その強力な機能と制約ベースのレイアウトへの関心の高まりは、有望な未来があることを示唆しています。より多くの開発者がGSSを採用するにつれて、この革新的なテクノロジーに対するリソース、ツール、コミュニティのサポートが増えることが期待できます。

グリッドスタイルシート（GSS）は、ブラウザのレイアウトエンジンをキャッソワリー制約ソルバーに置き換えるCSSプリプロセッサとJavaScriptランタイムであり、相対的なポジショニングとサイジングを約束し、1つのコードを別のラインで中央に配置する能力を約束します。 >
• GSSは、実装ではなく意図に焦点を当てた制約プログラミングを採用しているため、開発者は「何」を宣言し、「方法」を数学的なソルバーに任せることができます。
GSSは、フロート、テーブルセル、クリアフィックス、および水平/垂直センタリングを廃止し、制約階層を使用して強度を持つ制約を優先し、4つの組み込み強度レベルを提供します。
GSSは、キャッソワリー線形算術制約解くアルゴリズムを使用して、ユーザーによって自然言語で与えられた入力制約に基づいてレイアウトに最適なソリューションを見つけ、制約を徐々に評価し、最適なソリューションを自動的に発見します。
GSSの使用を開始するには、Bowerを介してインストールするか、githubを介してzipファイルとしてダウンロードする必要があります。その後、GSSスタイルシートは、a
• タグにtype = text/gssを追加するか、a
>を使用してロードできます。
• 簡単な歴史
GSSは、Dan Tocchiniが創設者兼CEOとしてのグリッドの作成です。これは、なぜそれほどグリッドではないスタイルシートがグリッドスタイルのシートと呼ばれるのかと答えています。

ウェブ開発者とフロントエンドテクノロジーとの間の戦争は、ウェブにアイデアを提示することが何年も続いています。 CSSは、過去10年間に勝利していることが証明されています。ただし、時間とともに進化していないツールを使用してますます複雑なユーザーインターフェイスを構築することは、Web開発者が定期的に行うことが期待されることです。たとえば、要素をCSSで垂直に中心にすることは、特に可変高さの要素を使用して、最も単純なタスクではありませんでした。

FlexBoxは最新のソリューションの1つですが、そこで小さな変更でさえ、HTMLコンテンツとCSSプレゼンテーションの奥深くに進み、変更を加える必要があります。

GSSがアリーナを取る時が来ました。 GSSはこれらの問題やその他多くの問題に取り組んでいます - 開発者が10年以上抱えてきた問題。

本質的に、GSSはCSSプリプロセッサであり、cassowary.jsを悪用するJavaScriptランタイムです。まだ知らない人、cassowary.jsは、cocoa autolayoutで使用しているJavaScript Port Appleです。

GSSとCassowaryの両方が制約プログラミングに基づいているため、CSSのような宣言言語に力を与えるのに理想的です。制約プログラミングは、Web開発者が「What」を宣言し、「方法」を数学的ソルバーに任せることに関心があるパラダイムです。

制約プログラミングは、実装ではなく意図に焦点を当てています

背景情報をいくつか確立したので、GSSオファーの機能に進みましょう。 GSSの概要

CSSの最大の問題の1つは相対性です。 CSS要素には、パディング、高さ、幅、フロート、マージン、境界線、アウトラインなどのプロパティの終わりのないリストがあると期待できますが、この情報は、ページ上の他の要素に関連して要素がどこにあるかを教えてくれません（またはページ全体）。また、エンドレスリストは、異なる画面サイズで要素が表示される場所にも答えません。

これは、GSSの最初の機能に私たちをもたらします。レイアウトが何であるかを定義します。無数の時間を費やし、レイアウトの構築方法を戦略化する時代は終わりました。

GSSがcassowary.jsを利用していることをすでに説明しているため、GSSのもう1つの優れた機能を次に示します。要素は、1つのコードを持つ他の任意の任意の中心にできます。これにより、多くの回避策が不要になり、過去のものがあります。 たとえば、

たとえば、サイトのページの右側にある見出しと垂直にサブスクライブボタンを追加する場合は、次のコードを使用します。

別の機能：GSSは、フロート、テーブルセル、クリアフィックス、および水平/垂直センタリングを廃止します。フロート自体がアプリケーションレイアウトに理想的ではないと言っているため、フロートである危険な落とし穴に別れを告げます。

「ウェブサイトが簡単なドキュメントから複雑でインタラクティブなアプリケーション、ドキュメントレイアウト用のツールに進化したため。フロートは、アプリケーションレイアウトに必ずしも適していませんでした。」

- W3Cグリッドレイアウトモジュール（作業ドラフト）

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

重要なCSS機能はどうですか？重要ですか？ GSSの4番目の機能は同様のことを行います。GSSは制約階層を使用して、制約を強度で優先順位付けします。ここでは、4つの組み込み強度レベルについて話しています：

！弱い

！medium

！strong

！
• を要求します
• requireは、制約が保持されることを保証する
特別
• 強度であり、それがそうでない場合、すべてが壊れることに注意してください。慎重かつ頻繁に使用することをお勧めします

  強度のレベルがリストの下に上昇し、実行中により強い制約がより高い優先度を与えられます。例を見てみましょう：

  .subscribe-button[right] == <span>::window[width];
  </span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

  ここまで行ったことがあります。制約ベースのレイアウトを今すぐ見てみましょう。

  制約ベースのレイアウトのGSS
  制約は、基本的に、保持される可能性のある2つ以上の変数間の関係です。要素のすべての数値特性は、制約される資格があります。例を次に示します：

  #light[years] == <span>50 !weak;
  </span>#light[years] == <span>20 !medium;
  </span>#light[years] == <span>35 !strong;
  </span>
  <span>/* #light[years] will hold the value 35 */</span>

  pはセレクター
  • と呼ばれます
  line-heightは、GSSが
  • の値を計算するプロパティです。
  []は、プロパティへのアクセスに使用されます
  =不平等制約を定義します
  10および20は、ピクセル
  • の数値値です
  上記の例では、両方の制約が有効になります。以下は、保持されない制約の例です。

  p[line-height] >= <span>10;
  </span>p[line-height] ::window[height] / 20;

  最初に、Elements ElementaとElementBの両方が150pxの高さを持つように制約されています。 3行目では、2つの要素の合計は225pxです。したがって、2つの要素の制約の1つは保持されません。 GSS

  のセレクター GSSのセレクターは、HTML要素のグループに対するクエリであり、最終的に制約の影響を受ける要素を決定するために使用されます。セレクターは、制約を適用する前にDOMから要素を選択して観察する必要があるため、重要です。

  次の基本的なセレクターは、GSSによってサポートされています

  GSSのルールセット

  ルールセットでは、単一のセレクターを介して複数の制約を定義できます。それらをネストして、それらにCSSプロパティを使用することもできます。

  このネストされたルールセット：

  #elementa[height] == <span>150;
  </span>#elementb[height] == <span>150;
  </span>#elementa[height] <span>+ #elementb[height] == 225;</span>

  は：

  と同じです

  GSS

  のプロパティ

  上記の例ではすでにプロパティをカバーしていますが、もう少し詳しく見てみましょう。 GSSでは、プロパティは要素に属する変数です。 CSSで知られているプロパティを使用する場合、対応するGSS計算値は、要素のインラインスタイルとして割り当てられます。

  このようなもの：

  #elementID[height] == <span>150;   /* id      */
  </span>div[height] == <span>150;         /* element */
  </span>.className[height] == <span>150; /* class   */</span>

  は次のとおりです

  <span>section   <span><span>.aclass</span> {
  </span>    <span>height: == 150;
  </span>  <span>}
  </span><span>}</span></span>

  キャッソワリー制約アルゴリズムの紹介
  GSSは、1999年にバドロス、ボーニング、スタッキーによるキャッサワリー線形算術制約解くアルゴリズムのJavaScriptポート（cassowary.js）を採用しています。
  ユーザーは、入力の制約が互いに矛盾しないことを確認する必要はありません。実際、これはキャッソワリーアルゴリズムの本質です。制約を段階的に評価し、最適なソリューションを自動的に発見します。

  キャッソワリーアルゴリズムの計算制限

  GSSの背後にある制約ソルバーは、Cassowaryアルゴリズムと呼ばれます。このアルゴリズムは、線形の制約のみを計算できます（つまり、y = mx cの形式）。基本演算子（、 - 、 *、 /）はアルゴリズムによってサポートされています。 2つ（またはそれ以上）制約された変数の乗算と分割は線形ではないため、エラーが発生します。

  .subscribe-button[right] == <span>::window[width];
  </span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

  gss

  のインストール クライアント側のインストールの場合、Bower：

  を介してインストールします
  次に、このコードをマークアップのセクションに追加します：

  #light[years] == <span>50 !weak;
  </span>#light[years] == <span>20 !medium;
  </span>#light[years] == <span>35 !strong;
  </span>
  <span>/* #light[years] will hold the value 35 */</span>

  github経由でzipファイルとしてバージョン2.0.0をダウンロードすることもできます。

  p[line-height] >= <span>10;
  </span>p[line-height] ::window[height] / 20;

  gssをインストールしたら、タグにtype = text/gssを追加して.gss styleSheetsをロードしてください：

  または

  #elementa[height] == <span>150;
  </span>#elementb[height] == <span>150;
  </span>#elementa[height] <span>+ #elementb[height] == 225;</span>

  すべてが稼働していると、いくつかのコードの例とともにフォローを開始できます。以下に、初心者のチュートリアルについて説明します

  a GSS初心者のチュートリアル

  #elementID[height] == <span>150;   /* id      */
  </span>div[height] == <span>150;         /* element */
  </span>.className[height] == <span>150; /* class   */</span>

  作成する例はCodepenを介して表示されますが、標準のHTMLドキュメントなどのチュートリアルを使用します。最初に、次のコード行をHTMLに追加して、GSSエンジンスクリプトを追加します。

  ファイルのCodepen-Hostedバージョンを使用しますが、ここでCDNホストバージョンを見つけることができます。次に、GSSリファレンススクリプト（上記に追加した行）の下に次のコードを追加して、GSSをドキュメントオブジェクトに渡します。

  必要に応じて、これはエンジンスクリプトの後に含まれる別のJavaScriptファイルに配置できます。

  例1：要素を垂直に中心に

  <span>section   <span><span>.aclass</span> {
  </span>    <span>height: == 150;
  </span>  <span>}
  </span><span>}</span></span>

  divを作成し、GSSレイアウトのH2タグにいくつかのテキストを囲み、HTMLに追加します：

  <span>(section </span>

  基本的なスタイリングを追加した後、レイアウトを作成するためにいくつかのGSSを追加することができます。これが楽しみが始まるところです。

  私の目標は、そのサイズにもかかわらず、ビューポート内の.foo要素を垂直に中央に集中させ、要素のサイズが変更されても同じアライメントを所定の位置に保つことができることです。

  この目標を達成するために適用する制約は次のとおりです。
  ::ウィンドウセレクターを使用して、要素をブラウザ内のページの可視部分と中央に集中させます。

  <span><span>.container</span> {
  </span>  <span>height: == #elm[height];
  </span><span>}</span>

  使用:: [Intrinsic-Height]属性は、相対幅を決定するために使用される要素の高さの相対値を取得します。
  最初に、type属性をテキスト/gssに設定して、
codepenでSitePoint（@sitepoint）によるGSSを使用したペン動的回転を参照してください。
• フル画面のデモを表示する場合は、ウィンドウを変更してみてください。ウィンドウの幅が変更されたときに、四角いボックスが回転位置を変更することに気付くでしょう。
GSSの未来

GSSの未来は有望に見えます。フロントエンドテクノロジーで前進する時が来ました。 StyleSheetライブラリ全体を引き裂く前に、小規模なプロトタイプで練習することをお勧めします。

ここで取り上げたのは、GSSでできることのほんの一部ですが、このチュートリアルがあなたを始めるために役立つ有益であることを願っています。

まだGSSを使用しましたか？あなたの経験はどうでしたか？コメントセクションでお知らせください。

GSS（グリッドスタイルシート）

に関するよくある質問 GSS（グリッドスタイルシート）とは何ですか？

GSS、またはグリッドスタイルのシートは、Web開発者とデザイナーにとって強力なツールです。これは、シンプルで直感的な構文を使用してレスポンシブで柔軟なレイアウトを作成できる制約ベースのレイアウトエンジンです。 GSSは、制約の概念を導入することにより従来のCSSモデルを拡張します。これにより、要素間の関係をより正確で柔軟な方法で制御できるようになります。

従来のCSSは、レイアウトにボックスモデルを使用します。これは、複雑なレイアウトを作成するときに制限されて複雑になる可能性があります。一方、GSSは制約ベースのモデルを使用します。これにより、柔軟性と精度が向上します。 GSSを使用すると、要素間の関係を定義し、より直感的な方法で動作を制御できます。 GSSの使用を開始するにはどうすればよいですか？

GSSの使用を開始するには、プロジェクトにGSSエンジンを含める必要があります。これは、公式WebサイトからGSSライブラリをダウンロードするか、NPMのようなパッケージマネージャーを使用することで実行できます。 GSSエンジンがプロジェクトに含まれたら、CSSファイルにGSSコードの書き込みを開始できます。

既存のCSSコードでGSSを使用できますか？

はい、GSSは従来のCSSと一緒に作業するように設計されています。これは、既存のCSSコードを書き換えることなく、プロジェクトにGSSを徐々に導入できることを意味します。 GSSコードは、個別のファイルで記述するか、通常のCSSコードと混合できます。

GSSは、従来のCSSよりもいくつかの利点を提供します。レイアウトをより正確に制御できるようになり、複雑で応答性の高いデザインを簡単に作成できます。また、GSSはコードを簡素化するため、読みやすくなりやすくなります。さらに、GSSはライブ編集をサポートしています。つまり、コードするときにリアルタイムで変更を確認できます。 GSSはJavaScriptを使用して制約ベースのレイアウトエンジンを実装しています。つまり、JavaScriptをサポートする最新のブラウザで動作するはずです。ただし、新しいテクノロジーと同様に、複数のブラウザでデザインをテストして互換性を確保することをお勧めします。

はい、GSSを学習するために利用可能ないくつかのリソースがあります。公式のGSS Webサイトは、包括的なガイドとドキュメントを提供しています。 GSSを詳細にカバーするいくつかのオンラインチュートリアルとコースもあります。

はい、GSSはモバイルWeb開発のための優れたツールです。その制約ベースのレイアウトエンジンは、さまざまな画面サイズと向きに適応するレスポンシブデザインを可能にします。これにより、さまざまなデバイスで一貫したユーザーエクスペリエンスを作成しやすくなります。 はい、GSSはオープンソースプロジェクトです。これは、誰でも開発に貢献し、プロジェクトで無料で使用できることを意味します。 GSSのソースコードはGitHubで入手できます。

比較的新しいテクノロジーとして、GSSはまだ進化しています。ただし、その強力な機能と制約ベースのレイアウトへの関心の高まりは、有望な未来があることを示唆しています。より多くの開発者がGSSを採用するにつれて、この革新的なテクノロジーに対するリソース、ツール、コミュニティのサポートが増えることが期待できます。

以上がGSSの紹介：グリッドスタイルシートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。