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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

325閲覧

カードの左右には影がつくが上下にはなぜかつかない。

spn

総合スコア37

SCSS

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2023/05/14 11:15

編集2023/05/16 02:32

実現したいこと

カードの全方向に影をつけたいが、左右はつくが上と下にのみ影がつかない。
カードの高さの指定を除くと下にも影がついたが、高さは維持したい。

指定の条件は
.swiper-slide  に 
width: 264px;
height: 331px;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
をつけることです。

 イメージ説明

これで見ていただくとわかりやすいかと思います。
saya-hands.conohawing.com/tateshina-goto-farm
ユーザー名、パスともにuser-111です。

前提

該当のソースコード

HTML

1<section id="product" class="product _cream-bg"> 2 <div class="product-inner element"> 3 <h2 class="section__ttl section__ttl_90">製品一覧</h2><!-- /.section__ttl --> 4 5 <!-- Slider main container --> 6 <div class="swiper"> 7 <!-- Additional required wrapper --> 8 <div class="swiper-wrapper element"> 9 <!-- Slides --> 10 <article class="swiper-slide element"> 11 <figure><img src="img/brussels-sprouts.jpg" alt=""></figure> 12 <h3 class="swiper-slide__textbox-heading"> 13 標高1,000mオーバーの蓼科高原だからこその、あまあま芽キャベツ!! 1kg</h3> 14 <!-- /.swiper-slide__textbox-heading --> 15 <p class="swiper-slide__textbox-desk">¥ 4,200(税込)</p> 16 <!-- /.swiper-slide__textbox-desk --> 17 18 </article> 19 <article class="swiper-slide element"> 20 <figure><img src="img/strawberries.jpg" alt=""></figure> 21 22 <h3 class="swiper-slide__textbox-heading"> 23 「あいまりん」「サマープリンセス」「サマーリリカル」「よつぼし」など詰め合わせ10パック</h3> 24 <!-- /.swiper-slide__textbox-heading --> 25 <p class="swiper-slide__textbox-desk">¥ 4,800(税込)</p> 26 <!-- /.swiper-slide__textbox-desk --> 27 28 </article> 29 <article class="swiper-slide element"> 30 <figure><img src="img/grapes.jpg" alt=""></figure> 31 32 <h3 class="swiper-slide__textbox-heading"> 33 蓼科ごとう農園オリジナル品種の「シャインマスカット」と「ナガノパープル」500g</h3> 34 <!-- /.swiper-slide__textbox-heading --> 35 <p class="swiper-slide__textbox-desk">¥ 7,700(税込)</p> 36 <!-- /.swiper-slide__textbox-desk --> 37 38 </article> 39 40 </div> 41 42 </div><!-- /.swiper --> 43 </div><!-- /.product-inner --> 44 </section><!-- /.product -->

SCSS

1.product-inner { 2 padding-bottom: 90px; 3} 4 5.swiper { 6 7 overflow: hidden; 8} 9 10.swiper-wrapper { 11 display: flex; 12} 13 14.swiper-slide { 15 &:not(.swiper-slide-visible) { 16 .slide { 17 pointer-events: none; 18 opacity: .3; 19 } 20 } 21} 22 23.swiper-slide { 24 width: 264px; 25 height: 331px; 26 background: #fff; 27 box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); 28 overflow: hidden; 29 display: flex; 30 flex-direction: column; 31 flex-shrink: 0; 32 33 figure { 34 img { 35 width: 264px; 36 height: 166px; 37 display: block; 38 object-fit: cover; 39 width: 100%; 40 } 41 } 42 43} 44 45 46 47 48.swiper-slide__textbox-heading { 49 font-size: 16px; 50 font-weight: 700; 51 padding: 16px 16px 0 16px; 52 line-height: 1.5; 53} 54 55.swiper-slide__textbox-desk { 56 font-size: 16px; 57 font-weight: 400; 58 margin-top: auto; 59 padding: 0 16px 16px 16px; 60 61}

試したこと

ネットで調べましたが、よくわかりませんでした。
.swiper-slide__textbox-desk に影をつけようとしたけどうまくいきませんでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

pippi19

2023/05/14 14:37

overflow: hidden;が原因では?
spn

2023/05/15 02:41

コメントありがとうございます。 overflow: hidden;を消しても変化ないです。
pippi19

2023/05/15 08:34

本当にすべてのoverflow: hidden;を外しましたか? こちらもですよ? .swiper { overflow: hidden; }
spn

2023/05/15 13:33

ありがとうございます。 .swiperと.swiper-slideのoverflow: hidden;を消しましたが変化はありませんでした。 検証ツールを見ると、 swiper-bundle.min.cssの中のoverflow: hidden;が邪魔しているようです。こちらを消すと横スクロールが出るので消せない状況です。
guest

回答1

0

ベストアンサー

swiper-bundle.min.cssの中のoverflow: hidden;が邪魔しているようです。こちらを消すと横スクロールが出るので消せない状況です。

であれば、消すのではなく初期値で上書きしましょう

css

1.swiper { 2 overflow: visible; 3}

別解

css

1.swiper { 2 padding: 6px 0; 3}

左右はつくが上と下にのみ影がつかない。

上に影がつかないのはbox-shadowの値の問題です。
こちらを参考に研究してみてください。

投稿2023/05/16 02:59

pippi19

総合スコア684

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

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

spn

2023/05/16 06:32

ありがとうございます。 影がつきました。4日ほど悩んでいたのでとても嬉しいです。 本当にありがとうございます!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問