本日翻訳中の記事で、Josh MarinacciはCSSグリッドを使用してページレイアウトを設計する方法について説明しています。 私たちは、ユーザーの操作やコンテンツの変更に応答できるページについて話しますが、特にコンテンツをスクロールするときは、常に期待どおりに動作します。
CSSグリッドレイアウトテクノロジーについて
CSSグリッドレイアウトテクノロジー、または単にCSSグリッドは、Webページレイアウトを構築するために設計されています。
この技術により、Webデザイナーは、これまで使用していたCSSの
float
プロパティを無限に試すのではなく、ごくわずかなわかりやすいコードを使用して美しい動的レイアウトを作成できます。 私の友人で同僚のJen Simmons は 、CSSグリッドについて長年にわたり 語り 、彼らのサポートがブラウザに実装されるようにたゆまぬ努力を重ね、彼の努力は成功を収めました。 前のコードの最後に、CSS Grid Layoutテクノロジーのサポートが、すべての主要なデスクトップおよびモバイルブラウザーの現在のバージョンに登場しました。 ちなみに、ジェンはCSSグリッドレイアウトを完璧にマスターしたい人向けに設計された新しいYouTubeチャンネルLayout Landを立ち上げました。
CSS Meshは真に強力なテクノロジーであり、動的コンテンツ-指向のWebサイトを簡単に作成できます。 ただし、グリッドは、ページ上にテキストや画像を含む素敵なブロックを配置するのに適しています。 グリッドを使用すると、ページレイアウトの2つの次元を完全に制御できます。 彼女を含め、ページをスクロールしても「壊れない」。 これは、通常のアプリケーションでは当たり前だと思っている機能へのアクセスを意味しています。 たとえば、サイドパネルの折りたたみや固定ツールバーの存在などです。 これはすべて、グリッドの助けを借りて、Webページに非常に簡単に実装できるようになりました。
CSSフリー設計
私は長年にわたってWeb開発ツールを開発してきました。 RPGスタイルのレトロゲームをデザインするために作成したエディターのスクリーンショットです。 Flexboxテクノロジーが登場してすぐに、私はすぐにそれを採用しました。 要素のスクロールやサイズ変更などのタスクにいくつかのヘルパークラスを使用して、ネストされた水平および垂直ブロックを使用して複雑なレイアウトを作成しました。
RPGスタイルのゲーム開発ツール
Flexboxテクノロジーは、間違いなく、絶対配置を使用して
float
苦労したときと比較した場合、より生産的に作業できるようになりました。 しかし、ここでは、すべてがスムーズではありませんでした。 パネルが収束する場所で、前のスクリーンショットの拡大部分を見てください。 下部パネルの位置合わせの問題に注意してください。
パネルの配置の問題
別のスクリーンショットを次に示します。 私の意見では、描画領域の上にあるツールバーは常にページの上部にあるはずですが、パネルが消えるので、この領域をスクロールし始める価値があります。
消えるツールバー
これらの各問題は、
float
プロパティの助けを借りて解決することもでき、位置決め要素の複雑さを掘り下げますが、結果は非常に脆弱です。 新しいパネルを追加するたびに、レイアウト全体を何度も再確認して調整する必要があります。要素のサイズを変更するときに、特定の
div
要素が占有するスペースが大きすぎます。 さらに、このアプローチでは、マークアップコードも見栄えがよくありません。 ネストされた水平および垂直ブロックの構造は非常に複雑になります。 たとえば、次のコードは、2レベルのネストのみを示しています。 しかし、2つのレベルは制限からはほど遠いです。 同時に、ページおよびその機能との相互作用スキームが発展するにつれて、ページで作業するプロセスはより複雑になります。
<div class='hbox'> <div class='vbox'> <div class='hbox'>header</div> <div class='scroll'> <div class='sidebar'>sidebar</div> </div> <div class='footer'>footer</div> </div> <div class=vbox> <div class='hbox'>button button spacer label spacer button button </div> <div class='center'>main content</div> <div class='hbox'>the footer</div> </div> <div class=vbox> <div class='hbox'>header</div> <div class='scroll'> <div class='sidebar'>sidebar</div> </div> <div class='footer'>footer</div> </div> </div>
二次元への移行
Flexboxモジュールの基本的な問題は、それを使用するときに1つの次元で作業することです。 これにより、Flexboxはツールバーやナビゲーションバーなどの1次元デザインに最適な選択肢になりますが、デザイナーがコンテンツを水平と垂直の両方に揃えるタスクに直面した場合、すべてがそれほど優れているとは言えません。 ここでは、2次元レイアウトを構築するためのツールが必要です。そのため、元々2次元グリッドを形成するために設計されたCSSグリッドレイアウトテクノロジーに非常に興味を持っています。
これは、すでに見たレイアウトと似ていますが、CSSグリッドを使用して構築されたレイアウトです。
CSSグリッドレイアウト
ページの下部に注意してください。 すべてのパネルは互いに完全に整列しています。 また、各パネルに境界線を追加する代わりに、線のグリッドギャッププロパティを使用することで、グリッド線の幅の違いを心配することはできません。 余分な労力をかけることなく、すべてが見た目通りに見えます。
パネルの完全な配置を示すレイアウトの拡大部分
CSSグリッドを使用して得られる最も大きな利点は、ページレイアウトを変更に適応できることです。 私のアプリケーションにはよくサイドバーがあります。 パネルが展開されているか最小化されているかに関係なく、レイアウト内のすべてが期待どおりに動作する必要があり、理想的には、JavaScriptでレイアウトパラメーターを再計算することなくこれらすべての変更が発生することが必要です。 サイドパネルは多くのコンポーネントで構成され、キャップと地下室があります。 これらはすべて、これらの要素のサイズに関係なく整列する必要があります。 CSSグリッドを使用して、これは素晴らしいCSS関数minmax（）を適用することで達成できます。
CSSグリッドを既に学習している場合は、グリッドの行と列のパターンを使用してレイアウトを説明できることを知っています。 たとえば、
200px 1fr 200px
ようなテンプレートを使用すると、200ピクセル幅のサイドバーを作成し、残りのスペースを占めるコンテンツの領域を中央に配置できます。 そして、パネルが折りたたみ可能な場合はどうなりますか？ 余分な労力をかけない場合、パネルの内容が最小化されていても、パネルがあった列は200ピクセルを占有します。 同様の状況では、
minmax()
関数を使用できます。
minmax()
れると、
min-content
キーワードが
max
パラメーターとして使用されます（この場合、これは2番目のパラメーターです）。
#grid { display: grid; box-sizing: border-box; width: 100vw; height: 100vh; grid-template-columns: [start] minmax(auto, min-content) [center]1fr [end] minmax(auto,min-content); grid-template-rows: [header]2em [content]1fr [footer]2em; grid-gap: 1px; background-color: black; }
これで、グリッド列は常に、その中に配置されているものを表示するのに十分な幅を持ちますが、必要最小限の幅が使用されます。 したがって、列の一部（ヘッダーなど）が他の部分よりも広い場合、列の幅が大きくなり、必要なすべてに対応できるようになります。
要素のサイズが小さくなるか、要素が完全に消えると、それに応じて列が変更されます。 一般に、ここではフレックスボックスブロックの圧縮とストレッチの再現が表示されますが、1つの要素だけでなく、列にあるすべてのものを操作することができました。 これは実際の2次元レイアウトです。
ここで説明している残りのデモページのコードは次のとおりです。
.start { grid-column: start; } .center { grid-column: center; } .end { grid-column: end; } header { grid-row: header; } footer { grid-row: footer; } .sidebar { overflow: auto; }
ここに別のコードがあります。
<div id="grid"> <header class="start">header</header> <header class="center"> <button id="toggle-left">toggle left</button> ... </header> <header class="end">header</header> <div class="start sidebar">sidebar</div> <div class="center content">the center content</div> <div class="end sidebar"> sidebar ... </div> <footer class="start">left footer</footer> <footer class="center">center footer</footer> <footer class="end">right footer</footer> </div>
トグルボタンがサイドパネルで機能するように、次のコードを用意しました。 最新のDOM APIと矢印関数を使用すると、数行で、以前にJQueryツールを使用して実行したことを再現できることに注意してください。
const $ = (selector) => document.querySelector(selector) const $$ = (selector) => document.querySelectorAll(selector) const on = (elem, type, listener) => elem.addEventListener(type,listener) on($('#toggle-left'),'click',()=>{ $$(".start").forEach((elem) => elem.classList.toggle('closed')) }) on($('#toggle-right'),'click',()=>{ $$(".end").forEach((elem) => elem.classList.toggle('closed')) })
また、CSSグリッドの外観は、Flexboxテクノロジーが非推奨または廃止されることを意味するものではないことに注意してください。 Flexboxは、特にツールバーのような1次元構造のレイアウトに必要な場所で使用します。
header
要素に基づいてツールバーに使用するスタイルは次のとおりです。
<header class="center"> <button id="toggle-left">toggle left</button> <button>open</button> <button>save</button> <span class="spacer"></span> <span>filename.txt</span> <span class="spacer"></span> <button>delete</button> <button id="toggle-right">toggle right</button> </header> header { background-color: #ccc; display: flex; flex-direction: row; } .spacer { flex: 1; }
spacer
クラスは、要素に余分なスペースをすべて占有させます。 ボタン間に2つのそのようなクラスを使用して、必要に応じてツールバーのサイズを変更できますが、ファイル名が常に中央に来るようにします。 通常のアプリケーションのツールバーはほぼ同じように動作します。
Codepenで特別に準備されたプロジェクトでこれらすべてを試すことができます。
コードペンプロジェクト
まとめ
CSS-gridは、インタラクティブなWebアプリケーションインターフェイスを設計するための素晴らしいツールです。これにより、ページコンテンツの水平方向と垂直方向を制御できます。 このようなレイアウトはシンプルで明確であり、その中のすべての要素は正しく配置され、
grid-gap
プロパティを使用すると、それらの間に自動的に境界線を作成できます。 CSSグリッドツールを使用すると、JavaScriptを使用せずにレイアウトの外観を変更でき、ページコンテンツの配置を完全に制御できます。 これらはすべて、重いCSSフレームワークの使用を必要としないブラウザでサポートされる標準機能であることに注意することが非常に重要です。
WebアプリケーションまたはインタラクティブなWebサイトを開発している場合は、CSS-gridを試してください。
親愛なる読者！ Webページを設計するときにCSSグリッドを使用しますか？
