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

締切済

質問者：lon79
質問日時：2012/08/20 17:35
回答数：4件

スタイルシートでbefore afterを使って影を表示できません
こちらのサイトを参考にしました。

http://coliss.com/articles/build-websites/operat …
こちらのeffect1は簡単にできます。
before afterを使わず、影をだすことはできますが、before afterを使って影を表示できません。

また、こちらのサイトを参考にしましたが、ダメでした。

http://nicolasgallagher.com/css-drop-shadows-wit …

コピペしても、コードを削ってもうまくいきません。
ブラウザを変えても、Wordpressのテーマを変えてもダメです。
すいませんが、何か試せることや解決方法がありましたら、ご教授ください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： DrFell
回答日時：2012/08/22 19:37

Wordpressは調べていませんが、詳細度が他に負けているのでは？

現状だとclass1？かなり弱いです。詳細度を高めてください。

cssの基礎ありますか？
ここで詳細度を高めたソースを教えるのはたやすいですが、おそらく意味がわかっていなければ、実践に当てはめることはできないと思います。

importantの使い方も間違えていますし、コピペソースでは対応できないのでは？と思います。基本的な大前提となるルールを理解していれば、現在の文章構造を利用して、詳細度を高めてください。理解していなければ、勉強してください。

理解度をテストしてみます？
●CSSトラブルシューティング：追加したルールが適用されない
http://lab.klab.org/young/2011/05/css_trouble_ru …

- 0
- 件

通報する

この回答へのお礼

たびたびありがとうございます。恐縮です(><)。

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;
}

そこで、擬似要素の詳細度が原因で影が表示されていない、
という点を疑ったのですが、調べてみると、
擬似要素に詳細度はつかないと書かれていました。。
それなので、詳細度は原因ではなかったと思っているのですが、、、

すいませんが、その後、数時間調べたり、試行錯誤したのですが、解決できず、
またハマっている状態です。。。

通報する

お礼日時：2012/08/23 17:16

No.3

回答者： DrFell
回答日時：2012/08/22 06:33

>コピペしても、コードを削ってもうまくいきません。

これの意味がわかりません。こういう場合はコピペしたソースを出さないと、応えようがありません。現に見本のページのデモではちゃんと表示されているのですから、コピペの仕方が悪いとしか思えません。

私もコピペしてみましたが、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>

- 0
- 件

通報する

この回答へのお礼

たびたびありがとうございます。

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でもうまく表示できるよう、どなたかご助言いただけると幸いです。

通報する

お礼日時：2012/08/22 16:51

No.2

回答者： ORUKA1951
回答日時：2012/08/21 17:48

＞ただ、afterを使って表示できません。

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

- 0
- 件

通報する

この回答へのお礼

たびたびありがとうございました。
おっしゃるコードでhtmlを作成したところ、マウスオーバーすれば影がでますが、
今、やろうとしていること(Wordpressでbeforeとafterを使って影をだす)の現状を打開できません。さっき、極力簡単なテストとして、

html
<blockquote>引用</blockquote>

css
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}

を試しても、両側に引用府が表示できせんでした。。。

引き続き、どなたかお願いします。

通報する

お礼日時：2012/08/21 20:22

No.1

回答者： ORUKA1951
回答日時：2012/08/20 18:47

擬似要素でも問題ないはずです。

・・・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>