回答率: 85.36%

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

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

詳細はこちら

トップ CSS3に関する質問

Q&A

解決済

3回答

4960閲覧

画像をホバーした時１pxぐらいずれるのを解決したい

退会済みユーザー

総合スコア0

0グッド

0クリップ

投稿2019/11/18 23:09

0

0

ホバーした時に画像がずれるのでそれをなおしたいです。

<html>

＜css＞
img {
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.2s ease-in;
transition: 0.2s ease-in;
filter: alpha(opacity=100);
opacity: 1;

display: inline-block;
padding: 20px;
}

img:hover {
cursor: cell;
border: 1px solid #fff;
padding: 20px;
opacity: 0.4;
transition: .6s;
backface-visibility: hidden;
display: inline-block;
background: none
}

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

回答3件

0

画像 + 枠の大きさを変えない
画像 + 枠の位置を変えない

CSS
1box-sizing: border-box

###邪道です

画像の大きさを変えない
画像の位置を変えない

CSS
1border: 1px solid #fff;
2position: relative;
3top: —1px;
4left: -1px

投稿2019/11/18 23:43

編集2019/11/20 03:39

総合スコア10429

2019/11/19 00:48

border: solid 1px #fff;でも border: 1px solid #fff;でもいいはずですけど・・・？その情報ってどこが出展元ですか・・・？そんな決まりありましたっけ

2019/11/19 00:48

さっき、書いたときに前者だと反応しなかったので間違えだと思ったのですがちょっと確認してみます。

2019/11/19 00:50

どうやらCSSファイルの不具合のようでした。修正します。

2019/11/19 00:50

http://weboook.blog22.fc2.com/blog-entry-338.html ↑の通り、順番は関係ないです。

退会済みユーザー

2019/11/19 05:41

おす！

退会済みユーザー

2019/11/19 05:42

あのよぅ、確認してねぇんだけんどもさぁ、 top: -1px するんじゃなくて、box-sizing: border-box; がいいんじゃねぇのか？

2019/11/19 05:47 編集

そうですね、box-sizingでも行けると思いますが画像の大きさが微妙に小さくなる = チカチカするになるかな？と思ったのでやめました。

2019/11/19 05:47

上のコメント修正しました。

退会済みユーザー

2019/11/19 05:49

だっておめぇ、borderのサイズ変えたらboxのサイズが変わっちまう方が不便だろ？

2019/11/19 05:52 編集

自分自身、どういう挙動をするか見ていませんがhover時のみの挙動ならあまり問題はないと思います。（よほど、精密なデザインをしていない限り）加えて質問文にも border: 1px solid #fff; とあるため、原文を尊重した次第です。

2019/11/19 05:53

それに、私自身、このコードの解釈としては「画像に枠をつけたい」というものなのでそれにbox-sizingもな..と言った感じです。

退会済みユーザー

2019/11/19 05:53

>自分自身、どういう挙動をするか見ていませんがhover時のみの挙動ならあまり問題はないと思います。

退会済みユーザー

2019/11/19 05:54

おめぇ、何言ってんだ。なんで1pxずれるのか分かってねぇのか？

2019/11/19 05:55 編集

コードを見れば大体わかります。完成後のは一応チェックはしています。

退会済みユーザー

2019/11/20 10:42 編集

ってぇことは、「top: -1px」これはその場しのぎの何にも考えてねぇ対応って事かぁ。こりゃあ、たまげたなぁ。そういう事してっと、CSSはどんどん腐ってくぞ。

退会済みユーザー

2019/11/19 05:55

>コードを見れば大体わかります。分かってねぇじゃねぇか。

2019/11/19 05:56

では具体的にどのようにされると良いとお思いでしょうか？また、そのようにおっしゃるなら回答をなさってはいかがでしょうか？

退会済みユーザー

2019/11/19 05:56

>完成後のは一応チェックはしています。確認はしたけんども、何が原因で、なんで解決したのか分かってねぇだろ、おめぇ。そういうやり方は止めといた方がいいと、おら、思うぞ。

2019/11/19 05:58

日本語読めていますか？私自身、コードを見て原因が分かっていますから回答をしているわけです。

2019/11/19 05:59

(低評価-1してる一人は私なんですけど、 position:relative; top:-1px は確かにその場しのぎすぎて根本的解決になってないと思うので低評価してます）ちなみに box-sizing: border-box; が一番正しいのかなと思います。質問者さんがhover時に適当にどこかからこぴってきたborder指定を入れているなら消せばいいですし、意図があって入れているなら box-sizing: border-box; を入れてやれば解決です。 https://saruwakakun.com/html-css/reference/box-sizing

退会済みユーザー

2019/11/19 05:59

>自分自身、どういう挙動をするか見ていませんがhover時のみの挙動ならあまり問題はないと思います。

退会済みユーザー

2019/11/19 05:59

全然わかってねぇじゃねぇか。

2019/11/19 06:05 編集

> 確かにその場しのぎすぎて根本的解決になってないと思うので低評価してます逆にいうと、azuapricotさんの回答は、回答者さんの本来の意図と違う可能性もあると思いますが？「borderを指定しなければいい」というのは果たして根本的解決なのでしょうか？（回答内で問われているので特に低評価もしていませんが）「その場しのぎ」である根拠をお願いします。

退会済みユーザー

2019/11/19 06:06

> azuapricotさんの回答は、回答者さんの本来の意図と違う可能性もあると思いますが話をはぐらかすなよ。おめぇ、往生際がわりぃなぁ。

2019/11/19 06:06

> 全然わかってねぇじゃねぇか。具体的にお願いします。

退会済みユーザー

2019/11/19 06:06

>「その場しのぎ」である根拠をお願いします。いいからだまって、おらが教えてやったプロパティの意味、調べてみろ。これも修行だぞ。

2019/11/19 06:06

あの、私もいろいろ忙しいので順番に返信しているのですが

退会済みユーザー

2019/11/19 06:07

おらが教えてやったら、おめぇの勉強にならねぇだろ。

2019/11/19 06:08

プロパティ（英: property）は物体の特性・特質を意味する言葉である。 https://ja.wikipedia.org/wiki/プロパティ

2019/11/19 06:22

ちなみに、CSSのプロパティのことを言ってるなら The box-sizing CSS property sets how the total width and height of an element is calculated. https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

退会済みユーザー

2019/11/19 06:29

> プロパティ（英: property）は物体の特性・特質を意味する言葉である。たまげたなぁ、相手に言われてる日本語の意味すらわかんねぇのか、おめぇ。

2019/11/19 06:30

少なくともgoku59さんの「おらが教えてやったプロパティの意味、調べてみろ。」は自分にはそう受け取れました。

2019/11/19 06:31

少なくとも、私の日本語の意味がわかっていないgoku59さんには言われたくありません。

2019/11/19 14:15

asuchi0819さんの方法も改善案のひとつとしては正しいですが、 goku59 さんの指摘のほうに真があるのは確かです。キャラ口調で回答しているので指摘が乱暴に聞こえたのかもしれませんが冷静に。そもそも過去の質問にベストアンサーもつけず常に投げっぱなしの質問者への回答欄で感情的になってまで争うのは不毛です。

2019/11/19 22:14

何度も私自身は言っているのですが「goku59さんの回答が正しい」や「お前の回答間違ってる」や「そんなCSS恥ずかしく無いの？」と言ったコメントは承知はしておりますが、「なぜダメなのか」という指摘をいただいていないのです。今現在「3」の低評価がついておりますが誰一人としてそこに言及していないのです。確かに自分もあつくなってしまいましたし、コメント欄でこのような争いをするのは間違いであったと反省しております。

退会済みユーザー

2019/11/19 22:55

> 「なぜダメなのか」という指摘をいただいていないのです。 >今現在「3」の低評価がついておりますが誰一人としてそこに言及していないのです。おす、まだ言ってんのか。おら、『調べてみろ』って言ったじゃねぇか。おめぇ、１から10まで全部教えてもらわねぇと何にもできねぇのか？　そんなんじゃ成長出来ねぇぞ。

2019/11/19 23:14

もちろんMDNも読みましたし、実際コードも書いてみました。 https://codepen.io/asuchi0819/pen/XWWOPOE しかし、これは私が思う質問者の意図と違います。それを説明した上で「違う」等のコメントをした意図というものを伺いたいです。

2019/11/19 23:18

ちなみに、teratailで低評価をした際に出るコメントを下に書いておきます。「低評価の理由を明確に伝え、適切な回答に修正してもらいましょう」

退会済みユーザー

2019/11/20 10:44 編集

> 「低評価の理由を明確に伝え、適切な回答に修正してもらいましょう」おめぇ、回答者だろ。教える側の立場だ。その回答者様がとんちんかんな回答して質問者を迷路に迷い込ませようとしたんだから、ちゃんと責任を感じた方がいいんじゃねぇのか？最低限、なんでおらが box-sizing ってぇプロパティの話をしたのかくれぇ理解できるように努力した方がいいぞ。そうすりゃぁ、なんで position:relative; top:-1px; が全然駄目なのかくれぇ、自然に分かってくんだろ。

退会済みユーザー

2019/11/19 23:40

あと、おら、おめぇの事、低評価してねぇしな。おらさ、アンチファンがいっぺぇいっから、score が定期的にガンガン下がっちまうせいで、低評価できねぇんだよ。残念だったなぁ。

退会済みユーザー

2019/11/19 23:40

つまり、おらはおめぇに明確な理由を伝える義務は、ねぇってぇわけだ。

2019/11/20 00:58 編集

この議論の根本は、 [top:-1px] が「結果こう見えるからええやろ」的な「邪道」の一つであるという事に尽きます。実際、現場では[マイナスmargin]や[!important]などのいわゆる「邪道」を使ってStyleを修正する事もありますが、それは、環境だったり与えられた工数であったりを理由に仕方なく使うものであり、使わずに済むならなるべく使いたくない技術です。 asuchi0819 さんも多くの知識と経験をお持ちな様なのでそのへんの事も当然理解していると思いますが、それを分かったうえで、なぜ、勉強中と思われるまだまだ知識も浅い質問者に対する回答として [top:-1px] を解決手法として提示したのか。その手法提示であっているのか。そこに皆さんひっかかっているだけなんだと思います。そこへ返された「正道」の指摘に対して、最もらしい言い訳をひけらかして邪道のほうを正当化しようとしているから、goku59さんも「おらワクワクすっぞ」になっているのです。そこまで知識があれば [box-sizing] や [border] の足し引きの手法のほうに理があるとわかっているでしょうに。

2019/11/20 01:28

要するに hover の時だけボーダーを出すのが意図的であった場合には、どうするのが正道なのかを書いたほうがいいのではないかと思います。

2019/11/20 01:29

質問者の意図（望む挙動）によっては『邪道』が必要となると思い『邪道』を取らせていただきました。確かに、box-sizingも正しいです。というより変にpositionをいじるよりいいかもしれません。しかし、私はコードから『画像の「外側に」枠（border）をつけたい』という質問者さんの意図（望む挙動）を受け取りました。そうすると「王道」のbox-sizingよりも「邪道」のpositionを使った方が良いと考えたわけです。

2019/11/20 01:29

Zushinさん了解しました。

退会済みユーザー

2019/11/20 03:33

おす！あのよぅ、box-sizing 使わねぇでborder 1px ってことは画像サイズが縦横それぞれ 2px ずつ広がるんだから top: -1px じゃ駄目だろ。横ものびんだぞ。そしたらおめぇ、組み方によっては横幅伸びたせいでレイアウトがすっげぇ崩れまくることもあるんだぞ。そんなのつかいまくってるページのレイアウト修正とか、おら、絶対やりたくねぇぞ。

2019/11/20 03:34

失礼しました。抜けていました。

退会済みユーザー

2019/11/20 03:46 編集

どうしても『画像の外側に線つけてぇ』ってんなら box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 1); の方がずっといいと、おら、思うぞ。だけんどもよぅ、そこは拘るところじゃねぇぞ、きっと。 hover したときだけ内側に 1px の線が出来て、困ることがあるなんて、おら、思えねぇぞ。

2019/11/20 03:47

なるほど、box-shadowでもありでしたね。ご指摘、ありがとうございます。

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

0

ベストアンサー

CSS
1img:not(:hover) {
2  border: 1px solid transparent;
3}

投稿2019/11/20 08:25

総合スコア13749

0

CSS
1img:hover {
2cursor: cell;
3/* border: 1px solid #fff; */　
4padding: 20px;
5opacity: 0.4;
6transition: .6s;
7backface-visibility: hidden;
8display: inline-block;
9background: none
10}

このボーダーのせいでずれてますけど、このボーダー入れてる理由って何かあるんですか？
hover時のこれを消すか、hover前にもborderを入れるかで解決するかと思います

投稿2019/11/19 00:40

総合スコア2341

2019/11/19 00:56

勝手な想像ですが、画像の枠では？

2019/11/19 06:00

(画像の枠ならなぜ imgタグ本体に border指定がないんでしょう） (ほかのCSSで記載されているのかもしれませんけどそんな指定ないですし）

2019/11/19 06:02

horver時に枠を出したいってことではないのですか？

2019/11/19 06:08

いや・・・質問者さんじゃないからわかりません・・・全体像を提示してくれてないので実際にはどういうサイトなのかもわかりませんし。この質問者さんは過去質問を見てもコードをコピペする傾向があるので、どこかからこぴってきたコードを使ってhover時に白い線をつけてしまってる可能性も捨てきれません。なので、今質問の解決策としては、 hover時の謎の白い線を消すか、 hover前にも線をつけるか、 goku59 さんがいっているように box-sizing: border-box; を使って要素にborderを含めてしまってhover前と後で要素のサイズの差異をなくすか、かなと思います。

2019/11/19 06:10

> かなと思います確証がないなら「その場しのぎ」という理由で低評価するのはおかしいと「私は」思いますが。

2019/11/19 06:12

(CSSでそんなことしてるコードやだなと思わないんですか・・・) (少なくともわたしならやりたくないです）（これ以上話してもこの質問を汚してしまうだけですし、私は離脱しますね）

2019/11/19 06:15

返信は求めませんが、relative等によって要素を移動することは「いや」だとは少なくとも「私は」思いません。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ CSS3に関する質問

画像をホバーした時１pxぐらいずれるのを解決したい