CSS レイアウト
現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな display の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、 CSS レイアウトについて深く掘り下げることができます。
前提知識
ガイド
これらの記事では、CSS で利用可能な基本的なレイアウトのツールとテクニックについての教育を提供します。 レッスンの最後には、ウェブページをレイアウトすることによって、レイアウト方法の理解を確認するのに役立つ評価試験があります。
- CSS レイアウト入門
-
この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな
displayの値など）を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。 - 通常フロー
-
ウェブページ上の要素は、通常フローを変えるために何かをするまで、通常フローに従ってレイアウトされます。 この記事では、通常フローを変える方法を学ぶための基礎として、通常フローの基本について説明します。
- フレックスボックス
-
フレックスボックスは、アイテムを行または列にレイアウトするための 1 次元のレイアウト方式です。アイテムは余った空間を埋めるために伸ばされたり、小さな空間に収まるために縮んだりします。この記事では、基本的なことをすべて説明しています。このガイドを学習した後は、フレックスボックスのスキルをテストして、理解度を確認してから次のステップに進むことができます。
- グリッド
-
CSS グリッドレイアウトは、ウェブ用の 2 次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できる多くの機能を備えています。 この記事では、ページレイアウトを始めるために必要な情報を提供し、次に進む前にグリッドのスキルをテストしましょう。
- 浮動ブロック
-
元々は、テキストブロック内の画像を浮動させるためのものだった
floatプロパティは、ウェブページで複数の列のレイアウトを作成するために最もよく使用されるツールの 1 つになりました。フレックスボックスとグリッドの出現により、この記事で説明するように、これで元の目的に戻っています。 - 位置指定
-
位置指定を使用すると、文書の通常のレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな
positionの値とその使い方について説明します。 - 段組みレイアウト
-
段組みレイアウトの仕様では、新聞に見られるような、コンテンツを複数の段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。
- レスポンシブデザイン
-
ウェブ対応端末の画面サイズが多様化するにつれ、レスポンシブウェブデザイン (RWD) という概念が登場しました。これは、異なる画面幅や解像度などに合わせて、ウェブページのレイアウトや外観を変更できるようにする一連の手法です。この記事では、レスポンシブウェブデザインを使いこなすために必要な主なテクニックをご紹介します。
- メディアクエリーの初心者向けガイド
-
CSS メディアクエリーは、ブラウザーや端末の環境が、「ビューポートの幅が 480 ピクセル以上」などの指定したルールに合致した場合にのみ、 CSS を適用する方法です。メディアクエリーは、ビューポートの大きさに応じて異なるレイアウトを作成することができるため、レスポンシブウェブデザインの重要な要素となっていますが、ユーザーがマウスではなくタッチパネルを使用しているかどうかなど、サイトが実行されている環境に関する他の事柄を検出するためにも使用できます。このレッスンでは、まずメディアクエリーで使用される構文について学び、次にメディアクエリーを使用して、シンプルなデザインをどのようにレスポンシブにするかを示す実例を見ていきます。
- 過去のレイアウト方法
-
グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前は浮動レイアウトや他のレイアウト機能を使用して実装される傾向がありました。 レイアウトをいくつかの列（4 や 6 や 12）として想像し、そしてコンテンツの列をこれらの想像上の列の中に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。
- 古いブラウザーの対応
-
このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法に対応していないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブ技術を使用する方法について説明します。
評価試験
以下の評価試験では、上記のガイドに応じた CSS レイアウトメソッドの理解度をテストします。
- 基礎的なレイアウトの理解
-
ウェブページをレイアウトすることによって、さまざまなレイアウト方法に関する知識をテストするための評価試験です。
関連情報
- 実用的な位置指定の例
-
この記事では、位置指定でどのようなことができるかを説明するために、実際に使用されるいくつかの例を作成する方法を示します。
- CSS レイアウト料理帳
-
CSSレイアウトの料理帳は、一般的なレイアウトパターンのレシピをまとめることを目的としています。自分のプロジェクトの出発点として使用することができるコードを提供するだけでなく、これらのレシピは、レイアウト仕様を使用するさまざまな方法と、開発者として行うことができる選択を強調します。