Chakra UI で MDN Web Docs の CSS レイアウト料理帳 をやってみた
はじめに
おはようございます、もきゅりんです。
月からの啓示を受けて、Chakra UI の学習していました。
遥か昔に学習した CSS がまるで記憶になかったので、CSS: カスケーディングスタイルシート | MDN でざっと復習しました。
そして、コンテンツ内にある CSS レイアウト料理帳を見て、これを Chakra UI で対応してみるときっと良い総まとめになるゾ！と思ってやってみました。
そして、ついでにブログにしました。
ソースは こちら です。
なお、自分は AWSのソリューションアーキテクトではあるのですが、フロントエンドは見様見真似のお猿さんなので、クオリティへの期待は禁物です。
生暖かい目で眺めて下さい。
ついでに「よく、がんばったな。でも、こうしたらもっと良くなるぞ？ boy。」みたいなコメント貰えたら嬉しいです。
Chakra UI の使い方のベストプラクティスとか、秘伝テクニックとかはまったく出てきませんのでご注意ください。
本稿はこんな感じで進めました、くらいの紹介だけになります。
CSS レイアウト料理帳 とは
CSS レイアウト料理帳 - CSS: カスケーディングスタイルシート | MDN のことです。
CSS レイアウト料理帳は、よくあるレイアウトパターンや、あなた自身のサイトに実装する必要がある可能性がある事柄のレシピを共有するためのものです。
プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。
つまり、CSS ワールドにおいて、汎用性が高くて学習する価値が高い、という理解を自分はしました。
レシピには、以下のようなものがあります。 (オリジナルから加筆・修正)
| レシピ | 説明 | 本稿対応ブランチ |
|---|---|---|
| メディアオブジェクト | 一方が画像でもう一方が説明テキストである二列のボックス。 例えば Facebook の投稿やツイート。 | media-objects |
| マルチカラム | 段組みレイアウト、フレックスボックス、グリッドの選択 | column-layouts |
| 要素を中央に配置 | アイテムを水平および垂直方向に中央に配置する方法 | center |
| 張り付くフッター | コンテンツが短い場合にコンテナーまたはビューポートの最下部に配置されるフッターの作成。 | sticky-footer |
| ナビゲーションの分割 | 一部のリンクが他と視覚的に分割されているナビゲーションパターン。 | split-nav |
| パンくずナビゲーション | 来訪者がページ階層の上の階層に戻ることができるリンクのリストの作成。 | bread-crumb-nav |
| バッジ付きリストグループ | カウントを表示するバッジの付いたアイテムのリスト。 | badge-list |
| ページ付け | コンテンツのページへのリンク (検索結果など)。 | paginatiion |
| カード | カードのグリッドで表示されるカードコンポーネント。 | cards |
| グリッドラッパー | グリッドコンテンツを中央のラッパー内に配置するためのもので、はみ出すこともできます。 | grid-wrapper |
本稿対応ブランチとは、本稿の Git リポジトリのブランチ名を指しています。
Chakra UI とは
「Chakra UI は、Reactアプリケーションを構築するために必要なビルディングブロックを提供する、シンプルでモジュール式でアクセシブルなコンポーネントライブラリです。」
とのことです。
無数にある CSS フレームワーク/ライブラリから選んだ理由？
...名前と雰囲気だけだってばよ！
やってみる
Using Chakra UI's official create-react-app templates - Chakra UI で記載されている通り、 Chakra UI の依存関係がプリインストールされている typescript テンプレートでプロジェクトから開始できます。
npx create-react-app css-layout-recipes --template @chakra-ui/typescript yarn create react-app my-app --template @chakra-ui/typescript
最初の状態はこんな感じです。
ぐりぐりと回転します。
ダークモードをデフォルトで利用できます。
それでは、順に進めていきます。
4つのまとまりで対応しています。
- メディアオブジェクト
- マルチカラム
- 細かいののまとめ
- 部品のまとめ
1 メディアオブジェクト
レイアウト料理帳のすべてのレシピにおいて、font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif になっています。
拡張テーマ とText and Layer Styles - Chakra UI とを参考に、設定しています。
ただし、pタグのみ対応、 lineHeights (行の高さ)は デフォルト 1.5 の設定なので対応不要という認識です。
(グローバルでの設定で良かった気がします)
オリジナルと同様、グリッドしていきます。
基本的には、オリジナルと同様のグリッド設定を施していきます。
上から積み重ねる感じだったので、 VStack を使ってみました。
2 マルチカラム
２つ目の例の同じ高さの単一行の項目ーフレックスボックス から、 Wrap バージョン、グリッドレイアウトの3つを対応しています。
画面フルで使うものは Box で、オリジナルのごとく枠の幅が控えめなものは Container を使ってみています。
3 細かいののまとめ
以下レシピをまとめてしまっています。
- 要素を中央に配置
- バッジ付きリストグループ
- グリッドラッパー
要素を中央に配置
Center コンポーネントをそのまま使えます。
バッジ付きリストグループ
アイテムとバッジは Flex 内で Spacer によって離れさせていますが、あまりイケてない気もします。
1回目のリストの borderTop は外枠の border とかぶらないように条件分岐で対応します。
Circle コンポーネントがそのまま利用できます。
グリッドラッパー
基本的に、オリジナルと同様のグリッド設定を施していきます。
grid-template-columns はグリッド列ごとのサイズを決めています。
Chakra では templateColumns で対応します。
grid-column は列グリッドの開始と終了についてまとめて指定します。
例としては下記です。
grid-column: 1 / 3;で 1から3つ目のカラムまでgrid-column: 2 / -1;で2から逆向きに数えて1カラム目までgrid-column: 1 / span 2;で1から2 span 分まで
Chakra では gridColumn を使用します。
今見ると、ループ処理でも良かった気がします。
4 部品のまとめ
以下レシピをまとめてしまっています。
- ナビゲーションの分割
- 張り付くフッター
- パンくずナビ
- カード
- ページ付
無理やりバラバラのコンテンツをまとめたため、なんだかバランスが悪いデザインです。
ナビゲーションの分割
基本的には、 Flex と Spacer で左右の距離を与え、それらを均等に配置するように HStack でラップします。
px は padding-inline-start です。
要素のインライン方向の論理的な先頭側のパディングを定義します。
ちなみに、ヘッダーは 張り付くフッターで使うものを利用しています。
張り付くフッター
オリジナルと同様の設定です。
以下のように記載されているのを参考にしました。
「body」 で min-height を 100vh に設定し、それをグリッドコンテナとして使用することで、ページ全体でこれを実現することもできます。
パンくずナビ
Breadcrumb コンポーネントをそのまま使えます。
isCurrentPage を利用する箇所で条件を組み込んでいます。
カード
Box - Chakra UI の AirbnbExample を参考にカードを作成します。
CSS プロパティはオリジナルに準拠します。
ページ付
特に難しいことはしていないのですが、そもそも aria-label とか aria-hidden って何？？って感じで学習になりました。
これらは、オリジナルコンテンツに記載されているように、
スクリーンリーダーを使用している人が、このナビゲーションが何をするのか、そしてリンクをクリックしたときにどこに行くのかを確実に理解できるようにするものです。
Flex ではなく、 HStack にしてみました。何となくコンパクトに扱えそうだから HStack です。
VisuallyHidden コンポーネントを利用します。
もうちょっとループのロジックをがんばっても良かったかもです。
さいごに
最初、 Chakra を使うことで、オリジナルコンテンツよりもシンプルに記述量少なくできたりしないかな、と模索したりもしたのですが、 (たぶん、自分の力量のせいで) オリジナルの設定に沿った方が、無理やり見た目を合わせるよりもうまくいく、と気付いて止めました。
とりあえず CSS もご多分に漏れず、奥が深いです。
全然わからないです。
Chakra UI については、自分が普段から CSS を触ったり他の CSS フレームワーク/ライブラリを使っているわけじゃないので、他と比較したり、ちゃんとした意見を出せません。
ただ、だんだん使い方に慣れてくると、比較的サクサクとスタイリングしていけたように思えました。(気のせいかもしれません。)
熟練者は爆速でスタイリングできちゃいそうですね。
そして、大事なことを理解しました。
- 通常のCSSのプロパティの使い方を整理、理解すること
コレに尽きました。
何はともあれ、こうかな？こう考えるのかな？これでいけるのか？と試行錯誤して作っていくのは楽しかったです。
以上です。
どなたかのお役に立てば幸いです。
p.s. そういえば、こんなものもありました。有料のものもありますが、さらにスムーズかつスタイリッシュに作れるじゃん、と後から気付きました。
![[登壇資料]DevelopersIO 2024 TOKYOで「Notion × Wraptasサイト作成ハンズオン」を行いました #devio2024](https://images.ctfassets.net/ct0aopd36mqt/15fBmQfuSigujXU7gsvbcB/b38e8dcb0f6d4cc53a85bbf4554ecdbe/devio2024_tokyo_w1200h630.png)
