-
ID:WqFOlB さんの質問

みなさん初めまして。

株式会社LIG [リグ]
http://liginc.co.jp/

リグさんのWEBサイトはCSS3の使い方がとても上手いので時間のある時に拝見させてもらっています。そこで1点CSS3の使い方でどうしても分からない事があったので、もし知っている方がいましたら知恵を貸して下さい。

「div#sidebar」と「div#contents」にbox-shadowが使われているのですがこの2つの要素を「div.box_wrap」で囲っている為に通常に作ると「div.box_wrap」の外側はシャドウが切れて見えるはずです。

しかし、このサイトでは奇麗にシャドウが見えています。box-shadowで指定した分paggingを指定すれば同じ事が再現できますが、リグさんのWEBサイトではpaddingすら指定していないみたいです。

最初は謎解きのようで楽しかったのですが、数日問題が解けないと答えが気になってしまいこちらで質問させて頂きました。

どうぞ宜しくお願いします。

みんなの回答 6 件

ID:exxeQE さんの回答

div.box_wrapにoverflow:hidden;を指定してないからでは?

ID:WqFOlB

自分もoverflowが怪しいと想い「visible」「hidden」共に試してみましたが問題は解決しませんでした。

ID:0WtEZs

#main .box_wrap にhidden指定したら消えたけど

ID:vihsVw

hidden指定したら消えたね

ID:sJtHa7 さんの回答

div.box_wrapにoverflow:hidden;指定してないんだから切れるわけないと思うけど、まぁ直接訊いてみなよ。

株式会社LIG 広報担当ひろゆき (LIG_J)さんはTwitterを使っています

https://twitter.com/LIG_J
ID:9DzWE3 さんの回答

ここレベルが高いよね。
直接訊いて見ると教えてもらえると思いますよ。

ID:WqFOlB さんの回答

みなさんありがとうございます。

ご迷惑にならなければ直接質問をするのも良いかもしれませんね。
今は事務所を移転して大変忙しい時期だと思うので大晦日に近くなったら質問してみようと思います!

ID:QEr0B2

なるほど…技術力を試す釣りだったのか…

ID:YyM2Nq さんの回答

こんにちは。
あのサイトのことをなかなかに知っている通りすがりのものですが、普通に作っていればシャドウは消えないはずなのです。
floatのクリアにoverflow:hidden;を使っていませんか?
使っていなかったら、もしかしたら他のプロパティが悪さをしているのかもしれません。
デベロッパツールでぽちぽちプロパティを消したりすると原因がわかるかもしれません!

ID:WqFOlB

ありがとうございます!

先程やっと原因が分かりました!
「div.box_wrap」にあたる要素にcompassでclearfixを指定していたのですが、それが原因のようでした。compassのclearfixは「overflow:hidden;」のプロパティが追加されるみたいです。

いつも自分が使っていたclearfixとは違っていたのでそこは気がつきませんでした。まだまだ勉強不足ですね(笑)

答えが分かると「なんだぁ〜そんな事かぁ」と思うのですが、これもまた良い経験だと思って明日から精進いたします。

ID:YyM2Nq

おお、よかったです!
蛇足ですが、compassのclearfixは上書きできますよ〜。
こちらの下の方にあるやり方がおすすめです。
//news.ko-zu.com/sassfirst/

ID:WqFOlB

上書きできたんですね。
URLのサイトを拝見させていただきます。
ありがとうございます!

ID:sJtHa7 さんの回答

compassのclearfixでoverflow:hidden;したくないなら『@include legacy-pie-clearfix;』使いな

Memo, Sass+Compassでclearfix « イナヅマTVログ

http://www.inazumatv.com/contents/archives/6743
ID:WqFOlB

お返事が遅くなりました。
pieでこのようなclearfixができるんですね!
勉強になります。ありがとうございました。

最終更新日:2013-10-06 (7,164 views)

関連するトピックス

ページ上部に戻る