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

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

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

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

Q&A

解決済

4回答

4684閲覧

box-shadowで画像の影のようなものを作ったのですが、位置がうまくいきません。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

0グッド

0クリップ

投稿2015/12/04 15:31

box-shadowで画像の影のようなものを作ったのですが、位置がうまくいきません。

レスポンシブのフルイドイメージなのですが、右側のシャドウはしっかりと値を増やすと右にのびていくのですが、下がほとんど伸びません。
なぜ下だけ伸びないのでしょうか?

・CSS
.my-image {
margin-top: 5%;
box-shadow: 5rem 5rem rgba(98, 206, 242, 1);
display: block;
}

・HTML

<p>ああああああああああああ</p> <img class="yufu-pcimage" src="img/index/e.jpg" alt="画像">

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

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

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

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

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

nage

2015/12/04 16:43

img要素のクラス属性(yufu-pcimage)と対になるCSSのセレクタ(my-image)が異なっています。
guest

回答4

0

box-shadow の引数の解釈を間違えているという場合はありませんか?
第一引数が垂直方向で第二引数が水平方向です
第二引数のみ変更しても両方向同時に動くことはありません

box-shadow: 5rem(上下) 5rem(左右) rgba(98, 206, 242, 1);

投稿2015/12/05 13:54

anozon

総合スコア662

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

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

退会済みユーザー

退会済みユーザー

2015/12/06 09:03

box-shadowやtext-shadowの影は、positionのようにボックスからはみ出て、 相対指定で場所が決まるのですね。 おかげさまでよい勉強になりました。
guest

0

.my-image { margin-top: 5%; box-shadow: 0 0 5rem rgba(98, 206, 242, 1); display: block; }

投稿2015/12/05 12:35

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

ベストアンサー

box-shadowを設定している要素の次に出てくる要素によって影の部分が
隠されてしまっているだけではないですか?

投稿2015/12/05 03:56

aKusano

総合スコア3763

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

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

退会済みユーザー

退会済みユーザー

2015/12/05 11:55

お返事ありがとうございます。 HTMLは下記のようになっています。 下記のimgタグにシャドウを入れているので、その下に要素はありません。 親ボックスのみです。 <div class="skew1 article__first-skew1"> <div class="skew2 article__first-skew2"> <div class="content"> <section class="main__about-me main-section"> <h2 class="main__about-me__heading main__common-heading">ABOUT&nbsp;&nbsp;ME</h2> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <img class="my-image" src="img/index/myimage.png" alt="自身の写真"> </section><!-- /#about --> </div> </div> </div>
aKusano

2015/12/05 12:16

親要素にoverflow:hidden;が設定されたりしてません? 同じコードを記述してみましたが、こちらの環境では普通に表示されます。
退会済みユーザー

退会済みユーザー

2015/12/05 15:02

お騒がせして大変恐縮でした。 おっしゃるとおり、overflow:hidden;が隠れていました。 overflow:hidden;は、ボックスから、はみ出たものを隠すそうですが、 box-shadowはimgボックスをはみ出ているのが仕様なのでしょうか?
aKusano

2015/12/05 15:44

shadowはinset指定しないかぎり要素の外側に表示されます。 そしてあくまで影であり実態はありませんので、他の要素を押し広げたりすることはありません。 なので親要素も突き破りますし、隣の要素に被ったり被られたりもします。
退会済みユーザー

退会済みユーザー

2015/12/06 04:43

box-shadowやtext-shadowの影は、positionのようにボックスからはみ出て、 相対指定で場所が決まるのですね。 おかげさまでよい勉強になりました。
退会済みユーザー

退会済みユーザー

2015/12/06 04:44

そしてボックスからはみ出た部分だけ、overflow:hidden;が消したので見えなくなったのですね。
guest

0

css プロパティはブラウザやそのバージョンによって対応状況が異なり vendor-prefix が必要な場合があったりします

それが原因であれば以下の記事が参考になると思います

http://caniuse.com/#search=box-sha
http://qiita.com/wings1685/items/0cdee110a3d394409780

複数のブラウザで確認するのはデバッグ方法としても有効なことがあると思います

あと関係ないですが質問でブラウザのバージョンなどを書いてくれたりマークダウンの

css

1code block

を使うと回答者に優しいと思います

投稿2015/12/05 01:02

anozon

総合スコア662

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

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

退会済みユーザー

退会済みユーザー

2015/12/05 15:04

お騒がせして大変恐縮でした。 overflow:hidden;は、ボックスから、はみ出たものを隠すそうですが、 box-shadowはimgボックスをはみ出ているのが仕様なのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問