【CSS】position（基礎）

投稿者: | 2020年10月17日
0件のコメント
CSSアイキャッチ

今回はCSSでpositionについて解説していきたいと思います。

昔HPを自作したときにこのpositionでは非常に悩まされました。それだけ難しいです。

使用頻度が高めで重要度も高いので備忘録と復習の意味も兼ねて解説していきたいと思います。

 

positionプロパティの位置指定

位置指定する際は下記の4つで数値で指定します。

top

bottom

left

right

 

例

top:50px;

 

 

positionプロパティ（基本形4つ）

positionプロパティ

 

今回は下記のサンプルを用いてに4つ動きを見ていきたいと思います。

●今回使用するサンプル

positionSample

 

 

 

absoute

初期値：ページの左上

※親ブロックに適用させたい場合は親ブロックにrelativeを適用させます。

位置指定：位置の指定ができます。（top left bottom right）プロパティ

【位置指定なし】

1
2
3
4
5
6
.jibun{
    position: absolute;
}
.jibun2{
    position: absolute;
}

親ブロックの左上を基点に自分1と自分2は重なって配置されます。

absoute
 
 

【位置指定あり】

1
2
3
4
5
6
7
8
9
10
.jibun{
    position: absolute;
    top: 20px;
    left:20px;
}
.jibun2{
    position: absolute;
    top: 20px;
    left:20px;
}

 親ブロックの左上を基点に自分1と自分2は同じ位置に重なって設定した値に配置されます。

absoute設定あり
 
 
 
 
 
 
 

fixed

初期値：親ブロックの左上

位置指定：位置の指定ができます。（top left bottom right）プロパティ

【位置指定なし】

1
2
3
4
5
6
.jibun{
    position: fixed;
}
.jibun2{
    position: fixed;
}

親ブロックの左上を基点に自分1と自分2は同じ場所に重なって配置されスクロールしても位置が固定されます。

fixed
 
 

【位置指定あり】

1
2
3
4
5
6
7
8
9
10
.jibun{
    position: fixed;
    top: 0px;
    left:0px;
}
.jibun2{
    position: fixed;
    top: 0px;
    left:0px;
}

ポイントは位置指定を0pxにしただけで親ブロックの左上を基点ではなく、ページの左上が基点に自分1と自分2は重なって表示されスクロールしても固定表示されます。

fixed設定あり
 
 
 
 
 
 

relative

初期値：ページに配置された位置

位置指定：位置の指定ができます。（top left bottom right）プロパティ

ページに配置された位置からの自分自身の位置を変更できます。

【位置指定なし】

1
2
3
4
5
6
.jibun{
    position: relative;
}
.jibun2{
    position: relative;
}

ページに配置された位置が規定の配置になります。

relative
 
 

【位置指定あり】

1
2
3
4
5
6
7
8
9
10
.jibun{
    position: relative;
    top: 50px;
    left:50px;
}
.jibun2{
    position: relative;
    top: 50px;
    left:50px;
}

規定の配置から自分1と自分2は指定した値で配置されます。

relative設定あり
 
 
 
 
 
 

static

初期値：ページに配置された位置

位置指定：位置指定はできません。

配置はrelative位置指定なしと一緒です。

 

 

 

今回使用したHTML

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
<!DOCTYPE html>
<html lang="jn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
</head>
 
<body>
    <div class="oya">
        <p>親グロック</p>
        <div class="jibun">
            <div class="pzone">
                <p>自分1</p>
            </div>
        </div>
        <div class="jibun2">
            <div class="pzone">
                <p>自分2</p>
            </div>
        </div>
    </div>
    <div class="ppp">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
    </div>
</body>
</html>

 

今回使用したsample.css

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
@charset "utf-8";
 
.oya {
    background-color: red;
    width: 300px;
    height: 300px;
    border: solid 1px;
    margin-top: 100px;
    position: relative;
    left: 100px;
    font-size: 30px;
    
}
.jibun {
    background-color: blue;
    width: 100px;
    height: 100px;
    color: greenyellow;
    font-size: 30px;
}
 
.jibun2 {
    background-color:green;
    width: 100px;
    height: 100px;
    color: greenyellow;
    font-size: 30px;
}
.oya p{
    position: absolute;
    top: 0px;
    right: 10px;
    margin-top: 0px;
}
.pzone p{
    position: relative;
    top: 0px;
    left: 10px;
    margin: 0px;
}
.ppp{
    font-size: 30px;
}

 

いかがでしたでしょう。

この動きを見て何ができるかを想像できたら、もうあなたはマスターできると思います。

 

このページの右下のTOPに戻るの上向きの矢印が表示されていると思います。

これはまさに今勉強したfixedで画面をスクロールしても固定の応用を使用してbottomとrightプロパティを使用すれば配置はできちゃいます。

これ自体は私は面倒なのでワードプレスのプラグインを使用して表示させてますが、今回勉強した応用を使えば自作でもJavaScriptと併用して楽に作成ができるようになります(゜▽゜)

 

まとめ

今回positionプロパティに関して解説しましたが、これはあくまでも基本形です。HTMLのDOMの構造をちゃんと理解しないと予期せぬ動きになる可能性があります。それだけ奥が深いです。

基本形を頭に叩き込んでおけば、その後の応用にも対応ができるので基本を忠実にやっていきましょう！

もっと複雑な詳細を知りたい方は自分でブロック（div）を作成し深い階層にして色を付け、positionプロパティの値もそれぞれ違う組み合わせにして表示させて動きを見るしか方法はありません。

 

以上です(^^)