疑似インラインフレームの文字が透明

Question

疑似インラインフレームを透明化したのですが、リンク元の文字まで透明化されてしまいます。
文字だけ薄くしないようにしたいのですが。
ご教示お願いします。

ORUKA1951 · Accepted Answer

こちらは解説です。とっても忙しい身の上なので、あまりお付き合いは出来ませんので、すべて書いておきます。足りないところは自分で調べてください。それが早道です。ただし、一番当てになるのは仕様書ですよ。

★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()ですし、画像なら半透明な画像にするほうが楽でしょう。

しっかり読めば、決して難しいものではありません。

若いのに、根を上げたらダメですよ。私は還暦をとうに過ぎている。

ORUKA1951 · Answer

　以前回答したときに、「ちょっと回答者さんのやり方は、難しいので、もっちょっと簡単なプログラムでお願いします。」と言われてしまい。どうしようかなと思ったのですが・・　実は、そんなに難しい話をしているわけじゃありません。ひょっとしてテキストエディタで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個程度に置換してください。説明は後ほど・・・＿＿サンプル＿＿＿＿＿＿＿

＿＿

本文タイトル

＿＿

本文記事の段落

＿＿

本文記事の段落

＿＿

＿＿＿＿＿＿

＿＿＿＿

記事内容

＿＿＿＿

記事

＿＿＿＿

長くなるとスクロールバーが出てくる。

＿＿＿＿

好きなだけ段落を増やしてみてください。

＿＿＿

＿＿

＿＿＿＿＿＿

＿＿＿＿

記事内容

＿＿＿＿

記事

＿＿＿

＿＿

＿

疑似インラインフレームの文字が透明

こちらは解説です。

以前回答したときに、「ちょっと回答者さんのやり方は、難しいので、もっちょっと簡単なプログラムでお願いします。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　以前回答したときに、「ちょっと回答者さんのやり方は、難しいので、もっちょっと簡単なプログラムでお願いします。