回答編集履歴
4
修正
answer
CHANGED
|
@@ -220,4 +220,4 @@
|
|
|
220
220
|
（CSSの力を布教したい）
|
|
221
221
|
|
|
222
222
|
あ，ちなみにiframeでパーツを分けるデメリットとして，読み込みが少し遅くなる，SEOに弱くなるかも，コードがバラバラになって管理しづらい，iframe内の操作が若干面倒，iframe内のイベントを他の要素に影響させる方法が面倒，などが挙げられます．
|
|
223
|
-
いろいろと不自由になりがちなので，ふつうに直接
|
|
223
|
+
いろいろと不自由になりがちなので，ふつうに直接HTMLを記述する方が良いかなと思います
|
3
追記
answer
CHANGED
|
@@ -195,6 +195,7 @@
|
|
|
195
195
|
- 属性セレクタ（`[]`）
|
|
196
196
|
- `user-select`で文字を選択不可に
|
|
197
197
|
- `background`系プロパティの複数指定
|
|
198
|
+
- `linear-gradient()`による背景画像(グラデーション)生成
|
|
198
199
|
- `transform`プロパティの活用
|
|
199
200
|
- `rgba()`による色指定
|
|
200
201
|
- `@keyframes`によるアニメーション
|
2
修正
answer
CHANGED
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
</ul>
|
|
53
53
|
</li>
|
|
54
54
|
</ul>
|
|
55
|
+
|
|
55
56
|
```
|
|
56
57
|
```css
|
|
57
58
|
/*アコーディオン*/
|
|
@@ -64,6 +65,7 @@
|
|
|
64
65
|
input[name="menu"]:checked ~.child_menu >li{
|
|
65
66
|
height: 3em;
|
|
66
67
|
}
|
|
68
|
+
|
|
67
69
|
```
|
|
68
70
|
```css
|
|
69
71
|
/*メニュー開閉ボタン*/
|
|
@@ -96,6 +98,7 @@
|
|
|
96
98
|
transform: translateX(100%);/*自分自身の幅の分だけ，右側へスライド*/
|
|
97
99
|
box-shadow: 0 1em #fff, 0 0 10px;
|
|
98
100
|
}
|
|
101
|
+
|
|
99
102
|
```
|
|
100
103
|
```css
|
|
101
104
|
/*メニュー枠外クリックでのメニュー終了*/
|
|
@@ -111,6 +114,7 @@
|
|
|
111
114
|
height: 100vh;
|
|
112
115
|
background: rgba(0,0,0,.1)
|
|
113
116
|
}
|
|
117
|
+
|
|
114
118
|
```
|
|
115
119
|
```js
|
|
116
120
|
/*アコーディオンに使ったラジオボタンの初期化*/
|
|
@@ -138,6 +142,7 @@
|
|
|
138
142
|
box-shadow: 0 1em #fff;
|
|
139
143
|
transition: .5s;
|
|
140
144
|
}
|
|
145
|
+
|
|
141
146
|
```
|
|
142
147
|
```css
|
|
143
148
|
/*メニュー選択時のアニメーション*/
|
|
@@ -175,6 +180,7 @@
|
|
|
175
180
|
background-position: 0 calc(1em - 7px), calc(1em - 7px) 0;
|
|
176
181
|
}
|
|
177
182
|
}
|
|
183
|
+
|
|
178
184
|
```
|
|
179
185
|
という感じです
|
|
180
186
|
|
1
修正
answer
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
- メニュー内容の`overflow: auto;`
|
|
17
17
|
- メニュー選択時のアニメーション（矢印）
|
|
18
18
|
|
|
19
|
-
解説
|
|
19
|
+
解説（抜粋）
|
|
20
20
|
```html
|
|
21
21
|
<!--こういうHTMLに-->
|
|
22
22
|
|