回答編集履歴

1

コード追記

2021/01/06 13:03

投稿

hatena19
hatena19

スコア33551

test CHANGED
@@ -31,3 +31,95 @@
31
31
 
32
32
 
33
33
  現在では floatでレイアウトを決めるのは古いです。Flexbox を使うのが主流です。あるいは CSS Grid というのもあります。この辺の学習をされることをお勧めします。
34
+
35
+
36
+
37
+ ---
38
+
39
+ Flexbox を使った場合のコード例
40
+
41
+
42
+
43
+ ```html
44
+
45
+ <header>
46
+
47
+ header
48
+
49
+ </header>
50
+
51
+ <div class="wrapper">
52
+
53
+ <main>
54
+
55
+ main
56
+
57
+ </main>
58
+
59
+ <aside>
60
+
61
+ sidemenu
62
+
63
+ </aside>
64
+
65
+ </div>
66
+
67
+ <footer>
68
+
69
+ footer
70
+
71
+ </footer>
72
+
73
+ ```
74
+
75
+ ```css
76
+
77
+ header {
78
+
79
+ width:100%;
80
+
81
+ height:100px;
82
+
83
+ background-color: gray;
84
+
85
+ }
86
+
87
+ .wrapper {
88
+
89
+ display: flex;
90
+
91
+ max-width: 970px;
92
+
93
+ margin: 30px auto;
94
+
95
+ }
96
+
97
+ main {
98
+
99
+ flex: 1;
100
+
101
+ background-color: aqua;
102
+
103
+ height: 400px;
104
+
105
+ }
106
+
107
+ aside {
108
+
109
+ width:275px;
110
+
111
+ background-color: pink;
112
+
113
+ }
114
+
115
+ footer{
116
+
117
+ width:100%;
118
+
119
+ height:100px;
120
+
121
+ background-color: #2D3D54;
122
+
123
+ }
124
+
125
+ ```