私はTwitterで、CSSで他に何について書くべきか尋ねました。私の注意を引いた提案の1つは、CSSレイアウトを実装するときに考えることです。設計を正しく行うために、考えられる解決策と多くの質問について考える必要があります。ここでは、新しいレイアウトについて考えるための私のアプローチと、同じ手順を作業に適用する方法を示します。あなたは準備ができています？に飛び込みましょう。
横の詳細
私が通常最初にすることは、後でデザインの詳細を延期することです。これは、特定のレイアウトの主要部分を強調表示して、最初にそれらについて考え始めることを意味します。詳細が重要であることは承知していますが、これは一時的なものであるため、最初に高レベルの詳細に焦点を当てることができます。次のユーザーインターフェイスについて考えてみます。
この構成には、次のものがあります。
- タイトル/ナビゲーション。
- メインセクション。
- 使い方。
高レベルの抽象化ではなく、最初に細部について考え始めたくなるかもしれません。アプローチを視覚的に単純化するように求められた場合、フロントエンド開発者は、次のように、高レベルのレイアウト要素のみが表示されるようにするメガネを着用する必要があります。メガネでは、
重要な高レベルのUIコンポーネントのみが表示されることに注意してください。このアプローチは、各コンポーネントの小さな断片について考えるのではなく、コンポーネントを配置する方法について考えるのに役立ちます。これは私がどう思うかです：
- 全幅ヘッダー：ヘッダーがビューポートの全幅にまたがっているように見え、ラッパー内のコンテンツは無制限です。
- ヒーロー要素のコンテンツは水平方向の中央に配置され、max-widthに設定する必要があることに注意してください（段落には2行あります）。
- 仕組み：これは4列のレイアウトで、セクション全体がラップされています。
さて、コードで作業したいときは、進行状況をすばやく確認するために、簡単なプロトタイプを作成します。
<header></header>
<section class="hero">
<!-- A div to constraint the content -->
<div class="hero__content"></div>
</section>
<div class="wrapper">
<!-- 4-columns layout -->
<section class="grid-4"></section>
</div>
4列のセクションがあるので、CSSグリッドを使用します。これは彼女にとって完璧なアプリケーションです。
.wrapper {
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
max-width: 1140px;
}
.hero__content {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
それは眼鏡を使った素早い思考の例でした。今まで、レスポンシブなデザインすら考えていませんでした。一部のコンポーネントの詳細について質問がありますが、ここでは詳しく説明しません。記事の最後にある「詳細」セクションでそれについて読んでください。アイデアが浮かんだので、理解を深めるために、高レベルの考え方の例をいくつか紹介します。
記事ページ
この例では、記事のページレイアウトがあります。以下を含むユーザーインターフェイスは次のとおりです。
- 題名。
- ページタイトル。
- 記事の画像プレビュー。
- 記事の内容。
- サイドパネル（右）。
デザインがどのように見えるかがわかったので、高レベルの要素のみが表示されるようにメガネをかけましょう。
はい、どうぞ：
- ページの全幅にまたがるサイトヘッダー。
- 記事のタイトルとその説明を含むページタイトル。コンテンツはmax-widthを使用して左揃えになります。
- メイン要素とサイドバー要素を含む2列のレイアウト。
- 水平方向に中央に配置され、最大幅を持つ記事の内部コンテンツ。
記事ページのタイトル
ここでレイアウト方法を適用する必要はありません。単純な最大幅で十分です。要素のエッジが小さなビューポートのエッジにくっつくのを防ぐために、必ず水平方向のパディングを追加してください。
.page-header {
max-width: 50rem;
padding: 2rem 1rem;
}
記事-ベースとサイドバー
記事のメイン要素（メイン）は、ビューポートの幅全体からサイドバーの幅を引いたものを占めます。通常、サイドバーの幅は固定されている必要があります。これにはCSSグリッドが理想的です。
.page-wrapper {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
grid-template-columns: 1fr 250px;
}
記事の内部コンテンツは、ラッパー内に制限する必要があります。
.inner-content {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
レイアウトを作成するときに行うべき高レベルの決定についてのアイデアが得られたので、次のステップは、設計の観点から各セクションでの作業について考えることです。
詳細に飛び込む
使い方
最初のサンプル記事で、後で詳細に飛び込むと言いました。この瞬間が来ました。
ラウドスピーカー
- ステップ数が少なくなったり、多くなったりする場合がありますか？もしそうなら、そのような状況でどのように働くのですか？
- 特にカードのテキストが非常に長い場合、列の高さを等しくする必要がありますか？
見出し
- ヘッダーセクションを脇に置いておく必要がありますか？それとも、幅全体を占める必要がある場合がありますか？
アダプティブデザイン
- セクションの子のサイズを変更するには、どのような状況で折りたたむ必要がありますか？ある種の折りたたみトリガーはありますか？もしそうなら、このトリガーは何ですか？
このセクションで考えられる状況は次のとおりです。どう思いますか？フロントエンド開発者は、これらのエッジケースを考慮する必要があります。このような隠された詳細を考慮せずにユーザーインターフェイスを作成するだけではありません。
この記事では思考プロセスに焦点を当てているため、各バリエーションのコードの詳細については説明しませんが、そのようなものを紹介したいと思います。前のレイアウトの最初と3番目のバージョンでは、2つではなく3つのステップがあることに注意してください。 CSSを動的にして、状況を処理できるようにすることはできますか？ステップ数を2から3に増やすことを意味します。
<div class="wrapper">
<section class="steps">
<div>
<h2>How it works</h2>
<p>Easy and simple steps</p>
</div>
<div class="layout">
<div class="layout__item">
<article class="card"></article>
</div>
<div class="layout__item">
<article class="card"></article>
</div>
<div class="layout__item">
<article class="card"></article>
</div>
</div>
</section>v
</div>
.steps {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
}
@media (min-width: 700px) {
.steps {
grid-template-columns: 250px 1fr;
}
}
.layout {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
}
@media (min-width: 200px) {
.layout {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
minmax()
キーワードと CSSグリッドを使用しました
auto-fit
。これは、カードの数を増減できる場合に便利です。以下のビデオをご覧ください。
ヒーローセクション
新しいセクションやコンポーネントを作成したいときに最初にすることは、自分自身にたくさんの質問をすることです。ヒーローセクションを作成するときに私が考えることは次のとおりです。
断面画像
- 画像はどのように表示する必要がありますか？この画像は毎日変更されますか、それともCMSで更新する必要がありますか？
- CSSでHTMLまたは背景を使用する必要がありますか？
- 画像の予想アスペクト比はどれくらいですか？
- ビューポートのサイズに応じて、複数の画像サイズを使用する必要がありますか？
- たぶん私たちは画像を持っていませんが、ビデオを持っていますか？画像を処理した後、クライアントが画像の代わりにビデオが必要だと言ったという状況がありました。
セクションの高さ
- ?
- ? , , ?
- ?
- ? , , .
- . ?
- ? , : — px, CSS clamp()?
取り組んでいるプロジェクトの性質に応じて、これらの質問に対する答えを見つける必要があります。これは、ヒーローコンポーネントを構築する方法を決定するのに役立ちます。これらの質問のそれぞれに答えを得るのは難しい場合がありますが、質問が多ければ多いほど、間違いなく良い結果が得られる可能性が高くなります。
このコンポーネントでは、子間の間隔を扱います。このタスクでは、flow-spaceプロパティを使用するのが好きです。AndyBellのPiccalilブログからそれについて学びました。私たちの目標は、直接関連する要素間の距離を提供することです。
<section class="hero">
<!-- A div to constraint the content -->
<div class="hero__content flow">
<h2>Food is amazing</h2>
<p>Learn how to cook amazing meals with easy and simple to follow steps</p>
<a href="/learn">Learn now</a>
</div>
</section>
.flow > * + * {
margin-top: var(--flow-space, 1em);
}
そして最後
これまで見てきたように、コンポーネントを実装するプロセスは、コンポーネントを設計に完全に適合させることだけでなく、自分自身に問いかけ、エッジケースについて考えることでもあります。この記事から何かを学んだことを願っています。また、バナー割引に10％を追加するプロモーションコードHABRを忘れないでください。
その他のコース