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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Q&A

解決済

1回答

568閲覧

カルーセルに文字を入れたが、画像の下に文字が入り込んでしまう

yura-asuha

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

0グッド

1クリップ

投稿2023/03/01 13:27

カルーセルに文字を入れて、ひとつは画像からはみ出させたいんですが、画像の下に入り込んでしまいます。
二つ目の画像のようにしたいんですが、どうしたらいいでしょうか。

お手数ですが、よろしくお願いいたします。

文字ボックスにz-indexを指定しても、入り込んでしまう・・・
bodyをrerativeにしたら、カルーセルで画像が変わったときに文字ボックスが残ってしまう・・・

イメージ説明

イメージ説明

html

1<div class="cal"> 2 <div class="cal-item"> 3 <picture> 4 <source media="(max-width: 767px)" srcset="../final-exam/images/final-exam-assets/cover/cover_sp_1.jpg"> 5 <source media="(min-width: 768px)" srcset="../final-exam/images/final-exam-assets/cover/cover_pc_1.jpg"> 6 <img src="../final-exam/images/final-exam-assets/cover/cover_pc_1.jpg" alt="1"> 7 </picture> 8 <div class="cal-t1"> 9 <p class="cal-te1"></p><p class="cal-te12">せる!</p><p class="cal-te2"></p><p class="cal-te22">しい!</p> 10 </div> 11 <div class="cal-t2"> 12 <p class="cal-te3">Kira-Kira </p><p class="cal-te32">English</p> 13 </div> 14 </div>

css

1.slick-list{ 2 position: relative; 3 margin-left: 27px!important; 4 border-radius: 0 0 0 100px!important; 5} 6 7.cal-t1{ 8 position: absolute; 9 top: 326px; 10 left:0px; 11 padding: 10px; 12 width: 208px; 13 height: 54px; 14 border-radius: 0 8px 8px 0; 15 background-color: rgba(255,255,255,0.8); 16} 17 18.cal-te1,.cal-te12{ 19 display: inline-block; 20 line-height: 1; 21 font-size: 25px; 22 font-weight: bold; 23 color: #f2a118; 24} 25 26.cal-te12{ 27 font-size: 20px; 28} 29 30.cal-te2,.cal-te22{ 31 display: inline-block; 32 line-height: 1; 33 font-size: 25px; 34 font-weight: bold; 35 color: #46c017; 36} 37 38.cal-te22{ 39 font-size: 20px; 40} 41 42.cal-t2{ 43 position: absolute; 44 top: 388px; 45 left:0px; 46 padding: 18px 16px 15px 16px; 47 width: 210px; 48 height: 54px; 49 border-radius: 0 8px 8px 0; 50 background-color: rgba(255,255,255,0.8); 51} 52 53.cal-te3,.cal-te32{ 54 display: inline-block; 55 z-index: 999; 56 line-height: 1; 57 font-size: 23px; 58 font-weight: 800; 59 color: #f26618; 60 white-space: pre; 61} 62 63.cal-te32{ 64 font-size: 20px; 65 color: black; 66}

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

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

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

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

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

guest

回答1

0

ベストアンサー

CSSの.slick-listに対応するHTML要素がないですが、これが提示のHTMLの親要素だとすると、
border-radius: 0 0 0 100px!important;で子要素はすべてこの影響をうけて、角丸からはみ出た部分は非表示になります。
画像だけ角丸したいなら、画像の要素に角丸を設定する必要があるのでは。

部分的なコードしか提示されていないので、あくまで参考例ですが、下記のような感じでどうでしょう。

css

1.cal-item picture { 2 display: block; 3 border-radius: 0 0 0 100px!important; 4 overflow: hidden; 5}

投稿2023/03/02 03:14

hatena19

総合スコア33620

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

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

yura-asuha

2023/03/02 11:01

回答ありがとうございました。 おっしゃる通りで、一番上の親要素にpotisionをつけてしまっていたので、入り込んでいました。 本当にありがとうございました。 勉強させていただき、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問