blob: 419de7d1351e2cd25cab0a3d112d8860675fae8a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
---
title: CSS レイアウト
slug: Learn/CSS/CSS_layout
tags:
- Beginner
- CSS
- Floating
- Grids
- Guide
- Landing
- Layout
- Learn
- Module
- Multiple column
- Positioning
- alignment
- flexbox
- float
- table
translation_of: Learn/CSS/CSS_layout
---
<div>{{LearnSidebar}}</div>
<p class="summary">現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな <code>display</code> の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。</p>
<h2 id="Prerequisites" name="Prerequisites">前提知識</h2>
<p>このモジュールを始める前に、次のことを理解しているべきです。</p>
<ol>
<li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明したように、HTML についての基本的な知識があること。</li>
<li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>で説明したように、CSS の基本を容易にこなせること。</li>
<li><a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスを装飾する方法</a>を理解していること。</li>
</ol>
<div class="note">
<p><strong>注: </strong>使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/ja/">Thimble</a> などのオンラインコーディングプログラムで（ほとんどの）コードサンプルを試すことができます。</p>
</div>
<h2 id="Guides" name="Guides">ガイド</h2>
<p>これらの記事では、CSS で利用可能な基本的なレイアウトのツールとテクニックについての教育を提供します。 レッスンの最後には、ウェブページをレイアウトすることによって、レイアウト方法の理解を確認するのに役立つ評価試験があります。</p>
<dl>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></dt>
<dd>この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな {{cssxref("display")}} の値など）を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。</dd>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></dt>
<dd>ウェブページ上の要素は、通常フローを変えるために何かをするまで、通常フローに従ってレイアウトされます。 この記事では、通常フローを変える方法を学ぶための基礎として、通常フローの基本について説明します。</dd>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></dt>
<dd>
<p><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">フレックスボックス</a>は、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。</p>
</dd>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></dt>
<dd>CSS グリッドレイアウトは、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できるようにする多くの機能があります。 この記事では、ページレイアウトを始めるために知っておくべきことをすべて説明します。</dd>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></dt>
<dd>{{cssxref("float")}} プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの1つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。</dd>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></dt>
<dd>位置指定を使用すると、通常のドキュメントレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。</dd>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></dt>
<dd>段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。</dd>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></dt>
<dd>Web 対応デバイスでより多様な画面サイズが登場するにつれて、レスポンシブ Web デザイン（RWD）の概念が登場しました。 これは、さまざまな画面幅、解像度などに合わせて Web ページがレイアウトと外観を変更できるようにする一連の実践です。 これは、マルチデバイス Web 向けのデザイン方法を変更したアイデアであり、この記事では、それをマスターするために知っておくべき主なテクニックを理解するのに役立ちます。</dd>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></dt>
<dd><strong>CSS メディアクエリー</strong>を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定した規則に一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブ Web デザイン（responsive web design、RWD）の重要な部分ですが、例えば、ユーザーはマウスではなくタッチスクリーンを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。 このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。</dd>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></dt>
<dd>グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前はフロートや他のレイアウト機能を使用して実装される傾向がありました。 あなたはレイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。</dd>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザのサポート</a></dt>
<dd>
<p>このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法をサポートしていないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブテクニックを使用する方法について説明します。</p>
</dd>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">評価試験: 基礎的なレイアウトの理解</a></dt>
<dd>ウェブページをレイアウトすることによって、さまざまなレイアウト方法に関する知識をテストするための評価試験です。</dd>
</dl>
<h2 id="See_also" name="See_also">関連情報</h2>
<dl>
<dt><a href="/ja/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">実用的な位置指定の例</a></dt>
<dd>この記事では、位置指定でどのようなことができるかを説明するために、実際に使用されるいくつかの例を作成する方法を示します。</dd>
</dl>
|
