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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

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

HTML

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

Q&A

解決済

2回答

234閲覧

指定部分をホバーした際に画像の大きさはそのままで文字を表示させたい

yudai1107

総合スコア12

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2024/02/04 04:54

実現したいこと

https://demo.tcd-theme.com/tcd050/
の美味に舌鼓。全国おすすめ温泉地特集!という部分のホバーしたらスライドする部分を真似て作成したいと思っております。
自分でコードを作成しているのですが、思ったようにスライドせずぎこちないような動きになってしまっているのでアドバイスをいただきたいです。

発生している問題・分からないこと

  • スライドの仕方

実際にスライドをするのですが、画像の大きさをキープしながら移動させる方法がわかりません。大きさを100%に大きさにしてしまうと画像のスライドだけになってしまうので元々100%から60%に変更するようなコードに変更しているのですが、画像の大きさや表示範囲が中途半端になってしまうのでどうしても変更した際の違和感が否めないので修正したいです。

  • jsの付け替え

ソースコードを確認してみてクラスの付け替えだとは思っているのですがそれで大丈夫なのかとホバーした際にコードの変換があっているかどうかお聞きしたいです。

該当のソースコード

HTML

1<div class="test"> 2 <div class="test-red"> 3 <img src="/image/epic/epic-bath-flower.jpeg" alt=""> 4 <p>テキスト</p> 5 </div> 6 <div class="test-red"> 7 <img src="/image/epic/epic-hokkaido.jpeg" alt=""> 8 <p>タイトル</p> 9 </div> 10 <div class="test-red"> 11 <img src="/image/epic/epic-maple.jpeg" alt=""> 12 <p>表題</p> 13 </div> 14 </div>

SCSS

1.test{ 2 overflow: hidden; 3 display: flex; 4 .test-red{ 5 position: relative; 6 transition: all 0.4s; 7 overflow: hidden; 8 width: 30%; 9 height: 300px; 10 transition: all 0.4s; 11 &:nth-child(1){ 12 img{ 13 width: 100%; 14 height: 100%; 15 object-fit: cover; 16 } 17 p{ 18 display: none; 19 } 20 } 21 &:nth-child(2){ 22 23 img{ 24 width: 100%; 25 height: 100%; 26 object-fit: cover; 27 } 28 p{ 29 display: none; 30 } 31 } 32 &:nth-child(3){ 33 34 img{ 35 width: 100%; 36 height: 100%; 37 } 38 p{ 39 display: none; 40 } 41 } 42 &:hover{ 43 &.test-green{ 44 height: 300px; 45 transition: all .5s; 46 img{ 47 position: absolute; 48 left: 0; 49 top: 0; 50 width: 60%; 51 object-fit: cover; 52 } 53 p{ 54 display: block; 55 position: absolute; 56 right: 0; 57 top: 0; 58 width: 40%; 59 } 60 } 61 } 62 } 63}

JavaScript

1document.addEventListener('DOMContentLoaded', function() { 2 const tests = document.querySelectorAll('.test-red'); 3 4 tests.forEach(function(test) { 5 test.addEventListener('mouseenter', function() { 6 test.classList.add('test-green'); 7 }); 8 9 test.addEventListener('mouseleave', function() { 10 test.classList.remove('test-green'); 11 }); 12 }); 13});

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

ソースコードや検索で試してみたのですが、クラスの付け替えなどがjsで起きているのはなんとなくわかっているのですが、サイズ変換などはクラスの付け替えで起きているのはわかるのですが、その大きさの指定や画像の大きさをキープしたまま変更する方法(多分padding-topだとは思うのですが・・・)がよくわかっていないです。

補足

特になし

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

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

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

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

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

guest

回答2

0

ベストアンサー

まず、参考にしたサイトの動きを観察してみます。

ページ開いた直後は下記のようにと表示されていて各要素は親要素の25%の幅になってます。
[画像1][テキスト1][画像2][画像3]

[画像2]にmouseenterすると下記のように変化します。
[画像1][画像2][テキスト2][画像3]

[画像3]にmouseenterすると下記のように変化します。
[画像1][画像2][画像3][テキスト3]

変化するのはmouseenterの時のみで、mouseleaveの時は変化はありません。
ということから、jsのイベントはmouseenterのみでいいと分かります。

デベロッパーツールでHTMLの変化を見てみると、
mouseenterの時に、ホバーした要素にshow_infoクラスが追加されて、それ以外の要素からshow_infoクラスされています。

上記のことからコードは下記のようにすればいいでしょう。

js

1document.addEventListener("DOMContentLoaded", function () { 2 document.querySelector(".test-red").classList.add("test-green"); 3 const tests = document.querySelectorAll(".test-red"); 4 tests.forEach(function (test) { 5 test.addEventListener("mouseenter", function () { 6 tests.forEach(function (test) { 7 test.classList.remove("test-green") 8 }); 9 test.classList.add("test-green"); 10 }); 11 }); 12});

あとは、CSSでレイアウトを決めればいいです。
解説するとながくなるので、サンプルを置いておきますので研究してみてください。

CodePenサンプル

投稿2024/02/04 07:01

編集2024/02/04 07:13
hatena19

総合スコア33692

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

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

yudai1107

2024/02/04 08:33

ありがとうございます! すごくわかりやすく説明していただいて助かりました。 早速実装できました!
yudai1107

2024/02/05 03:16

ちなみにcqwという単位は%やpxなどに置き換えられるのでしょうか? 調べてみたところあまり推奨される単位ではないのかな?と思った次第なのと自分のわからない単位をわからないまま使用すると怖い部分もあるので、もし可能でしたらお答えいただけますと幸いです。 (自分でもpxや%を使って試してみたのですがどうしても文字の部分が全部はみ出してしまうので修正が必要なのかなと考えています)
hatena19

2024/02/06 00:17

非推奨という情報をどこで得たのかわかりませんが、下記が公式の解説ページです。非推奨という記述はありません。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_containment/Container_queries 最近実装された機能なので古い情報だと非推奨とあるかも知れませんが、今なら全ブラウザ対応しているので使用しても問題ないと思います。 コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する https://zenn.dev/tonkotsuboy_com/articles/css-container-query cqwを使わずにとなると、pxで親、子、孫のブロックの幅をすべて固定にするか、画面サイズにあわせて拡縮させるならvwで設定することになります。 参考にしたリンク先では画面幅が1200px以上では固定、ある幅以下では画面幅に応じて拡縮という設計(max-width: 1200px;)になってましたので、画面幅に応じて固定と拡縮を切り替える必要があります。 この場合、いままで、ならメディアクエリを使って切り替えてました。 cqw(コンテナクエリ)を使うと非常にシンプルに記述できますので、これからは積極的に使った方がいいでしょう。
yudai1107

2024/02/07 01:56

ありがとうございます。 完全に私の調べ不足です(チャットGPTで修正しようとした際にそのような記述があったので気になった次第です。) やはり%ではなくpxやvwを使わないければいけないんですね。 大丈夫だと思うのですがもう少しcqwに関して検索して理解を含めて使用させて頂きます。 ありがとうございました!
guest

0

https://codepen.io/arcxor/pen/abMGQaz

html

1<div class="items debug"> 2 <div class="item" tabindex="0"> 3 <div class="firstContent"> 4 <img src="https://loremflickr.com/300/300?random=1" alt=""> 5 </div> 6 <div class="secondContent"> 7 <p>テキスト</p> 8 </div> 9 </div> 10 <div class="item open" tabindex="0"> 11 <div class="firstContent"> 12 <img src="https://loremflickr.com/300/300?random=2" alt=""> 13 </div> 14 <div class="secondContent"> 15 <p>テキスト</p> 16 </div> 17 </div> 18 <div class="item" tabindex="0"> 19 <div class="firstContent"> 20 <img src="https://loremflickr.com/300/300?random=3" alt=""> 21 </div> 22 <div class="secondContent"> 23 <p>テキスト</p> 24 </div> 25 </div> 26</div>

css

1:root { 2 --size: 300px; 3 --gap: 20px; 4} 5html, body { 6 margin: 0; 7} 8.items { 9 display: flex; 10 gap: var(--gap); 11} 12.item { 13 display: flex; 14 gap: var(--gap); 15 overflow: hidden; 16 flex: 0 0 auto; 17 width: var(--size); 18 transition: all 0.5s ease; 19} 20.item.open { 21 width: calc(var(--size) * 2 + var(--gap)); 22} 23.firstContent, .secondContent { 24 overflow: hidden; 25 width: var(--size); 26 height: var(--size); 27 flex: 0 0 auto; 28} 29 30.debug.items { 31 margin: 20px; 32 background: #ccc; 33} 34.debug :is(.firstContent, .secondContent) { 35 position: relative; 36} 37.debug :is(.firstContent, .secondContent)::after { 38 pointer-events: none; 39 content: ""; 40 position: absolute; 41 inset: 0; 42 border: 4px solid red; 43} 44.debug .secondContent::after { 45 border-color: blue; 46}

js

1(function() { 2 'use strict'; 3 4 function main() { 5 const itemList = document.querySelectorAll('.items .item'); 6 itemList.forEach(item => { 7 item.addEventListener('mouseenter', activeItem); 8 item.addEventListener('click', activeItem); 9 item.addEventListener('keydown', evt => { 10 if (evt.key === 'Enter' || evt.key === ' ') activeItem.call(evt.target); 11 }); 12 }); 13 14 function activeItem() { 15 itemList.forEach(item => item.classList.remove('open')); 16 this.classList.add('open'); 17 } 18 } 19 20 document.addEventListener('DOMContentLoaded', main); 21}());

投稿2024/02/04 06:43

arcxor

総合スコア2859

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

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

yudai1107

2024/02/04 08:34

回答ありがとうございます。 ベストアンサーは別の方を選ばせていただきましたが、こちらの回答も非常に参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問