imgとfooterのmarginでも画像がホバーされる

思考錯誤しましたが、解決できずご教授いただけると幸いです。
申し訳ありませんが宜しくお願い致します。

HTML
1<body>
2<div class="wrapper01">
3	/*省略*/
4
5<div class="insyoku-container">
6<div class="insyoku">
7<p class="insyokuten1"><a href="*****.html"><img src="images/*****.jpg" width="640" height="426" alt="*****"></a></p>
8</div>
9<div class="insyoku">
10<p class="insyokuten2"><a href="*****.html"><img src="images/*****.jpg" width="640" height="426" alt="*****"></a></p>
11</div>
12<div class="insyoku">
13<p class="insyokuten2"><a href="*****.html"><img src="images/*****.jpg" width="640" height="426" alt="*****"></a></p>
14</div>
15</div>
16<a href="../****/****/****.html">aaaーはこちら</a><br>
17<a href="../****/****/****.html">bbbはこちら</a><br>
18</main>
19<div class="bottom">
20<footer>
21<ul class="footer-nav">
22	<li class="footer-nav1"><a href="../../****.html">あああ</a></li>
23	<li>
24	<ul class="footer-nav1">
25		<li><a href="****/****.html">いいい</a></li>
26		<ll><a href="****/****.html">ううう</a></ll>
27		<li><a href="****/****/*****.html">えええ</a></li>
28		<li><a href="****/****/****/****/****.html">おおお</a></li>
29		</ul>
30	</li>
31	<li>
32	<ul class="footer-nav2">
33	<li class="niretu"><a href="../****/****.html">かかか</a></li>
34	</ul>
35	</li>
36	<li>
37	<ul class="footer-nav2">
38	<li class="niretu"><a href="../****/****.html">ききき</a></li>
39	</ul>
40	</li>
41	<li>
42	<ul class="footer-nav2">
43	<li class="niretu"><a href="../****/****.html">くくく</a></li>
44	</ul>
45</li>
46</ul>
47<p class="tyosakuken">&copy;2020 *********** All rights reserved</p>
48	</footer>
49	</div>
50</div>
51</body>
52</html>

CSS
1.wrapper01{
2	width: 100%;
3	min-height: calc(100% - 50px);
4}
5.insyoku-container{
6	display: flex;
7	align-items: center;
8	flex-wrap: nowrap;
9	margin-bottom: 0;
10}
11.insyoku {
12	width: 33%;
13	width: calc(100% / 3);
14}
15.insyokuten1 img{
16	height: 40%;
17	width: auto;
18	margin-top: 20px;
19	margin-left: -180px;
20}
21.insyokuten2 img{
22	height: 40%;
23	width: auto;
24	margin-top: 20px;
25	margin-left: -180px;
26}
27.insyokuten1:hover{
28	opacity: 0.6;
29}
30.insyokuten2:hover{
31	opacity: 0.6;
32}
33.bottom{
34	height:200px;
35	margin-top: 0;
36	padding-top: 30px;
37	line-height: 20px;
38	background-color:#afeeee;
39}
40.footer-nav{
41	list-style-type:none;
42	align-items: start;
43	padding: 5px 15px 10px 15px;
44	margin-bottom: 10px;
45	flex-wrap: wrap;
46	display : -webkit-box;     /* old Android */
47	display : -webkit-flex;    /* Safari etc. */
48	display : -ms-flexbox;     /* IE10        */
49	display : flex;
50}
51.footer-nav1{
52	list-style-type: none;
53	align-items: normal;
54	padding: 0 10px 5px 10px
55}
56.footer-nav2{
57	list-style-type: none;
58	align-items: normal;
59	padding: 0 10px 5px 10px;
60}
61.tyosakuken{
62	color:#444444;
63	text-align: center;
64	bottom: 0;
65}

cerfweb

2020/11/26 10:48

footernavのレイアウトが崩れるとありますが、どのようにしたいのか画像で示していただけますか。

let

2020/11/26 11:29

画像添付しました。二列目の項目にマージンが無くなってしまってる所と、コピーライトが一番下の行にあったのですが引き上げられてしまいました。ご教授いただけると幸いです。

cerfweb

2020/11/26 11:30

画像のようにしたいのですか？

let

2020/11/26 11:33

いえ、二列目の項目の下に少しずつマージンとコピーライトを一番下の行にして中央表示にしたいです。

cerfweb

2020/11/26 11:37

その理想の形がわかるように画像で示していただけるとわかりやすいのですが。

let

2020/11/26 11:47

申し訳ありません、footerは全てのページでレイアウトが変わってしまっているため画像添付できないです。情報不足で申し訳ありません。

cerfweb

2020/11/26 11:49

どうしたいのかがわからないと、回答のしようがありません。

let

2020/11/26 11:49

イメージとしては、footer内の全ての項目がもう少し下に下がっているイメージです。二列目のリンクリストは少しずつ下にマージンができる感じです。

cerfweb

2020/11/26 11:50

手書きでもいいので、ここをこうしたいというのが伝わるように示していただけますか。

let

2020/11/26 12:17

上の画像のようにしたいです

cerfweb

2020/11/26 12:18

もう一点、「ページ内リンクを配置してらfooterのすぐ上に表示され上にmarginが広く残る」というのはどうなるのが理想なのですか。

let

2020/11/26 12:25

画像のすぐ下あたりですね。footerの間にmarginがあくのはいいです。

let

2020/11/26 13:57

footerのレイアウトは修正できましたので、質問から削除しました

let

2020/11/29 15:08

a要素の範囲指定ができません。親要素　aでCSSで設定するとimg要素の画像が小さくなり、a要素の設定は変更は反映されませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

画像リンクからfooterのマージンが縮まらない

ページ内リンクを配置してらfooterのすぐ上に表示され上にmarginが広く残る

要素pに対してブラウザのデフォルト設定が影響しているものと思われます。
以下を追加すれば解消されるでしょう。

css
1.insyoku > p {
2	margin-top: 0;
3	margin-bottom: 0;
4}

画像リンクからfooterのマージンでも画像がホバーされる

以下のhoverの効果を指定する部分が違います。

css
1.insyokuten1:hover{
2    opacity: 0.6;
3}
4.insyokuten2:hover{
5    opacity: 0.6;
6}

上記を以下のように書き換えてみてください。

css
1a img:hover {
2	opacity: .6;
3}

現時点で問題とされている点は以上で解消されると思いますが、cssの方は、全体的にもっと推敲する必要がある印象を受けました。書き方次第でもっと簡略化できる部分や、入れ子の親子関係のサイズ指定が曖昧な部分があり、何か要素を追加したりする度に別の問題が発生する可能性があります。
がんばってください。

投稿2020/11/26 14:29

cerfweb

総合スコア1907

let

2020/11/26 14:53

ご教授いただきありがとうございます。ホバーは画像にマウスポインタがかさなった時だけに改善いたしました。ただ、下のマージンにもマウスポインタが画像リンクの対象になっているようでマージンもクリックできるようになっています。これはどこを改善すればいいのでしょうか？度々申し訳ありませんが、宜しくお願い致します。