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

回答編集履歴

3

文言を修正

2020/03/09 13:50

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -1,7 +1,7 @@
1
1
  .main_imgに指定していた記述を、追加した<a>と既存の<img>に分散する必要があります。
2
2
 
3
- おおざっぱに、<a>のほうにmain_imgを移動して、
3
+ おおざっぱに、<a>のほうに`class="main_img"`を移動して、
4
- imgには親要素に対しては隙間が出ないようにする記述 (`width: 100%;`、`height: 100%;`など) をするのが楽だと思います。
4
+ <img>には親要素に対しては隙間が出ないようにする記述 (`width: 100%;`、`height: 100%;`など) をするのが楽だと思います。
5
5
 
6
6
  ```HTML
7
7
  <div class="main_imgSlide">

2

文言を修正

2020/03/09 13:50

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -1,7 +1,7 @@
1
1
  .main_imgに指定していた記述を、追加した<a>と既存の<img>に分散する必要があります。
2
2
 
3
3
  おおざっぱに、<a>のほうにmain_imgを移動して、
4
- imgには親要素に対して`width: 100%;`、`height: 100%;`を指定するが楽だと思います。
4
+ imgには親要素に対しては隙間が出ないようにする記述 (`width: 100%;`、`height: 100%;`など) をするが楽だと思います。
5
5
 
6
6
  ```HTML
7
7
  <div class="main_imgSlide">
@@ -9,8 +9,9 @@
9
9
  ...
10
10
  </div>
11
11
  ```
12
- position: absolute; などを使うときの鉄則として、<a>や<img>などの、いわゆるインライン要素には
12
+ `position: absolute;`を使うときの鉄則として、<a>や<img>などの、いわゆるインライン要素には
13
- display: block;などを指定しておくと無難です。
13
+ `display: block;`を指定しておくと無難です (理由があればdisplay: flex;も可)
14
+
14
15
  ```CSS
15
16
  .main_img {
16
17
  display: block;

1

CSSについてのコツを追加

2020/03/09 13:42

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -8,4 +8,14 @@
8
8
  <a href="" class="main_img"><img src="" alt="img"></a>
9
9
  ...
10
10
  </div>
11
+ ```
12
+ position: absolute; などを使うときの鉄則として、<a>や<img>などの、いわゆるインライン要素には
13
+ display: block;などを指定しておくと無難です。
14
+ ```CSS
15
+ .main_img {
16
+ display: block;
17
+ }
18
+ .main_img img {
19
+ display: block;
20
+ }
11
21
  ```