なぜ必要なのか
植物一覧で園芸初心者は写真・光・水やりを比べます。カードの大きさが違うと一部が目立ち、情報の位置もずれます。写真の元の比率より対等な比較を重視します。
どう解決するのか
正方形の植物写真の下に同じ管理項目を置きます。明るい日差しを選ぶとローズマリーが残り、すべてで3種類に戻ります。カードは行高を共有し、小画面では読む順に並びます。
植物の写真と同じ管理項目を比べる緑のコーナー部屋に迎える植物
どのカードでも同じ管理項目を比べられます。
表示中: 3
本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。
どんな考え方なのか
均等グリッドは同じ幅の項目を共通の行に揃えます。情報構造が似ている場合に適します。文章の長さが違うと余白が残り、メイソンリーはその整列より密な配置を選びます。
W3C: CSS Grid Level 1
さらに詳しく
任意の参考資料 · 概要の読了時間には含みません
01選択・比較
情報項目が同じ商品・人物・選択肢の比較に適します。文字の走査は一覧、異なる高さの写真はメイソンリーに向きます。違う長さの内容を固定高に押し込み、情報を切らないようにします。
02応用例
植物カードは写真・名前・光・水のメモを同じ順に見せます。生成画像と簡潔な管理項目は完全な園芸ガイドではありません。実際の品種と場所の条件を確認します。
03実装の参考・注意点
均等なトラック、一定の写真比率、内容に応じた行高を使います。1列になってもラベルを残します。隠したカードは配置から除き、残る項目の相対順序を保ちます。
04根拠
比較のまとめ
続けて読む
原稿・修正提案 ↗自分のプロジェクトに活かす
これからプロジェクトを始めますか?説明を入力して最初のプロンプトを準備しましょう。
自分に合うプロンプトを作る →すでに外部AIと会話中なら、この記事のリンクと自分のプロジェクトに合う理由、重視する利点や制約を伝えましょう。合意した要件にどう適用するか依頼してください。
この記事のリンク: 均等グリッド
この選択を話し合う
コメントは全言語で共有。投稿にはGitHubログインが必要です。