| 前提知識: | ++ HTML の基礎（HTML 入門で学習）、および CSS の動作の考え方（ + CSS 入門で学習） + | +
|---|---|
| 学習目標: | ++ CSS のページレイアウトのテクニックの概要を説明します。それぞれのテクニックは、以降のチュートリアルでより詳しく学ぶことができます。 + | +
I love my cat.
@@ -40,47 +58,48 @@ CSS のページレイアウト技術によって、ウェブページに含まThe end!
``` -デフォルトでは、ブラウザーはこのコードを次のように表示します。 +既定では、ブラウザーはこのコードを次のように表示します。 {{ EmbedLiveSample('Normal_flow', '100%', 200) }} -ここでは、HTML がソースコードに現れる順序どおりに表示されていることに注意してください — 最初の段落の後に番号なしリストが続き、その後に 2 番目の段落が続きます。 +ここでは、HTML がソースコードに現れる順序どおりに表示されていることに注意してください。最初の段落の後に番号なしリストが続き、その後に 2 番目の段落が続きます。 -上下に並んで表示される要素は*ブロック*要素と呼ばれています。段落内の個々の単語と同じように横に並んで表示される*インライン*要素とは対照的です。 +上下に並んで表示される要素は**ブロック**要素と呼ばれています。それに対して、**インライン**要素は段落内の個々の単語と同じように横に並んで表示されています。 -> **メモ:** ブロック要素のコンテンツがレイアウトされる方向は、ブロック方向（Block Direction）と呼ばれます。 ブロック方向は、英語などの横書きモード（Horizontal Writing Mode）の言語では垂直に走ります。 日本語のような縦書きモード（Vertical Writing Mode）では、どの言語でも水平に走ります。 対応するインライン方向（Inline Direction）は、インラインコンテンツ（文など）が走る方向です。 +> **メモ:** ブロック要素のコンテンツがレイアウトされる方向は、ブロック方向 (Block Direction) と呼ばれます。 ブロック方向は、英語などの横書きモード (Horizontal Writing Mode) の言語では垂直に走ります。 日本語のような縦書きモード (Vertical Writing Mode) では、どの言語でも水平に走ります。 対応するインライン方向 (Inline Direction) は、インラインコンテンツ（文など）が走る方向です。 CSS で何かをレイアウトするとその要素を通常フローから遠ざけることになりますが、ページ上の多くの要素は通常フローにしたがって適宜レイアウトされます。これが、構造化された HTML 文書から始めることが非常に重要である理由です。 なぜなら、多くの要素のレイアウトに一から悪戦苦闘するかわりに、あらかじめ多くのものがレイアウトされている現状で作業できるからです。 CSS で要素をどのように配置するかを変更できる方法は次のとおりです。 -- **{{cssxref("display")}} プロパティ** — `block`、`inline`、`inline-block` などの標準値は、要素が通常フローでどのようにふるまうかを変更することができます（詳細については、[CSS ボックスの種類](/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes)を参照してください）。それから、[CSS グリッド](/ja/docs/Learn/CSS/CSS_layout/Grids)や[フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox)のように、`display` の値によってオンにされるレイアウト方法全体があります。 -- **フロート** — `left` のような {{cssxref("float")}} の値を適用すると、雑誌のレイアウトで画像の周囲をテキストが取り囲むことがあるように、要素の片側に沿ってブロックレベル要素が折り返されることがあります。 -- **{{cssxref("position")}} プロパティ** — 他のボックス内のボックスの配置を正確に制御できます。 通常フローでは `static` 位置指定がデフォルトですが、他の値を使用して要素を異なる方法でレイアウトすることもできます。 例えば、ブラウザーのビューポートの左上に固定するなどです。 +- **{{cssxref("display")}} プロパティ** — `block`、`inline`、`inline-block` などの標準値は、要素が通常フローでどのようにふるまうかを変更することができます（詳細については、[CSS ボックスの種類](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ブロックボックスとインラインボックス)を参照してください）。それから、[CSS グリッド](/ja/docs/Learn/CSS/CSS_layout/Grids)や[フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox)のように、特定の `display` の値によって有効になる全体的なレイアウト方法があります。 +- **浮動要素** — {{cssxref("float")}} に `left` などの値を適用すると、雑誌のレイアウトで画像の周囲をテキストが取り囲むことがあるように、要素の片側に沿ってブロックレベル要素が折り返されることがあります。 +- **{{cssxref("position")}} プロパティ** — 他のボックス内のボックスの配置を正確に制御できます。 通常フローでは `static` 位置指定が既定ですが、他の値を使用して要素を異なる方法でレイアウトすることもできます。 例えば、ブラウザーのビューポートの左上に固定するなどです。 - **表レイアウト** — HTML 表の一部をスタイルするために設計された機能は、`display: table` とそれに関連するプロパティを使用して、表以外の要素にも使用できます。 -- **段組みレイアウト** — [段組みレイアウト](/ja/docs/Web/CSS/CSS_Columns)のプロパティを使用すると、新聞のようにブロックのコンテンツを段組みにレイアウトできます。 +- **段組みレイアウト** — [段組みレイアウト](/ja/docs/Web/CSS/CSS_multicol_layout)のプロパティを使用すると、新聞のようにブロックのコンテンツを段組みにレイアウトできます。 ## display プロパティ -CSS でページレイアウトを実現するための主な方法は、`display` プロパティのすべての値です。 このプロパティにより、デフォルトの表示方法を変更することができます。 通常フローに属するすべての要素には `display` の値が設定されており、この値によって要素のデフォルトのふるまいが決まります。 例えば、英語の文書内で{{htmlelement("p", "段落")}}が上から下へ表示されるのは、`display: block` でスタイルが設定されているためです。 段落内のテキストの周囲にリンクを作成しても、そのリンクは残りのテキストとインラインのままで、改行しません。 これは、{{htmlelement("a")}} 要素がデフォルトで `display: inline` であるためです。 +CSS でページレイアウトを実現するための主な方法は、すべて `display` プロパティの値で指定します。 このプロパティにより、既定の表示方法を変更することができます。 通常フローに属するすべての要素には `display` の値が設定されており、この値によって要素の既定のふるまいが決まります。 例えば、英語の文書内で{{htmlelement("p", "段落")}}が上から下へ表示されるのは、`display: block` でスタイルが設定されているためです。段落内のテキストを囲んでリンクを作成した場合、そのリンクはテキストの他の部分と同じ行に表示され、改行されることはありません。これは {{htmlelement("a")}} 要素が、既定値では `display: inline` だからです。 -このような display のデフォルトのふるまいは変更できます。 例えば、{{htmlelement("li")}} 要素はデフォルトで `display: block` です。 つまり、英語の文書ではリスト項目は上下に表示されます。 `display` の値を `inline` に変更した場合、単語が文中で行うように、それらは互いに隣接して表示されます。 任意の要素に対して `display` の値を変更できるということは、どのように見えるかについて心配することなく、意味論的(semantic)な視点で HTML 要素を選択できるということです。 見た目はあなたが変えることができるものです。 +表示の既定のふるまいは変更できます。例えば、 {{htmlelement("li")}} 要素は既定で `display: block` です。 つまり、英語の文書ではリストアイテムは下へ下へと表示されます。 `display` の値を `inline` に変更した場合、文中で単語が並部のと同様に、互いに隣接して表示されます。 任意の要素に対して `display` の値を変更できるということは、どのように見えるかについて心配することなく、意味論的 (semantic) な視点で HTML 要素を選択できるということです。 見た目はあなたが変えることができるものです。 -ひとつの項目を `block` から `inline` に、またはその逆に切り替えてデフォルトの表示方法を変更することに加えて、より大きい単位で作用するいくつかのレイアウト手法を `display` の値を通じて使い始めることができます。 ただし、これらを使用するときは、通常、追加のプロパティを指定する必要があります。 要素のレイアウトを検討する目的において最も重要な値は `display: flex` と `display: grid` の 2 つです。 +あるアイテムを `block` から `inline` に、またはその逆に切り替えて既定の表示方法を変更することに加えて、より大きい単位で作用するいくつかのレイアウト手法を `display` の値を通じて使い始めることができます。 ただし、これらを使用するときは、通常、追加のプロパティを指定する必要があります。 要素のレイアウトを検討する目的において最も重要な値は `display: flex` と `display: grid` の 2 つです。 ## フレックスボックス -フレックスボックス（Flexbox）は [Flexible Box Layout](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout) Module の略称で、行または列のいずれかとして、物を 1 次元にレイアウトすることを容易にするように設計されています。 フレックスボックスを使うには、`display: flex` をレイアウトしたい要素の親要素に適用します。 その直接の子はすべてフレックス項目になります。これは簡単な例で見ることができます。 +フレックスボックス (Flexbox) は[フレキシブルボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュールの略称で、物を 1 次元に、行と列のいずれかの方向にレイアウトしやすくするように設計されています。 フレックスボックスを使うには、`display: flex` をレイアウトしたい要素の親要素に適用します。 その直接の子はすべてフレックスアイテムになります。これは簡単な例で見ることができます。 + +### display: flex を設定 -以下の HTML マークアップは、3 つの {{htmlelement("div")}} 要素が入っている `wrapper` クラスを持つ包含要素を示しています。 デフォルトでは、これらは英語の文書では上下にブロック要素として表示されます。 +以下の HTML マークアップは、3 つの {{htmlelement("div")}} 要素が入っている `wrapper` クラスを持つ包含要素を示しています。 既定では、これらは英語の文書では上下にブロック要素として表示されます。 -ただし、`display: flex` を親に追加すると、3 つの項目は列に配置されます。 これは、それらが*フレックス項目*になり、フレックスボックスがそれらに与えるいくつかの初期値を使用するためです。 {{cssxref("flex-direction")}} の初期値は `row` なので、行として表示されます。 {{cssxref("align-items")}} プロパティの初期値は `stretch` であるため、それらはすべて最も高い項目の高さまで伸びているように見えます。 これは、項目がフレックスコンテナの高さまで伸びることを意味します。 この場合、項目は最も高い項目によって定義されます。 項目はすべてコンテナの先頭に配置され、行の末尾に余分なスペースが残ります。 +ただし、`display: flex` を親に追加すると、3 つのアイテムは列に配置されます。 これは、それらが*フレックスアイテム*になり、フレックスボックスがそれらに与えるいくつかの初期値を使用するためです。 {{cssxref("flex-direction")}} の初期値は `row` なので、行として表示されます。 {{cssxref("align-items")}} プロパティの初期値は `stretch` であるため、それらはすべて最も高いアイテムの高さまで伸びているように見えます。 これは、アイテムがフレックスコンテナーの高さまで伸びることを意味します。 この場合、アイテムは最も高いアイテムによって定義されます。 アイテムはすべてコンテナーの先頭に配置され、行の末尾に余分なスペースが残ります。 ```css hidden * { box-sizing: border-box; } - .wrapper > div { border-radius: 5px; background-color: rgb(207, 232, 220); @@ -102,17 +121,18 @@ CSS でページレイアウトを実現するための主な方法は、`displa ``` -{{ EmbedLiveSample('Flex_1', '300', '200') }} +{{ EmbedLiveSample('Setting_display_flex', '300', '200') }} + +### flex プロパティの設定 -フレックスコンテナに適用できる上記のプロパティに加えて、フレックス項目に適用できるプロパティがあります。 これらのプロパティは、とりわけ、項目のたわみ方を変えることができ、利用可能なスペースに収まるように項目を拡大および縮小することを可能にします。 +フレックスコンテナーに適用できる上記のプロパティに加えて、フレックスアイテムに適用できるプロパティがあります。 これらのプロパティは、とりわけ、アイテムのたわみ方を変えることができ、利用可能なスペースに収まるようにアイテムを拡大および縮小することができます。 -この単純な例として、すべての子項目に `1` の値の {{cssxref("flex")}} プロパティを追加できます。 これにより、末尾にスペースを残すのではなく、すべての項目が拡大してコンテナがいっぱいになります。 より多くのスペースがあるならば、項目はより広くなり、スペースが少ないと狭くなります。 さらに、マークアップに別の要素を追加すると、項目はすべてスペースを空けるために小さくなります — サイズに関係なく、同じ大きさのスペースを占めるようにサイズが調整されます。 +この単純な例として、すべての子アイテムに `1` の値の {{cssxref("flex")}} プロパティを追加できます。 これにより、末尾にスペースを残すのではなく、すべてのアイテムが拡大してコンテナーがいっぱいになります。 より多くのスペースがあるならば、アイテムはより広くなり、スペースが少ないと狭くなります。 さらに、マークアップに別の要素を追加すると、アイテムはすべてスペースを空けるために小さくなります — サイズに関係なく、同じ大きさのスペースを占めるようにサイズが調整されます。 ```css hidden * { box-sizing: border-box; } - .wrapper > div { border-radius: 5px; background-color: rgb(207, 232, 220); @@ -138,15 +158,17 @@ CSS でページレイアウトを実現するための主な方法は、`displa ``` -{{ EmbedLiveSample('Flex_2', '300', '200') }} +{{ EmbedLiveSample('Setting_the_flex_property', '300', '200') }} > **メモ:** これはフレックスボックスで可能なことの非常に短い紹介です。 詳細については、[フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox)の記事を参照してください。 ## グリッドレイアウト -フレックスボックスは 1 次元レイアウト用に設計されていますが、グリッドレイアウト（Grid Layout）は 2 次元用に設計されています — 行と列に物を並べます。 +フレックスボックスは 1 次元レイアウト用に設計されていますが、グリッドレイアウト (Grid Layout) は 2 次元用に設計されています。行と列に物事を並べます。 + +### display: grid の設定 -繰り返しになりますが、`display: grid` という特定の `display` の値でグリッドレイアウト（Grid Layout）をオンにすることができます。 以下の例では、コンテナといくつかの子要素とともに、`flex` の例と同様のマークアップを使用しています。 `display: grid` の使用に加えて、{{cssxref("grid-template-rows")}} プロパティと {{cssxref("grid-template-columns")}} プロパティをそれぞれ使用して、親の行と列のトラックをいくつか定義します。 それぞれ `1fr` の 3 列と `100px` の 2 行を定義しました。 子要素に規則を置く必要はなく、自動的にグリッドが作成したセルに配置されます。 +繰り返しになりますが、`display: grid` という特定の `display` の値でグリッドレイアウト (Grid Layout) をオンにすることができます。 以下の例では、コンテナーといくつかの子要素とともに、`flex` の例と同様のマークアップを使用しています。 `display: grid` の使用に加えて、{{cssxref("grid-template-rows")}} プロパティと {{cssxref("grid-template-columns")}} プロパティをそれぞれ使用して、親の行と列のトラックをいくつか定義します。 それぞれ `1fr` の 3 列と `100px` の 2 行を定義しました。 子要素にルールを置く必要はなく、自動的にグリッドが作成したセルに配置されます。 ```css hidden * { @@ -165,7 +187,7 @@ CSS でページレイアウトを実現するための主な方法は、`displa display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; - grid-gap: 10px; + gap: 10px; } ``` @@ -180,9 +202,11 @@ CSS でページレイアウトを実現するための主な方法は、`displa ``` -{{ EmbedLiveSample('Grid_1', '300', '330') }} +{{ EmbedLiveSample('Setting_display_grid', '300', '330') }} -グリッドを作成したら、上記の自動配置のふるまいに頼らずに、明示的に項目を配置できます。 以下の 2 番目の例では、同じグリッドを定義しましたが、今回は 3 つの子項目を使用しています。 {{cssxref("grid-column")}} プロパティと {{cssxref("grid-row")}} プロパティを使用して各項目の開始ラインと終了ラインを設定しました。 これにより、項目が複数のトラックにまたがるようになります。 +### グリッドへのアイテムの配置 + +グリッドを作成したら、上記の自動配置のふるまいに頼らずに、明示的にアイテムを配置できます。 以下の 2 番目の例では、同じグリッドを定義しましたが、今回は 3 つの子アイテムを使用しています。 {{cssxref("grid-column")}} プロパティと {{cssxref("grid-row")}} プロパティを使用して各アイテムの開始ラインと終了ラインを設定しました。 これにより、アイテムが複数のトラックにまたがるようになります。 ```css hidden * { @@ -201,7 +225,7 @@ CSS でページレイアウトを実現するための主な方法は、`displa display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; - grid-gap: 10px; + gap: 10px; } .box1 { @@ -228,24 +252,24 @@ CSS でページレイアウトを実現するための主な方法は、`displa ``` -{{ EmbedLiveSample('Grid_2', '300', '330') }} +{{ EmbedLiveSample('Placing_items_on_the_grid', '300', '330') }} -> **メモ:** これら 2 つの例は、グリッドレイアウトの機能のほんの一部です。 詳細については、[グリッドレイアウト](/ja/docs/Learn/CSS/CSS_layout/Grids)の記事を参照してください。 +> **メモ:** これら 2 つの例は、グリッドレイアウトの機能のほんの一部です。詳細については、[グリッドレイアウト](/ja/docs/Learn/CSS/CSS_layout/Grids)の記事を参照してください。 このガイドの残りの部分では、他のレイアウト方法について説明します。 これは、ページの主なレイアウト構造にとってはそれほど重要ではありませんが、それでも特定のタスクを達成するのに役立ちます。 各レイアウトタスクの性質を理解することで、デザインの特定の構成要素を見たときに、それに最も適したレイアウトの種類が明らかになることがすぐにわかります。 -## フロート +## 浮動要素 -要素を浮動すると、その要素とそれに通常フローで続くブロックレベル要素のふるまいが変わります。 要素が左または右に移動されて通常フローから除かれ、囲むコンテンツが浮動項目の周囲に浮かびます。 +要素を浮動すると、その要素とそれに通常フローで続くブロックレベル要素のふるまいが変わります。 要素が左または右に移動されて通常フローから除かれ、周囲のコンテンツが浮動アイテムの周囲に浮かびます。 {{cssxref("float")}} プロパティには次の 4 つの可能な値があります。 - `left` — 要素を左に浮かべる。 - `right` — 要素を右に浮かべる。 -- `none` — まったく浮動しないことを指定する。 これがデフォルト値です。 +- `none` — まったく浮動しないことを指定する。 これが既定値です。 - `inherit` — `float` プロパティの値がこの要素の親要素から継承されるべきであることを指定します。 -以下の例では、`I am a basic block level element.
``` -この HTML はデフォルトで次の CSS を使ってスタイルされます。 +この HTML は既定で次の CSS を使ってスタイルされます。 ```css body { @@ -341,13 +365,20 @@ p { } ``` +```css hidden +.positioned { + background: rgba(255, 84, 104, 0.3); + border: 2px solid rgb(255, 84, 104); +} +``` + レンダリングされた出力は次のとおりです。 {{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }} ### 相対位置指定 -相対位置指定（Relative positioning）を使用すると、デフォルトで設定されている通常フローの位置から項目をずらすことができます。 これは、アイコンをテキストラベルに合わせるためにアイコンを少し下に移動するなどのタスクを実行できることを意味します。 これを行うには、相対位置指定を追加するために次の規則を追加します。 +相対位置指定 (Relative positioning) を使用すると、既定で設定されている通常フローの位置からアイテムをずらすことができます。 これは、アイコンをテキストラベルに合わせるためにアイコンを少し下に移動するなどのタスクを実行できることを意味します。 これを行うには、相対位置指定を追加するために次のルールを追加します。 ```css .positioned { @@ -357,7 +388,7 @@ p { } ``` -ここで私たちは真ん中の段落に `relative` の {{cssxref("position")}} の値を与えます — これはそれ自身では何もしませんので、{{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティも追加します。 これらは影響を受けた要素を右下に動かすのに役立ちます — これはあなたが期待していたのとは反対のように思えるかもしれませんが、要素の左側と上側を押されていると考える必要があり、その結果として右下に移動します。 +ここで、中央の段落の {{cssxref("position")}} に `relative` の値を与えます。これはそれ自身では何もしませんので、 {{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティも追加します。これらは影響を受けた要素を右下に動かすのに役立ちます。期待とは反対のように思えるかもしれませんが、要素の左側と上側を押されていると考える必要があり、その結果として右下に移動します。 このコードを追加すると、次のようになります。 @@ -384,7 +415,7 @@ p { } ``` -```css +```css hidden .positioned { position: relative; background: rgba(255, 84, 104, 0.3); @@ -394,13 +425,13 @@ p { } ``` -{{ EmbedLiveSample('Relative_1', '100%', 300) }} +{{ EmbedLiveSample('Relative_positioning', '100%', 300) }} ### 絶対位置指定 -絶対位置指定（Absolute positioning）は、通常フローから要素を完全に除き、包含ブロックの端からのオフセットを使用して配置するために使用されます。 +絶対位置指定 (Absolute positioning) は、通常フローから要素を完全に外し、包含ブロックの端からのオフセットを使用して配置するために使用されます。 -元の位置指定のない例に戻ると、絶対位置指定を実装するために次の CSS 規則を追加できます。 +元の位置指定されていない例に戻ると、絶対位置指定を実装するために以下の CSS ルールを追加することができます。 ```css .positioned { @@ -410,7 +441,7 @@ p { } ``` -ここでは、真ん中の段落に `absolute` の {{cssxref("position")}} の値と、前と同じ {{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティを与えます。 ただし、このコードを追加すると、次のようになります。 +ここでは、中央の段落の {{cssxref("position")}} に `absolute` の値と、前と同じ {{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティを指定します。このコードを追加すると、次のようになります。 ```html hiddenParagraph 1.
-Paragraph 2.
-Paragraph 3.
-``` - -```html hidden -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus - ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus - laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, - tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus - neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat - volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros - pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec - lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. + ut, rutrum luctus orci.
- Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada - ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed - est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus - tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus - sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis - vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque - penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed + auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex + malesuada et.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam - dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus - ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus - laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, - tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus - neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat - volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros - pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec - lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. + In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet + turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas + augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id + ornare felis, eget fermentum sapien.
``` @@ -528,11 +532,11 @@ body { } ``` -{{ EmbedLiveSample('Fixed_1', '100%', 200) }} +{{ EmbedLiveSample('Fixed_positioning', '100%', 200) }} ### 粘着位置指定 -粘着位置指定（Sticky positioning）は、私たちが自由に使える最後の位置指定方法です。 デフォルトの静的位置指定に固定位置指定を組み合わせたものです。 項目に `position: sticky` があるとき、それは定義したビューポートからのオフセットにぶつかるまで通常フローでスクロールします。 その時点で、`position：fixed` が適用されているかのように「動かなくなります」。 +粘着位置指定 (Sticky positioning) は、私たちが自由に使える最後の位置指定方法です。 既定の静的位置指定に固定位置指定を組み合わせたものです。 アイテムに `position: sticky` があるとき、それは定義したビューポートからのオフセットにぶつかるまで通常フローでスクロールします。 その時点で、`position：fixed` が適用されているかのように「動かなくなります」。 ```html hiddenParagraph 1.
-Paragraph 2.
-Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed - est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus - tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies - lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis - vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque - penatibus et magnis dis parturient montes, nascetur ridiculus mus. + est. Nam id risus quis ante semper consectetur eget aliquam lorem. +
+ ++ Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris + ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus + viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum + sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus + mus.