画面の4つの角にdivタグを置くには

画面の4つの角にdivタグを置くにはどうしたらいいでしょうか？
いままでそのようなデザインをしたことがなくて、スペースとかでやってやるくらいしか思い浮かばないのですが...

行動規範の内容に同意します

回答1件

ベストアンサー

potisionプロパティを使う

potisionプロパティを使用し、四隅にdiv要素をそれぞれ配置しています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .wrapper {
13            position: relative;
14            width: 100vw;
15            height: 100vh;
16        }
17
18        .wrapper .box {
19            position: absolute;
20            width: 50px;
21            height: 50px;
22            background-color: #f0ad4e;
23        }
24
25        .wrapper .box:nth-of-type(odd) {
26            left: 0;
27            background-color: #ff0;
28        }
29
30        .wrapper .box:nth-of-type(even) {
31            right: 0;
32        }
33
34        .wrapper .box:nth-of-type(n + 3) {
35            bottom: 0;
36        }
37
38        .wrapper .box:nth-of-type(-n + 2) {
39            top: 0;
40        }
41    </style>
42</head>
43<body>
44<div class="wrapper">
45    <div class="box"></div>
46    <div class="box"></div>
47    <div class="box"></div>
48    <div class="box"></div>
49</div>
50</body>
51</html>

flexを使う

もうちょっと良いやり方があるような気がしますので、質問者さんも是非考えてみてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .wrapper {
13            display: flex;
14            width: 100vw;
15            height: 100vh;
16            flex-wrap: wrap;
17        }
18
19        .box, .box-child {
20            width: 100px;
21            height: 100px;
22        }
23
24        .box {
25            background-color: #f0ad4e;
26        }
27
28        .box:nth-of-type(odd) {
29            display: flex;
30            flex-direction: column;
31            background-color: #fff;
32            flex: 50%;
33        }
34
35        .box-child {
36            background-color: #ff0;
37            align-self: flex-start;
38        }
39
40        .box:nth-of-type(n+3) {
41            margin-top: auto;
42        }
43    </style>
44</head>
45<body>
46<div class="wrapper">
47    <div class="box">
48        <div class="box-child"></div>
49    </div>
50    <div class="box"></div>
51    <div class="box">
52        <div class="box-child"></div>
53    </div>
54    <div class="box"></div>
55</div>
56</body>
57</html>