Webデザインを変える新しいCSS機能

ウェブデザインが単調になった時期がありました。 デザイナーと開発者は同じ種類のWebサイトを何度も作成したため、2種類のWebサイトのみを作成したことで、私たちの業界の人々に嘲笑されました。

あなたが現在デザインしている2つの可能なウェブサイトのどちらですか？ pic.twitter.com/ZD0uRGTqqm

— Jon Gold（@jongold）2016年2月2日

これは私たちの「創造的な」心が達成できることの限界ですか？ この考えは私の心に制御できない悲しみの痛みを送りました。

認めたくありませんが、当時はそれが最高だったのかもしれません。 クリエイティブなデザインを作るのに適したツールがなかったのかもしれません。 ウェブの需要は急速に進化していましたが、フロートやテーブルなどの古代の技術にとらわれていました。

今日、デザインの展望は完全に変わりました。 創造性を発揮するために使用できる、CSSグリッド、CSSカスタムプロパティ、CSSシェイプ、CSS writing-modeなどの新しい強力なツールを備えています。

CSSグリッドがすべてをどのように変えたか

グリッドはWebデザインに不可欠です。 あなたはすでにそれを知っていました。 しかし、主に使用するグリッドをどのように設計したかを自問するのをやめましたか？

私たちのほとんどはしていません。 業界標準となった12列グリッドを採用しています。

• しかし、なぜ同じグリッドを使用するのでしょうか。
• グリッドが12列で構成されているのはなぜですか？
• グリッドのサイズが同じなのはなぜですか？

同じグリッドを使用する理由の1つの考えられる答えは、次のとおりです。数学を実行したくない。

以前は、フロートベースのグリッドを使用して3列のグリッドを作成するには、各列の幅、各ガターのサイズ、および各グリッドアイテムの配置方法を計算する必要がありました。 次に、適切なスタイルを設定するためにHTMLでクラスを作成する必要がありました。 かなり複雑でした。

作業を簡単にするために、グリッドフレームワークを採用しました。 当初、960gsや1440pxなどのフレームワークでは、8列、9列、12列、さらには16列のグリッドから選択することができました。 その後、Bootstrapはフレームワーク戦争に勝ちました。 Bootstrapでは12列しか許可されておらず、それを変更するのは面倒だったため、最終的には標準として12列に決定しました。

しかし、Bootstrapのせいにするべきではありません。 当時はそれが最善のアプローチでした。 最小限の労力で機能する優れたソリューションを望んでいないのは誰ですか？ グリッドの問題が解決したので、タイポグラフィ、色、アクセシビリティなど、デザインの他の側面に注意を向けました。

現在、 CSSグリッドの出現により、グリッドははるかに単純になりました。 グリッド計算を恐れる必要はもうありません。 非常に単純になったので、CSSを使用すると、Sketchなどの設計ツールよりもグリッドの作成が簡単になると思います。

なんで？

各列のサイズが100ピクセルの4列のグリッドを作成するとします。 CSSグリッドを使用すると、 grid-template-columns宣言で100pxを4回書き込むことができ、4列のグリッドが作成されます。

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px; } 

12列のグリッドが必要な場合は、 100pxを12回繰り返す必要があります。

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; grid-column-gap: 20px; } 

はい、コードは美しくありませんが、コード品質の最適化には（まだ）関心がありません。まだデザインについて考えています。 CSSグリッドを使用すると、コーディングの知識がなくても、誰でも簡単にWeb上にグリッドを作成できます。

異なる幅のグリッド列を作成する場合は、 grid-template-columns宣言で目的の幅を指定するだけで、設定が完了します。

 .grid { display: grid; grid-template-columns: 100px 162px 262px; grid-column-gap: 20px; } 

グリッドをレスポンシブにする

CSSグリッドについての議論は、レスポンシブな側面について話さずに完了することはできません。 CSSグリッドをレスポンシブにする方法はいくつかあります。 1つの方法（おそらく最も一般的な方法）は、 frユニットを使用することです。 別の方法は、メディアクエリで列の数を変更することです。

frは、分数を表す柔軟な長さです。 frユニットを使用する場合、ブラウザはオープンスペースを分割し、 frの倍数に基づいて列に領域を割り当てます。 これは、同じサイズの4つの列を作成するには、 1frを4回書き込むことを意味します。

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; } 

いくつかの計算を行って、4つの同じサイズの列が作成される理由を理解しましょう。

まず、グリッドに使用できる合計スペースが1260pxであると仮定します。

各列に幅を割り当てる前に、CSSグリッドは使用可能なスペース（または残り）を知る必要があります。 ここでは、 1260pxからgrip-gap宣言を差し引きます。 各ギャップが20pxなので、使用可能なスペースとして1200pxが残ります。 (1260 - (20 * 3) = 1200) 。

次に、 frの倍数を合計します。 この場合、 1frの倍数が4つあるため、ブラウザは1200pxを4で割ります。 したがって、各列は300pxです。 これが、4つの等しい列を取得する理由です。

ただし、 frユニットで作成されたグリッドは常に等しいとは限りません。

frを使用する場合、各frユニットは使用可能な（または残りの）スペースの一部であることに注意する必要があります。

frユニットで作成されたどの列よりも幅の広い要素がある場合は、計算を別の方法で行う必要があります。

たとえば、下のグリッドには、 grid-template-columns: 1fr 1fr 1fr 1fr作成されている場合でも、1つの大きな列と3つの小さな（ただし等しい）列があります。

1200pxを4つに分割し、各1fr列に300pxを割り当てた後、ブラウザは最初のグリッドアイテムに1000pxの画像が含まれていることに気付きます。 1000pxは300pxより大きいため、ブラウザは代わりに最初の列に1000pxを割り当てることを選択します。

つまり、残りのスペースを再計算する必要があります。

新しい残りのスペースは1260px - 1000px - 20px * 3 = 200pxです。 次に、この200pxは、残りの端数の量に応じて3で除算されます。 その場合、各分数は66pxになります。 うまくいけば、それがfrユニットが常に同じ幅の列を作成するとは限らない理由を説明しています。

frユニットで毎回同じ幅の列を作成する場合は、 minmax(0, 1fr)で強制する必要があります。 この特定の例では、画像のmax-widthプロパティも100％に設定する必要があります。

注： Rachel Andrewは、さまざまなCSS値（min-content、max-content、frなど）がコンテンツサイズにどのように影響するかについてのすばらしい記事を書いています。 読む価値があります！

不等幅グリッド

幅が等しくないグリッドを作成するには、frの倍数を変更するだけです。 以下は黄金比に従うグリッドです。ここで、2番目の列は最初の列の1.618倍であり、3番目の列は2番目の列の1.618倍です。

 .grid { display: grid; grid-template-columns: 1fr 1.618fr 2.618fr; grid-column-gap: 1em; } 

異なるブレークポイントでのグリッドの変更

異なるブレークポイントでグリッドを変更する場合は、メディアクエリ内で新しいグリッドを宣言できます。

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1em; } @media (min-width: 30em) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

CSSグリッドでグリッドを作成するのは簡単ではありませんか？ 初期の設計者と開発者は、そのような可能性のために殺していたでしょう。

高さベースのグリッド

ビューポートの高さを知る方法がなかったため、以前はWebサイトの高さに基づいてグリッドを作成することはできませんでした。 現在、ビューポートユニット、CSS Calc、およびCSSグリッドを使用して、ビューポートの高さに基づいてグリッドを作成することもできます。

以下のデモでは、ブラウザの高さに基づいてグリッドの正方形を作成しました。

Jen Simmonsは、CSSグリッドを使用した4番目のエッジの設計について説明するすばらしいビデオを公開しています。 ぜひご覧ください。

グリッドアイテムの配置

グリッドアイテムの配置は、 margin-leftプロパティを計算する必要があったため、これまでは大きな問題でした。

現在、CSSグリッドを使用すると、余分な計算を行わずに、CSSを使用してグリッドアイテムを直接配置できます。

 .grid-item { grid-column: 2; /* Put on the second column */ } 

spanキーワードを使用して、グリッドアイテムが占める列数を指定することもできます。

 .grid-item { /* Put in the second column, span 2 columns */ grid-column: 2 / span 2; } 

インスピレーション

CSSグリッドを使用すると、物事を非常に簡単にレイアウトできるため、同じWebサイトのさまざまなバリエーションをすばやく作成できます。 代表的な例の1つは、LynnFisherの個人的なホームページです。

CSSグリッドで何ができるかについて詳しく知りたい場合は、Jen Simmonのラボをチェックしてください。彼女は、CSSグリッドやその他のツールを使用してさまざまな種類のレイアウトを作成する方法を探っています。

CSSグリッドの詳細については、次のリソースを確認してください。

• マスターCSSグリッド、レイチェルアンドリューとジェンシモンズのビデオチュートリアル
• レイアウトランド、ジェンシモンズレイアウトに関する一連のビデオ
• CSSレイアウトワークショップ、レイチェルアンドリューCSSレイアウトコース
• CSSグリッドを学ぶ、Jonathan SuhCSSグリッドの無料コース。
• グリッドの生き物、デイブ・ゲデスCSSグリッドを学ぶ楽しい方法

不規則な形状での設計

CSSボックスモデルは長方形であるため、Web上で長方形のレイアウトを作成することに慣れています。 長方形に加えて、三角形や円などの単純な形状を作成する方法も見つけました。

今日、私たちはそこで止まる必要はありません。 CSSシェイプとclip-pathを自由に使用できるため、手間をかけずに不規則なシェイプを作成できます。

たとえば、Aysha Anggrainiは、CSSグリッドとclip pathを使用して、コミックストリップに着想を得たレイアウトを試しました。

Hui Jingは、テキストがビヨンセ曲線に沿って流れるようにCSSシェイプを使用する方法を説明しています。

さらに深く掘り下げたい場合は、SaraSoueidanに非長方形のレイアウトを作成するのに役立つ記事があります。

CSSシェイプとclip-pathを使用すると、デザインに固有のカスタムシェイプを作成するための無限の可能性が得られます。 残念ながら、構文的には、CSSの形状とclip-pathはCSSグリッドほど直感的ではありません。 幸い、ClippyやFirefoxのShape Path Editorなどのツールを使用して、必要な形状を作成できます。

CSSのwriting-modeテキストフローを切り替える

ウェブは主に英語を話す人々のために作られているので、私たちはウェブ上で単語が左から右に流れるのを見るのに慣れています（少なくともそれが始まった方法です）。

しかし、一部の言語はその方向に流れません。 たとえば、中国語の単語は上から下、右から左に読むことができます。

CSSのwriting-modeにより、テキストは各言語に固有の方向に流れます。 Hui Jingは、ペナン方言というWebサイトで、上から下、右から左に流れる中国語ベースのレイアウトを試しました。 彼女の実験について詳しくは、彼女の記事「The OneAboutHome」をご覧ください。

記事のほかに、Hui Jingは、タイポグラフィとwriting-modeについて、「東と西が​​出会うとき：Webタイポグラフィとそれが現代のレイアウトにどのように影響を与えるか」について素晴らしい講演をしています。 ぜひご覧ください。

中国語のような言語向けに設計していなくても、CSSのwriting-modeを英語に適用できないわけではありません。 2016年に、Devfest.asiaを作成したとき、私は小さな創造的な筋肉を曲げ、 writing-modeでテキストを回転させることを選択しました。

Jen Simmonsのラボには、 writing-modeを使用した多くの実験も含まれています。 私もチェックすることを強くお勧めします。

努力と創意工夫が大いに役立つ

新しいCSSツールは便利ですが、独自のWebサイトを作成するためにそれらのツールは必要ありません。 少しの工夫と努力が大いに役立ちます。

たとえば、Super Silly Hackathonでは、CheaunはWebサイト全体を-15度回転させ、Webサイトを読んでいるときにばかげているように見せます。

Darin Senneffは、三角法とGSAPを使用してアニメーションのログインアバターを作成しました。 パスワードフィールドに注目すると、類人猿がどれほどかわいいか、そしてそれがどのように目を覆っているのかを見てください。 インタラクティブなログインフォームと同様に、JustEat！などの外部サービスを使用するときに失われる収益の量を見積もるのに役立つ非常に優れたインタラクティブな計算機もあります。

コース「LearnJavaScript」の販売ページを作成したときに、JavaScript学習者がくつろげる要素を追加しました。

まとめ

ユニークなウェブデザインはレイアウトだけではありません。 それは、デザインがコンテンツとどのように統合されるかについてです。 少しの努力と工夫で、私たち全員が聴衆に語りかけるユニークなデザインを作成することができます。 今日私たちが自由に使えるツールは私たちの仕事を容易にします。

問題は、ユニークなデザインを作るのに十分気を使っているかということです。 私はあなたがそうすることを望みます。