回答編集履歴
1
文書改善・追記
test
CHANGED
|
@@ -6,19 +6,19 @@
|
|
|
6
6
|
|
|
7
7
|
色々な実装方法があると思いますが、
|
|
8
8
|
|
|
9
|
-
serch_arrow の画像を
|
|
9
|
+
<img.serch_arrow> の画像を上下中央にしたい場合
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
<img> として記載
|
|
13
|
+
この「矢印アイコン」はリンクの強調装飾として存在しているだけなので<img> として記載しないのがHTML構造としては正解です。
|
|
14
14
|
|
|
15
|
-
<
|
|
15
|
+
<a> に対して `background:url(画像) no-repeat right center;` で背景指定で右寄せ＆上下中央に置くのが良いでしょう。
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
HTMLコードも減ってスッキリします。
|
|
20
20
|
|
|
21
|
-
HTMLはなるべくシンプルを目指しましょう。
|
|
21
|
+
HTMLはなるべくシンプルに正確な文書構造を表現することを目指しましょう。
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
@@ -30,10 +30,8 @@
|
|
|
30
30
|
|
|
31
31
|
老婆心ながら前提からアドバイスすると
|
|
32
32
|
|
|
33
|
-
今苦労している原因はおそらく、`display:flex` だと思われるので
|
|
34
|
-
|
|
35
|
-
その
|
|
33
|
+
今苦労している原因はおそらく、`display:flex` の挙動に対して再制御する難しさから来ていると思われるので、今の知識段階では flex を使わない方法で組み直したほうが、コードもスッキリしてHTMLの文書構造としてしっかり理解しやすくなると思います。
|
|
36
34
|
|
|
37
35
|
|
|
38
36
|
|
|
39
|
-
`flex` は内包するブロック要素が特殊な挙動をするので、使い所を謝ると制御が大変です。
|
|
37
|
+
`flex` は、コードが複雑になるほど内包するブロック要素が特殊な挙動をするので、使い所を謝ると制御が大変です。まずはコードをシンプル＆最低限にする勉強から始めると、スタイルの処理も適用しやすくなり、今後の技術の習得効率もあがっていくと思います。
|