teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

質問の意図を考えて、回答追記

2021/05/04 08:37

投稿

miyabi_pudding
miyabi_pudding

スコア9559

answer CHANGED
@@ -6,4 +6,46 @@
6
6
  よって、クリックした時に〇〇をする、といったことをするためのものではありません。
7
7
  SCSS上の変数などの条件によって、ネストされたSCSS構文を適用させる、させないといった用法になります。
8
8
 
9
- なので、そこを勉強されたほうがよいかと思います。
9
+ なので、そこを勉強されたほうがよいかと思います。
10
+
11
+ # コメントのやりとりなどを参照して追記
12
+ 質問者の挙動を実現するには、
13
+ 質問者さんが、SCSSより前に、CSSの基礎をまず学ぶべきかと。
14
+
15
+ まず、CSSでどうなるかを記載します。
16
+
17
+ ```css
18
+ .search-text:focus + .checkbox{
19
+ opacity: 1;
20
+ width: 60%;
21
+ }
22
+ ```
23
+
24
+ `+`は隣接セレクターと言い、
25
+ その次に記載しているセレクタが示すHTML要素を指定することができます。
26
+ 以上を踏まえ、SCSSでは下記のように記載することができます。
27
+
28
+ ```scss
29
+ .search-text {
30
+ border: solid 1px $main;
31
+ opacity: 0;
32
+ outline: 0;
33
+ z-index: 200;
34
+ height: 80px;
35
+ transition: .5s;
36
+ background: url('../images/search.png') no-repeat right/contain;
37
+ // &は、そのブロックの親を指すことができる
38
+ &:focus {
39
+ opacity: 1;
40
+ width: 60%;
41
+ cursor: text;
42
+ & + .checkbox{
43
+ opacity: 1;
44
+ width: 60%;
45
+ }
46
+ }
47
+ }
48
+ ```
49
+
50
+ 以上のように、CSSの基礎を理解すれば、より効率的に記載が可能になるのが、
51
+ SCSSの最大のメリットとなります。