締切済み

before afterを使って影を表示できません

2012/08/20 17:35

スタイルシートでbefore afterを使って影を表示できませんこちらのサイトを参考にしました。 http://coliss.com/articles/build-websites/operation/css/css3-box-shadows-effects-by-paulund.html こちらのeffect1は簡単にできます。 before afterを使わず、影をだすことはできますが、before afterを使って影を表示できません。また、こちらのサイトを参考にしましたが、ダメでした。 http://nicolasgallagher.com/css-drop-shadows-without-images/ コピペしても、コードを削ってもうまくいきません。ブラウザを変えても、Wordpressのテーマを変えてもダメです。すいませんが、何か試せることや解決方法がありましたら、ご教授ください。

lon79
お礼率98% (324/329)

CSS
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

みんなの回答

DrFell
ベストアンサー率55% (305/551)

2012/08/22 19:37 回答No.4

Wordpressは調べていませんが、詳細度が他に負けているのでは？現状だとclass1？かなり弱いです。詳細度を高めてください。 cssの基礎ありますか？ここで詳細度を高めたソースを教えるのはたやすいですが、おそらく意味がわかっていなければ、実践に当てはめることはできないと思います。 importantの使い方も間違えていますし、コピペソースでは対応できないのでは？と思います。基本的な大前提となるルールを理解していれば、現在の文章構造を利用して、詳細度を高めてください。理解していなければ、勉強してください。理解度をテストしてみます？ ●CSSトラブルシューティング：追加したルールが適用されない http://lab.klab.org/young/2011/05/css_trouble_rule_not_apply/

質問者

お礼 2012/08/23 17:16

たびたびありがとうございます。恐縮です(><)。 cssの基本は、素人ですが、前にcssの詳細度については一度独学で勉強したことがあります。プロの人からみると、ぜんぜん足りないのかもしれませんが、計算して優先度を決めているぐらいはわかります。優先度の問題でよく反映されないことがあることは知っています。 importantはすいません。あまりよく調べず、安易に使ってしまいました。 wordpressでも、下記のようにbefore・afterを使わなければ、影は表示できます。 .shadow { -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; } そこで、擬似要素の詳細度が原因で影が表示されていない、という点を疑ったのですが、調べてみると、擬似要素に詳細度はつかないと書かれていました。。それなので、詳細度は原因ではなかったと思っているのですが、、、すいませんが、その後、数時間調べたり、試行錯誤したのですが、解決できず、またハマっている状態です。。。

DrFell
ベストアンサー率55% (305/551)

2012/08/22 06:33 回答No.3

>コピペしても、コードを削ってもうまくいきません。これの意味がわかりません。こういう場合はコピペしたソースを出さないと、応えようがありません。現に見本のページのデモではちゃんと表示されているのですから、コピペの仕方が悪いとしか思えません。私もコピペしてみましたが、lon79 さんの状況が再現できませんでした。 <style type="text/css"> /*簡単な実験はちゃんと出来ています。引用符の定義をしていなかっただけでは？*/ blockquote{/*これ足しました。*/ quotes: "『" "』" ; } blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } /*2つめの見本のサイトをコピペし、引用に適用しました。使用したのはVertical curvesの一部。あと組み合わせを辞めました。*/ .drop-shadow { position:relative; float:left; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; } .drop-shadow:before { top:10px; bottom:10px; left:0; right:0; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px; } </style> <body> <blockquote>引用</blockquote> <blockquote class="drop-shadow">引用</blockquote> </body>

質問者

お礼 2012/08/22 16:51

たびたびありがとうございます。 blockquoteの引用府は申し訳ございません。定義がなかっただけです。。こちらは解決しました。 DrFellさんのソースで試してみました。影はHtmlファイルで作成すると、正常に表示できます。 Htmlで外部cssしても、正常に表示されます。しかし、Wordpressの外部cssに書き込むと、影は表示されず背景しか表示されません。いずれも同じコードをコピペーしています。ただ、blockquoteの引用府はWordpressでもうまくいきます。デフォルトの状態なので、あまりないと思われますが、優先度の問題を疑い、 !importantがあることを知り、追記しましたが、うまくいきませんでした。検索してみてもそのようなことは書いていないのですが、他に何か追記する必要があるのでしょうか。テーマはデフォルトにTwenty Tenに戻しています。 Wordpressバージョンは3.41です。確認しているブラウザはFirefox、chromeなどです。いずれも表示されません。コードも追記させてもらいます。 Twenty Ten: スタイルシート (style.css) blockquote{ quotes: "『" "』" ; } blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } .drop-shadow { position:relative; float:left; width:40%; padding:1em; margin:2em 10px 4em; background:#f2f2f2; //背景が白のため一応変更 !important; //追記 } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; !important; //追記 } .drop-shadow:before { top:10px; bottom:10px; left:0; right:0; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px; !important; //追記 } wordpressの記事 <blockquote>引用府は表示されます</blockquote> <blockquote class="drop-shadow">影は表示されず。。。</blockquote> <div class="drop-shadow">影は表示されず。。。</div> おかげさまで、現在、htmlだと正常に表示されるところまでは確認しています。恐れ入りますが、WPでもうまく表示できるよう、どなたかご助言いただけると幸いです。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/08/21 17:48 回答No.2

＞ただ、afterを使って表示できません。今のところ、まだ解決できていません。　サンプル試してみましたか？:hover擬似クラス、:after擬似要素にで生成し影を付けています。　contentプロパティは、セレクタの主体によって生成される要素のdisplayも変わります。　box-shadowは、box--すなわちblockなどに対してのもので、inline要素のテキストにはtext-shadowプロパティになります。

質問者

お礼 2012/08/21 20:22

たびたびありがとうございました。おっしゃるコードでhtmlを作成したところ、マウスオーバーすれば影がでますが、今、やろうとしていること(Wordpressでbeforeとafterを使って影をだす)の現状を打開できません。さっき、極力簡単なテストとして、 html <blockquote>引用</blockquote> css blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } を試しても、両側に引用府が表示できせんでした。。。引き続き、どなたかお願いします。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/08/20 18:47 回答No.1

擬似要素でも問題ないはずです。・・・boxでないとか・・・ <!doctype html> <head> <meta charset="utf-8"> <title>サンプル</title> <meta name="description" content=""> <meta name="author" content="IRUKA">  <link rel="stylesheet" href="css/style.css"> <style media="screen">  </style> </head> <body> <header> <h1 id="title">Your title</h1> <nav> <ul> <li><a href="#some" title="なんたらのページへ">Some</a></li> <li><a href="#nav" title="サイトマップ">navigation</a> <li><a href="#link" title="リンク集へ">links</a></li> </ul> </nav> </header> <section> <aside> <h3>Something aside</h3> </aside> <h2>A smaller heading</h2> <p> </p> </section> <section> <h2>A smaller heading</h2> <p> </p> </section> <footer> <h3>A nice footer</h3> </footer> </body> </html>

質問者

お礼 2012/08/21 14:58

ご回答ありがとうございます。ちょっとどのように参考にいいのかわからない部分もあったのですが、 -box-shadowのみであれば、表示できています。ただ、afterを使って表示できません。今のところ、まだ解決できていません。

before afterを使って影を表示できません