質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

3回答

1443閲覧

画像拡大時の無駄な挙動を制御したいです。

unininaritai

総合スコア46

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2018/08/27 16:07

画像選択で拡大。というCSSを書きました。
https://jsfiddle.net/1w243yj5/

しかし、拡大する過程で下列の高さに無駄な動きが生じてしまいます。

すなわち、**一番上の列の画像が選択されている状態で、同じ列の別の画像をクリックすると、下の列の高さが一瞬ピクンと上に上がってしまう。**という動きです。

html

1<div class="select-img-list"> 2 3 <label> 4 <input name="myphoto" value="myphoto" type="radio"> 5 <img src="https://dummyimage.com/500x500/000/fff"> 6 </label> 7 8<!-- 上の<label>が繰り返し続く--> 9 10</div>

css

1.select-img-list { 2 display: flex; 3 flex-wrap: wrap; 4} 5.select-img-list label { 6 width: 150px; 7 margin: 0 5px 5px 5px !important; 8 display: table-cell; 9 vertical-align: middle; 10 text-align: center; 11} 12.select-img-list input{ 13 display: none; 14} 15.select-img-list img { 16 opacity: 0.5; 17 transition: 0.3s; 18 width: 50%; 19 display: inline-block; 20 margin-top: 25%; 21} 22.select-img-list input:checked + img { 23 opacity: 1; 24 width: 100%; 25 margin-top: 0%; 26}

この動きを修正し、列の高さを変化させないためにはどのように書き換えればよろしいでしょうか。

CSSにお詳しい方からご指導頂ければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

単純にtransform: scale(1.5);とかで,拡大縮小はできますが,
ついでなので,中央ぞろえをしつつ,きちんと左上から並ぶように,Grid Layoutでやってみました.

https://thimbleprojects.org/liveasnotes/535565/
イメージ説明
リンク先のページ右上にある「リミックス」ボタンからソースコードを閲覧・編集することができます
(IE対応模索中なので,リンク先のコードが最新版です)

html

1<!DOCTYPE html> 2 3<html lang="ja"> 4 5 <head> 6 <meta charset="utf-8"> 7 <meta name="author" content="liveAsNotes"> 8 <meta name="description" content="this is a demo"> 9 <meta name="format-detection" content="telephone=no, address=no, email=no"> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 12 <link rel="stylesheet" href="style.css"> 13 <title>demo</title> 14 </head> 15 16 <body> 17 <div class="select-img-list"> 18 <label> 19 <input name="myphoto" value="myphoto" type="radio"> 20 <img src="https://dummyimage.com/500x500/000/fff"> 21 </label> 22 23 <label> 24 <input name="myphoto" value="myphoto" type="radio"> 25 <img src="https://dummyimage.com/500x500/000/fff"> 26 </label> 27 28 <label> 29 <input name="myphoto" value="myphoto" type="radio"> 30 <img src="https://dummyimage.com/500x500/000/fff"> 31 </label> 32 33 <label> 34 <input name="myphoto" value="myphoto" type="radio"> 35 <img src="https://dummyimage.com/500x500/000/fff"> 36 </label> 37 38 <label> 39 <input name="myphoto" value="myphoto" type="radio"> 40 <img src="https://dummyimage.com/500x500/000/fff"> 41 </label> 42 43 <label> 44 <input name="myphoto" value="myphoto" type="radio"> 45 <img src="https://dummyimage.com/500x500/000/fff"> 46 </label> 47 48 <label> 49 <input name="myphoto" value="myphoto" type="radio"> 50 <img src="https://dummyimage.com/500x500/000/fff"> 51 </label> 52 53 <label> 54 <input name="myphoto" value="myphoto" type="radio"> 55 <img src="https://dummyimage.com/500x500/000/fff"> 56 </label> 57 58 <label> 59 <input name="myphoto" value="myphoto" type="radio"> 60 <img src="https://dummyimage.com/500x500/000/fff"> 61 </label> 62 </div> 63 </body> 64</html>

css

1*, 2*::before, 3*::after{ 4 font-weight: normal; 5 line-height: 1em; 6 padding:0; 7 margin: 0; 8 -webkit-box-sizing: border-box; 9 box-sizing: border-box; 10 -webkit-tap-highlight-color:rgba(0,0,0,.1); 11} 12html,body{ 13 width: 100vw; 14 height: 100vh; 15 overflow-x: hidden; 16} 17html{ 18 font: normal 17px / 17px sans-serif; 19 -webkit-text-size-adjust: 100%; 20} 21body{ 22 position: relative; 23 padding: 3rem; 24} 25 26/* MAIN PART */ 27 28.select-img-list { 29 display: grid; 30 grid-template-rows: repeat(auto-fill, 150px);/*150px毎の「行」を生成*/ 31 grid-template-columns: repeat(auto-fill, 150px);/*150px毎の「列」を生成*/ 32 -webkit-box-pack: center; 33 -ms-flex-pack: center; 34 justify-content: center;/*コンテンツの中央寄せ*/ 35 min-width: 200px;/*最小幅(:paddingとコンテンツ単体の幅)*/ 36 max-width: 800px; 37 padding: 25px; 38 margin: 0 auto;/*中央寄せ*/ 39 -webkit-box-shadow: inset 0 0 0 24px tomato; 40 box-shadow: inset 0 0 0 24px tomato;/*paddingを可視化_※見やすいように,1px隙間を空けている*/ 41} 42.select-img-list label { 43 margin: 25px; 44 -webkit-box-shadow: 0 0 0 24px palegreen; 45 box-shadow: 0 0 0 24px palegreen;/*paddingを可視化_※見やすいように,1px隙間を空けている*/ 46} 47.select-img-list input{ 48 display: none; 49} 50.select-img-list img { 51 opacity: 0.5; 52 -webkit-transition: 0.3s; 53 transition: 0.3s; 54 display: block; 55 width: 100%; 56} 57.select-img-list input:checked + img { 58 opacity: 1; 59 -webkit-transform: scale(1.5); 60 transform: scale(1.5);/*要素の拡大*/ 61}

参考:

コンテナの大きさに合わせて繰り返す (repeat(auto-fill | auto-fit, ...))
グリッドやアイテムの位置をいろいろ指定したい

これを機に,Autoprefixerというプラグインを入れました


一番上の列の画像が選択されている状態で、同じ列の別の画像をクリックすると、下の列の高さが一瞬ピクンと上に上がってしまう。

要素の大きさそのものを変えているからです.
イメージ説明
labelbackground: tomato;を指定しています

このような挙動はナビゲーションメニューで表示する項目を入れ替える際にもよく起きます.

要素の大きさや形に依存しない書き方として,transitionのタイミングを調節する方法を紹介します
transitionプロパティは,記述しているセレクタの状態になるまでの遷移過程を規定します.
つまり,こうです.
イメージ説明
遷移前の状態にはtransitionが設定されていないため,transition: 0s;として扱われます:他の状態から,この状態への遷移は0秒で行われます
元に戻るのに1秒,遷移するのに0秒でやりたい場合は,以下のように,遷移先のセレクタにtransition: 0s;を明記する必要があります

css

1label { 2 width: 150px; 3 height: 150px; 4 margin: 5px; 5 background: tomato; 6 transition: 1s; 7} 8 9input:checked + label { 10 background: palegreen; 11 transition: 0s; 12}

また,transitionは遅延させることができ,ショートハンドでまとめて記述できるので,以下のような実装ができます

イメージ説明
(掲載しているgifのコードが読みづらい場合は別タブで開いてみてください)

cf. 【CSS3】Transition(変化)関連のまとめ

適当にやってみたのですが,意外とスタイリッシュな動きになりましたね
他にもanimationプロパティを使うやり方もありますが,今回はここで切り上げておきます

投稿2018/08/28 04:57

編集2018/08/28 09:41
liveasnotes

総合スコア1284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

labelの幅が固定されているようなので、高さも固定するというのはいかがでしょうか?
(高さはあくまで可変だということでしたら、コメントください。)

CSS

1.select-img-list label { 2 width: 150px; 3 height: 150px; // 高さを固定しておく 4 margin: 0 5px 5px 5px !important; 5 display: table-cell; 6 vertical-align: middle; 7 text-align: center; 8}

投稿2018/08/28 00:28

macaron_xxx

総合スコア3191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

「liveAsNotes」さんの回答みたいに、<label>背景に色を付けて、transition: 0.3s;transition: 3.0s;にゆっくり変化するようにして動作を確認してみてください。「ピクン」と動く原因が分かると思います。

投稿2018/08/28 08:43

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問