diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/absolute/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/absolute/index.html deleted file mode 100644 index 78451cc5e..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/absolute/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - Title - - - -
box1
-
box2
-
box3
-
box4
-
box5
-
box6
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/absolute/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/absolute/style.css deleted file mode 100644 index 09c085e5f..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/absolute/style.css +++ /dev/null @@ -1,38 +0,0 @@ -.box1 { - background-color: lightcoral; - width: 200px; - height: 200px; -} - -.box2 { - position: absolute; - top: 50px; - left: 50px; - background-color: lightblue; - width: 200px; - height: 200px; -} - -.box3 { - background-color: lightgreen; - width: 200px; - height: 200px; -} - -.box4 { - background-color: lightseagreen; - width: 200px; - height: 200px; -} - -.box5 { - background-color: lightskyblue; - width: 200px; - height: 200px; -} - -.box6 { - background-color: lightgoldenrodyellow; - width: 200px; - height: 200px; -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/box-model/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/box-model/index.html deleted file mode 100644 index e0b365dad..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/box-model/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - Title - - - -
Foo
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/box-model/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/box-model/style.css deleted file mode 100644 index e6751f10e..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/box-model/style.css +++ /dev/null @@ -1,7 +0,0 @@ -.box { - margin: 30px; - padding: 30px; - border: 10px solid #aaa; - border-radius: 10px; - box-shadow: 0px 0px 2px 1px #aaa; -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/display/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/display/index.html deleted file mode 100644 index 3219e9bab..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/display/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - Title - - - -
box1
- box2 - - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/display/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/display/style.css deleted file mode 100644 index 65f3f5173..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/display/style.css +++ /dev/null @@ -1,9 +0,0 @@ -.box1 { - background-color: lightcoral; - display: inline; -} - -.box2 { - background-color: lightblue; - display: block; -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/exercise/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/exercise/index.html deleted file mode 100644 index f61060347..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/exercise/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - 課題 - - - - -
-
-

Free

-
無料
- - -
-
-

Basic

-
$5
- - -
-
-

Premium

-
$20
- - -
-
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/exercise/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/exercise/style.css deleted file mode 100644 index 70c9076da..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/exercise/style.css +++ /dev/null @@ -1,61 +0,0 @@ -body { - background-color: #eee; -} - -#container { - display: flex; - justify-content: center; -} - -.plan { - display: flex; - flex-direction: column; - flex: 1; - margin: 20px; - padding: 15px 25px; - border: 1px solid #bbb; - border-radius: 5px; - background-color: #fff; - box-shadow: 0 0 5px #ccc; -} - -h1 { - font-size: 1.5em; -} - -.price { - margin-bottom: 10px; - font-weight: bold; - font-size: 36px; - color: #000; -} - -#container h1 { - margin: 10px 0; - font-weight: normal; -} - -.button { - align-self: flex-start; - margin: 10px 0px; - padding: 10px 40px; - border: 1px solid #0af; - border-radius: 5px; - background-color: #0af; - color: #fff; - font-size: 1em; -} - -ul { - padding: 0 0 0 20px; -} - -#container button:hover { - background-color: #0cf; -} - -@media (max-width: 1024px) { - #container { - display: block; - } -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/fixed/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/fixed/index.html deleted file mode 100644 index 78451cc5e..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/fixed/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - Title - - - -
box1
-
box2
-
box3
-
box4
-
box5
-
box6
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/fixed/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/fixed/style.css deleted file mode 100644 index 589f633df..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/fixed/style.css +++ /dev/null @@ -1,38 +0,0 @@ -.box1 { - background-color: lightcoral; - width: 200px; - height: 200px; -} - -.box2 { - position: fixed; - top: 50px; - left: 50px; - background-color: lightblue; - width: 200px; - height: 200px; -} - -.box3 { - background-color: lightgreen; - width: 200px; - height: 200px; -} - -.box4 { - background-color: lightseagreen; - width: 200px; - height: 200px; -} - -.box5 { - background-color: lightskyblue; - width: 200px; - height: 200px; -} - -.box6 { - background-color: lightgoldenrodyellow; - width: 200px; - height: 200px; -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/flex/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/flex/index.html deleted file mode 100644 index 826e12394..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/flex/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - Title - - - -
-
box1
-
box2
-
box3
-
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/flex/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/flex/style.css deleted file mode 100644 index 57e9cf79b..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/flex/style.css +++ /dev/null @@ -1,21 +0,0 @@ -.wrapper { - display: flex; -} - -.box1 { - background-color: lightcoral; - width: 100px; - height: 100px; -} - -.box2 { - background-color: lightblue; - width: 100px; - height: 100px; -} - -.box3 { - background-color: lightgreen; - width: 100px; - height: 100px; -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/grid/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/grid/index.html deleted file mode 100644 index 59b7ea7c1..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/grid/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - Title - - - -
-
box1
-
box2
-
box3
-
box4
-
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/grid/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/grid/style.css deleted file mode 100644 index acc1d49f0..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/grid/style.css +++ /dev/null @@ -1,25 +0,0 @@ -.wrapper { - display: grid; - grid-template-columns: 100px 100px 100px; - grid-template-rows: 100px 100px; -} - -.box1 { - background-color: lightcoral; -} - -.box2 { - background-color: lightblue; -} - -.box3 { - grid-column: 3 / 4; - grid-row: 1 / 3; - background-color: lightgreen; -} - -.box4 { - grid-column: 1 / 3; - grid-row: 2 / 3; - background-color: lightseagreen; -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/max-min-width/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/max-min-width/index.html deleted file mode 100644 index f78bf737d..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/max-min-width/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - Title - - - -
box1
-
box2
-
box3
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/max-min-width/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/max-min-width/style.css deleted file mode 100644 index 316a88014..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/max-min-width/style.css +++ /dev/null @@ -1,16 +0,0 @@ -.box1 { - background-color: lightcoral; - width: 80%; - max-width: 800px; -} - -.box2 { - background-color: lightblue; - width: 80%; - min-width: 500px; -} - -.box3 { - background-color: lightgreen; - width: 80%; -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/media-query/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/media-query/index.html deleted file mode 100644 index 0661835c2..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/media-query/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Title - - - -
box1
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/media-query/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/media-query/style.css deleted file mode 100644 index 984f80543..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/media-query/style.css +++ /dev/null @@ -1,9 +0,0 @@ -.box1 { - background-color: lightcoral; -} - -@media (max-width: 800px) { - .box1 { - background-color: lightblue; - } -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/percent/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/percent/index.html deleted file mode 100644 index 0e1ea1b29..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/percent/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - Title - - - -
box1
-
box2
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/percent/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/percent/style.css deleted file mode 100644 index ce03fa250..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/percent/style.css +++ /dev/null @@ -1,9 +0,0 @@ -.box1 { - background-color: lightcoral; - width: 50%; -} - -.box2 { - background-color: lightblue; - width: 700px; -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/relative-absolute/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/relative-absolute/index.html deleted file mode 100644 index 70bb6704c..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/relative-absolute/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Title - - - -
- box1 -
box2
-
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/relative-absolute/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/relative-absolute/style.css deleted file mode 100644 index 9d8c3573b..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/relative-absolute/style.css +++ /dev/null @@ -1,16 +0,0 @@ -.box1 { - position: relative; - margin-left: 200px; - width: 400px; - height: 400px; - background-color: lightcoral; -} - -.box2 { - position: absolute; - right: 50px; - bottom: 50px; - width: 200px; - height: 200px; - background-color: lightblue; -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/relative/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/relative/index.html deleted file mode 100644 index 78451cc5e..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/relative/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - Title - - - -
box1
-
box2
-
box3
-
box4
-
box5
-
box6
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/relative/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/relative/style.css deleted file mode 100644 index ce9b0206b..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/relative/style.css +++ /dev/null @@ -1,38 +0,0 @@ -.box1 { - background-color: lightcoral; - width: 200px; - height: 200px; -} - -.box2 { - position: relative; - top: 50px; - left: 50px; - background-color: lightblue; - width: 200px; - height: 200px; -} - -.box3 { - background-color: lightgreen; - width: 200px; - height: 200px; -} - -.box4 { - background-color: lightseagreen; - width: 200px; - height: 200px; -} - -.box5 { - background-color: lightskyblue; - width: 200px; - height: 200px; -} - -.box6 { - background-color: lightgoldenrodyellow; - width: 200px; - height: 200px; -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/space-around/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/space-around/index.html deleted file mode 100644 index 826e12394..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/space-around/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - Title - - - -
-
box1
-
box2
-
box3
-
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/space-around/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/space-around/style.css deleted file mode 100644 index f948edb78..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/space-around/style.css +++ /dev/null @@ -1,22 +0,0 @@ -.wrapper { - display: flex; - justify-content: space-around; -} - -.box1 { - background-color: lightcoral; - width: 100px; - height: 100px; -} - -.box2 { - background-color: lightblue; - width: 100px; - height: 100px; -} - -.box3 { - background-color: lightgreen; - width: 100px; - height: 100px; -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/three-div/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/three-div/index.html deleted file mode 100644 index f78bf737d..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/three-div/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - Title - - - -
box1
-
box2
-
box3
- - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/three-div/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/three-div/style.css deleted file mode 100644 index 397980405..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/three-div/style.css +++ /dev/null @@ -1,11 +0,0 @@ -.box1 { - background-color: lightcoral; -} - -.box2 { - background-color: lightblue; -} - -.box3 { - background-color: lightgreen; -} diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/three-span/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/three-span/index.html deleted file mode 100644 index 01bc6bb82..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/three-span/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - Title - - - - box1 - box2 - box3 - - diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/three-span/style.css b/docs/2-browser-apps/05-css-arrangement/_samples/three-span/style.css deleted file mode 100644 index 397980405..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/three-span/style.css +++ /dev/null @@ -1,11 +0,0 @@ -.box1 { - background-color: lightcoral; -} - -.box2 { - background-color: lightblue; -} - -.box3 { - background-color: lightgreen; -} diff --git a/docs/2-browser-apps/05-css-arrangement/devtool-boxmodel.png b/docs/2-browser-apps/05-css-arrangement/devtool-boxmodel.png deleted file mode 100644 index e6049dd87..000000000 Binary files a/docs/2-browser-apps/05-css-arrangement/devtool-boxmodel.png and /dev/null differ diff --git a/docs/2-browser-apps/05-css-arrangement/exercise-smartphone.png b/docs/2-browser-apps/05-css-arrangement/exercise-smartphone.png deleted file mode 100644 index fb0e00c46..000000000 Binary files a/docs/2-browser-apps/05-css-arrangement/exercise-smartphone.png and /dev/null differ diff --git a/docs/2-browser-apps/05-css-arrangement/exercise.png b/docs/2-browser-apps/05-css-arrangement/exercise.png deleted file mode 100644 index 465f54ba3..000000000 Binary files a/docs/2-browser-apps/05-css-arrangement/exercise.png and /dev/null differ diff --git a/docs/2-browser-apps/05-css-arrangement/flex.png b/docs/2-browser-apps/05-css-arrangement/flex.png deleted file mode 100644 index c86b266a8..000000000 Binary files a/docs/2-browser-apps/05-css-arrangement/flex.png and /dev/null differ diff --git a/docs/2-browser-apps/05-css-arrangement/grid-column-row.png b/docs/2-browser-apps/05-css-arrangement/grid-column-row.png deleted file mode 100644 index dc66a5ce7..000000000 Binary files a/docs/2-browser-apps/05-css-arrangement/grid-column-row.png and /dev/null differ diff --git a/docs/2-browser-apps/05-css-arrangement/grid.png b/docs/2-browser-apps/05-css-arrangement/grid.png deleted file mode 100644 index ca7685936..000000000 Binary files a/docs/2-browser-apps/05-css-arrangement/grid.png and /dev/null differ diff --git a/docs/2-browser-apps/05-css-arrangement/index.mdx b/docs/2-browser-apps/05-css-arrangement/index.mdx deleted file mode 100644 index 8969bb3cb..000000000 --- a/docs/2-browser-apps/05-css-arrangement/index.mdx +++ /dev/null @@ -1,505 +0,0 @@ ---- -title: CSSによる配置（発展） ---- - -import absoluteScroll from "./position-absolute-scroll.mp4"; -import fixedScroll from "./position-fixed-scroll.mp4"; -import percentCss from "./percent-css.mp4"; -import maxMinWidth from "./max-width-min-width.mp4"; -import mediaQuery from "./mediaquery.mp4"; - -## CSSのボックスモデル - -HTMLの要素はすべて、一定の高さと幅を持った四角形だと考えることができます。その四角形は - -- content（中身） -- padding（中身と境界線の間の幅） -- border（境界線） -- margin（境界線の外側の余白） - -の4重構造になっています。 - -[「CSS」のページの演習](https://learn.utcode.net/docs/trial-session/css/#%E8%AA%B2%E9%A1%8C-%E6%99%82%E9%96%93%E3%81%8C%E4%BD%99%E3%81%A3%E3%81%9F%E5%A0%B4%E5%90%88)を例に構造を見てみましょう（構造がわかりやすいよう、`border`を`10px`に変更しています）。 - -```html title="index.html" - - - - - Title - - - -
Foo
- - -``` - -```css title="style.css" -.box { - margin: 30px; - padding: 30px; - border: 10px solid #aaa; - border-radius: 10px; - box-shadow: 0px 0px 2px 1px #aaa; -} -``` - - - -このページを開発者ツールを使って見てみましょう。 -![開発者ツールでボックスモデルを眺める](./devtool-boxmodel.png) - -4重に色分けされた構造が見えます。 - -`content`は主に`width`や`height`などのプロパティを、`padding`, `border`, `margin`はそれぞれ主に`padding`, `border`, `margin`などのプロパティを操作することで制御できます。 - -`width`, `height`, `padding`, `border`, `margin`の値を変えると開発者ツールの表示がどう変わるか試してみましょう。 - -## ブロックレベル要素とインライン要素 - -HTMLの要素は、ブロックレベル要素とインライン要素に分類されます。 - -**ブロックレベル要素**は見出しや段落、表など、文章を構成する基本単位となる要素です。 - -常に前後に改行が入り、可能なところまで（親要素いっぱいまで）左右に広がります。 - -そのため、ブロックレベル要素を複数並べて書くと、上から下へと配置されていきます。 - -ブロックレベル要素には`div`要素や`p`要素、`table`要素、`ul`要素などがあります。 - -以下ではブロックレベル要素である`div`要素を3つ並べています。 - -```html title="index.html" - -
box1
-
box2
-
box3
- -``` - -```css title="style.css" -.box1 { - background-color: lightcoral; -} - -.box2 { - background-color: lightblue; -} - -.box3 { - background-color: lightgreen; -} -``` - - - -![divタグを3つ並べる](./three-div.png) - -**インライン要素**は文章の一部や表の要素など、ブロックレベル要素の内容となる要素です。 - -前後に改行は伴わず、必要な幅だけを占有します。 - -そのため、インライン要素を複数並べて書くと、左から右へと配置されていきます。 - -インライン要素には`span`要素や`a`要素、`img`要素や`input`要素があります。 - -以下ではインライン要素である`span`要素を3つ並べています。 - -```html title="index.html" - - box1 - box2 - box3 - -``` - - - -![span要素を3つ並べる](./three-span.png) - -ブロックレベル要素の中にはブロックレベル要素もインライン要素も配置することができますが、インライン要素の中にブロックレベル要素を配置することはできません。 - -また、インライン要素の場合、`width`や`height`は適用されません。 - -### 確認問題 - -`display`プロパティを操作することで要素の挙動を変更することができます。 - -上記のコードで、ブロックレベル要素である`div`要素に`display: inline`を、インライン要素である`span`要素に`display: block`を指定してみると表示はどう変わるか、試してみましょう。 - - - -## フレックスボックス - -フレックスボックスを利用すると、要素を横や縦に並べたり、間隔を均等に取って並べたり、順番を指定して並べたりといった柔軟な配置を簡単に行うことができます。 - -フレックスボックスを利用するには、配置したい要素の**親要素**に`display: flex`を適用します。 - -以下のように、`box1`, `box2`, `box3`という3つの`div`要素が`wrapper`という`div`要素の中に並んでいる状態を考えましょう。 - -```html title="index.html" - -
-
box1
-
box2
-
box3
-
- -``` - -このままだとブロックレベル要素である`div`要素が並んでいるだけなので、`box1`, `box2`, `box3`は縦に並んで表示されます。 - -![ブロックレベル要素は縦に並んで表示される](./three-blocks.png) - -`box1`, `box2`, `box3`の親要素である`wrapper`に`display: flex`を指定すると、要素は横並びに表示されます。 - -```css title="style.css" -.wrapper { - display: flex; -} -``` - - - -![display: flexを指定すると横並びになる](./flex.png) - -フレックスボックスを使用すると複雑な配置も簡単に実現できます。 - -一つの例として、`justify-content: space-around`を`wrapper`に指定してみると、要素の周囲に同じだけの間隔が空きます。 - -```css title="style.css" -.wrapper { - display: flex; - justify-content: space-around; -} -``` - - - -![justify-content: space-around](./space-around.png) - -他にもたくさんの配置がフレックスボックスによって実現可能なので、調べてみましょう。 - -## グリッド - -1次元で要素をレイアウトしていくフレックスボックスに対して、グリッドには行と列の2次元で要素をレイアウトする発想があります。 - -グリッドを利用するには、配置したい要素の**親要素**に`display: grid`を適用し、`grid-template-columns`プロパティで列の幅を、`grid-template-rows`プロパティで行の幅を指定します。 - -`grid-column`や`grid-row`を使うと、開始ラインや終了ラインを指定して項目を配置することができます。 - -以下のコードを試してみましょう。 - -```html title="index.html" - -
-
box1
-
box2
-
box3
-
box4
-
- -``` - -```css title="style.css" -.wrapper { - display: grid; - grid-template-columns: 100px 100px 100px; - grid-template-rows: 100px 100px; -} - -.box1 { - background-color: lightcoral; -} - -.box2 { - background-color: lightblue; -} - -.box3 { - grid-column: 3 / 4; - grid-row: 1 / 3; - background-color: lightgreen; -} - -.box4 { - grid-column: 1 / 3; - grid-row: 2 / 3; - background-color: lightseagreen; -} -``` - - - -![display: gridを使用する](./grid.png) - -## position - -`position`プロパティを操作すると、要素の位置指定の基準を変更することができます。 - -`position: static`: デフォルトの状態です。 - -`position: relative`: 要素の本来の位置から相対的にどれだけずらすかを指定することができます。 - -```html title="index.html" - -
box1
-
box2
-
box3
-
box4
-
box5
-
box6
- -``` - -```css title="style.css" -.box2 { - position: relative; - top: 50px; - left: 50px; - width: 200px; - height: 200px; - background-color: lightblue; -} -``` - - - -![position: relativeによる調整](./position-relative.png) - -`position: absolute`: 周囲の要素を無視し、ページ内で絶対的にどの位置にあるかを指定することができます。 - -上のコードの`position: relative`を`position: absolute`に変えてみましょう。 - -```css title="style.css" -.box2 { - position: absolute; - top: 50px; - left: 50px; - width: 200px; - height: 200px; - background-color: lightblue; -} -``` - - - -![position: absoluteによる調整](./position-absolute.png) - -`position: fixed`: `absolute`に似ていますが、画面をスクロールしても要素は同じ場所に留まります。 - -上のコードの`position: relative`を`position: fixed`に変えてみましょう。 - -```css title="style.css" -.box2 { - position: fixed; - top: 50px; - left: 50px; - width: 200px; - height: 200px; - background-color: lightblue; -} -``` - - - -以下のように、`absolute`の場合はスクロールすると`box2`も動いていきましたが、 - -