- ベストアンサー
疑似インラインフレームの文字が透明
疑似インラインフレームを透明化したのですが、リンク元の文字まで透明化されてしまいます。 文字だけ薄くしないようにしたいのですが。 ご教示お願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こちらは解説です。とっても忙しい身の上なので、あまりお付き合いは出来ませんので、すべて書いておきます。足りないところは自分で調べてください。それが早道です。ただし、一番当てになるのは仕様書ですよ。 ★HTMLについては、難しくないと思います。見慣れているものと違うのは仕様書に準拠しているからです。(^^) divは、文書構造を補完するためにのみ使っています。それが本来の決まりですから・・ ⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) class名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )と意味をそのまま参考にしてあります。 headerは文書のヘッダ、sectionは見出しを持ちうる本文、footerは文書のフッタ、articleは自身にheader,section,footerを持ちうる完結した記事を表します。 ★スタイルシート デザインは一切考えずに作成したHTMLをその文書構造を利用してデザインしていきます。 長いですが html,body{width:100%;margin:0;padding:0;background-color:gray;} ブラウザは、html,bodyに多少の隙間を作るので消しています。そして背景色を灰色にしています。 body{background-image:url(./images/background/sky.jpg);} bodyに背景を指定しています。場所とファイル名は上記の通り div.header,div.section,div.footer{ width:80%;max-width:900px; margin:0 auto; } header,section,footerのすべてをウィンドウ幅の80%にして、上下のマージンを0,左右のマージンを自動にしていますから、ウィンドウ幅に関わらず中央に表示されます。 div.section{position:relative;}/*位置の基準とするため */ 本文の子供要素(具体的にはarticle)のabsoluteでの位置の基準にするため指定しています。幅の基準にもなります。 ブロック要素は直近のstatic以外の親要素のサイズを参照しますから・・ div.section div.article{ /* div.sectionの子孫であるすべてのdiv.article */ width:48%;/* 親のdiv.sectionの半分の幅 */ height:300px; margin:0 1%; border:ridge 3px gray; overflow:auto; background-color:yellow; opacity:0.3;/* opacityなので背景も文字もすべて半透明 */ color:rgb(0,0,255); } width:二つarticleがあり横に並べたいので親ブロック(section)の48%幅にしています。 当然右のスペースがあきますね。そこに次のarticleをおく予定 height:300pxに固定 margin:もう少しあけたほうが良いかも、二つしか値がないので上下/左右になります。 border:枠線の指定 overflow:でフレームぽくなります。データ量が多いとスクロールバーが出ます。 background:で背景を黄色に opacity:でこの要素(article)全体を半透明に 当然文字も半透明 color:色は黄色に映える青 div.section div.article + div.article{ /* 隣接セレクタ、兄にdiv.articleがあるdiv.article */ position:absolute; right:1%;bottom:0; opacity:1;/* 不透明に戻す */ background-color:rgba(255,255,0,0.5);/* 背景色を半透明 */ color:rgba(0,0,255,0.3);/* 文字だけ半透明 */ } +は隣接セレクタ/兄弟セレクタと言って、何々に続くと言う意味 div.section 内の div.articleに続くdiv.article position:絶対配置で位置を指定します。 opacity:で先に指定して透明化したものを元に戻します。 こちらのほうがセレクタの書き方が詳しいので優先されます。上書きする background-color:背景に半透明を指定/ color:rgba(0,0,255,0.3);/* 文字色も半透明 */ div.section div.article:hover{ /* マウスホーバーのとき */ color:rgb(0,0,255)!important; opacity:1!important; background-color:rgba(255,255,0,1)!important;/* 背景色を不透明 */ color:rgb(0,0,255)!important; } ポインターが乗ったときの指定です。セレクタの詳細度が強くないので!importantで強制的に指定しています。 背景を半透明にして、文字は不透明でしたらopacityでは駄目なことは、すぐわかると思います。その場合は背景だけを透明にします。色ならrgba()ですし、画像なら半透明な画像にするほうが楽でしょう。 しっかり読めば、決して難しいものではありません。 若いのに、根を上げたらダメですよ。私は還暦をとうに過ぎている。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
以前回答したときに、「ちょっと回答者さんのやり方は、難しいので、もっちょっと簡単なプログラムでお願いします。」と言われてしまい。どうしようかなと思ったのですが・・ 実は、そんなに難しい話をしているわけじゃありません。ひょっとしてテキストエディタでHTMLやスタイルシートを書くことが出来ないのかな？ビルダーを使おうが、どんなオーサリングツールを使用しようが、テキストエディタで扱えないと上達は望めませんから、懲りずに頑張ってくださいね。 ビルダーなんか使って書くHTMLよりもはるかにシンプルで簡単なHTMlのはずです。誰が見ても、どこに何が書かれているかわかるはずです。ビルダーではこのようなHTMLは書けないですし、ましてやその構造にしたがってスタイルシートを書くなんて不可能です。 まず、どこがどこの指定であるかを理解することからはじめましょう。テストの回答だけを覚えても良い成績は取れません。自分に合わせて手を加えることが出来ません。 下記サンプルは全体です。文字コードはShift_JISです。 ★HTMLは、Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) のDATAタブでチェック済みです。 ★CSSは、W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み ★タブは＿に置換してあります。(タブはこの質問板では使えないので) ＿タブか半角スペース4個程度に置換してください。 説明は後ほど・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{width:100%;margin:0;padding:0;background-color:gray;} body{background-image:url(./images/background/sky.jpg);} div.header,div.section,div.footer{ width:80%;max-width:900px; margin:0 auto; } div.section{position:relative;}/*位置の基準とするため */ div.section div.article{ /* div.sectionの子孫であるすべてのdiv.article */ width:48%;/* 親のdiv.sectionの半分の幅 */ height:300px; margin:0 1%; border:ridge 3px gray; overflow:auto; background-color:yellow; opacity:0.3;/* opacityなので背景も文字もすべて半透明 */ color:rgb(0,0,255); } div.section div.article + div.article{ /* 隣接セレクタ、兄にdiv.articleがあるdiv.article */ position:absolute; right:1%;bottom:0; opacity:1;/* 不透明に戻す */ background-color:rgba(255,255,0,0.5);/* 背景色を半透明 */ color:rgba(0,0,255,0.3);/* 文字だけ半透明 */ } div.section div.article:hover{ /* マウスホーバーのとき */ color:rgb(0,0,255); opacity:1!important; background-color:rgba(255,255,0,1)!important;/* 背景色を不透明 */ color:rgb(0,0,255)!important; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>文書のタイトル</h1> ＿＿<p>要約など</p> ＿</div> ＿<div class="section"> ＿＿<h2>本文タイトル</h2> ＿＿<p>本文記事の段落</p> ＿＿<p>本文記事の段落</p> ＿＿<div class="article"> ＿＿＿<div class="header"> ＿＿＿＿<h3>独立した記事(1)のタイトル</h3> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<p>記事内容</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>長くなるとスクロールバーが出てくる。</p> ＿＿＿＿<p>好きなだけ段落を増やしてみてください。</p> ＿＿＿</div> ＿＿</div> ＿＿<div class="article"> ＿＿＿<div class="header"> ＿＿＿＿<h3>独立した記事(2)のタイトル</h3> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<p>記事内容</p> ＿＿＿＿<p>記事</p> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
お礼
回答ありがとうございます。
お礼
お礼遅くなりすみません。 回答ありがとうございます。