この翻訳は不完全です。英語から この記事を翻訳 してください。

これまでの内容で、テキストを装飾する方法、コンテンツを格納するボックスを装飾・操作する方法といったCSSの基礎を見てきました。ここからは、ビューポートに対して正しい位置にボックスを配置する方法等を見ていきます。必要な前提知識は既にカバーしてきたので、CSSレイアウトに潜入してみることが可能です。様々な表示設定や、フレックスボックス・CSSグリッド・ポジショニングなど今風のレイアウトツール、既存の技術で今も関心を集めているものを見てみましょう。

前提条件

このモジュールを始める前に必要なこと:

  1. HTMLの基本(HTML入門程度の内容)をよく知っていること。
  2. CSSの基礎(CSS入門程度の内容)を容易にこなせること。
  3. ボックスを装飾する方法を理解していること。

:使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、JSBinThimbleなどのオンラインコーディングプログラムで(ほとんどの)コードサンプルを試すことができます。

ガイド

これらの記事では、CSSで利用可能なレイアウトのツール・技術の基礎的なものについて説明します。レッスンの最後には課題があります。Webページをレイアウトしてみることで、理解度チェックに役立ててください。

CSSレイアウト入門
この記事は、以前のモジュールで扱ったCSSレイアウトの主要事項(displayプロパティのさまざまな値など)についての要約です。また、本モジュール全般にわたって扱うコンセプトをいくつか紹介します。
通常フロー(Normal Flow)
ウェブページ上の要素は、特に設定を変更しない限り、通常フローに従い配置されます。この記事では、通常フローの基本を説明します。設定の変更方法を学ぶ際の基礎となります。
フレックスボックス

フレックスボックスは1次元のレイアウト方法で、行形式または列形式にアイテムを配置します。アイテム自身が拡がって残りのスペースを埋めたり、縮んで狭いスペースに収まります。この記事では基礎的なことすべてを説明します。

グリッド
CSSグリッドレイアウトは2次元のウェブレイアウトシステムで、行と列のレイアウトにコンテンツを配置します。複雑なレイアウトを容易に構築する機能がたくさんあります。この記事では、ページレイアウトを始めるために必要な知識すべてを説明します。
フロート
floatプロパティは、元々はテキストブロック内の画像をフロートするものですが、ウェブページで複数列のレイアウトを作成するものとして、とてもよく使われるようになりました。この記事で説明しますが、フレックスボックスとグリッドの出現により、本来の目的で使用されるようになりました。
ポジショニング
ポジショニングを使って、通常のドキュメントレイアウトフローから要素を取り出して異なるふるまいをさせることが可能です。例えば他の要素のすぐ上に配置したり、ブラウザのビューポート内で常に同じ場所に配置させることができます。この記事ではさまざまなpositionの値とその使い方を説明します。
マルチカラムレイアウト
マルチカラムレイアウトの仕様を用いて、新聞で見かけるような列形式にコンテンツを配置することができます。その方法をこの記事で説明します。
過去のレイアウト方法
グリッドシステムはCSSレイアウトで頻繁に使用されますが、CSSグリッドレイアウトが現れる前は、float等のレイアウト機能を使ってよく作成されていました。このやり方では作成したいレイアウトを一定の列数(4, 6, 12など)の仮想列と考えて、それら仮想列の内部にコンテンツが入った列を配置するという風にレイアウトしていました。過去のプロジェクトで作業する際の理解のため、この方法がどのようにして機能するか見ていきます。
古いブラウザのサポート

主にフレックスボックスとグリッドを使用してレイアウトするよう、本モジュールで推奨してきました。しかし古いブラウザや、あなたが使ったレイアウト方法をサポートしていないブラウザのユーザーもサイトを見に来るでしょう。新しい機能が開発されたときに、または各ブラウザで優先することが異なるために、ウェブでは常にこのようなことが起こります。古い技術のユーザーを締め出してしまうことなく、モダンなウェブ技術を使用する方法について説明します。

基礎的なレイアウトの理解
いろいろなレイアウト方法について、あなたの知識をテストする課題です。ウェブページをレイアウトしてみましょう。

関連情報

実用的なポジショニングのサンプル
この記事では実際的なレイアウト例を構築する方法をいくつか示して、ポジショニングでどのようなことができるのか説明します。
 

ドキュメントのタグと貢献者

このページの貢献者: yuminatsu
最終更新者: yuminatsu,