• ベストアンサー

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

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

  • CSS
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.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()ですし、画像なら半透明な画像にするほうが楽でしょう。 　しっかり読めば、決して難しいものではありません。 　若いのに、根を上げたらダメですよ。私は還暦をとうに過ぎている。

4x7z1mm0z
質問者

お礼

お礼遅くなりすみません。 回答ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

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

4x7z1mm0z
質問者

お礼

回答ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • インラインフレーム内の文字クリックで別窓を開く事は出来ますか？

    こんにちは。 いつもお世話になっております。 今、HTMLのテーブル内にインラインフレームを 作って、読み込みHTMLはリンク集になっている ページを作っています。 読み込まれている【リンク集HTML】のリンク文字に target="_blank" をつけているのですが、 インラインフレーム内が切り替わるだけなのです。 インラインフレームの属性指定の部分の　name="" を削除してみたのですが、リンク文字クリックで 別窓表示にはなりませんでした…。 インラインフレーム内のリンク文字をクリックして 新しいウィンドゥで表示する事は不可能なのでしょうか？ どうかご指導よろしくお願い致します。

    • ベストアンサー
    • HTML
  • インラインフレームにリンクするには

    お世話になります。　少年野球のホームページを作っていますが、リンクボタンを５つ作り、同じページにインラインフレームを一つ作って、リンクボタンをクリックすると、インラインフレーム内に表示させたいのですが、その方法が分かりません。HTMLで作っています。どなたかご教示願えますでしょうか？よろしくお願いいたします。

  • インラインフレーム内の文字の大きさ

    インラインフレーム内のサイトの文字の大きさを変更することは、可能でしょうか？よろしくお願いします。

    • ベストアンサー
    • HTML
  • インラインフレームについて

    インラインフレーム内にあるリンクからインラインフレーム内に飛ぶのではなくて、フレームの外に飛ばしたいのですがどうしたらいいでしょうか？ 全部がインラインフレーム内に入ってしまうので困っています。宜しくお願いします。

  • インラインフレームで・・・

    インラインフレームで１つのページにインラインフレームを2つ作って左に１つ、右に1つインラインフレームを設置して左にリンクをはってそのリンクをクリックすると右のインラインフレームにページが表示されるようにしたいのですが どうすればいいのでしょうか？ ちなみにですがこのようなＨＰを作りたいのです。 http://cgi-design.net/ いろいろ調べたのですがわかりません おしえてください。

  • インラインフレームの作り方

    ホームページNinja 2003を使ってます。 HP内に四角く切り抜いて、そこに元の枠のページからリンクを張り、いろんな別ページを表示させたいです。調べたら、インラインフレームというようですが、当該ソフトでもそういう操作はできるのでしょうか？

  • インラインフレームのことなんですが・・・

    インラインフレームの中にリンク先のページを表示させて、その、インラインフレームのフレームの色を変えることはできますか？ ぜひ、教えてください。

    • ベストアンサー
    • HTML
  • インラインフレームからのリンクについて

    質問させて下さい。 ブログのTOPページにインラインフレームを使って、コンテンツを収めていますが、そのリンク先においてのリンク元を調べて見ると、リンク元がTOPページのアドレスではなく、コンテンツを収めているページになってしまします。 スペースの関係でスクローバーを使ってコンテンツをどうしても収めたいのですが、リンク元がTOPページのままにするにはどうすれば良いでしょうか？ 宜しくお願いします。

  • インラインフレームのリンク

    インラインフレーム内にリンクを配置して、リンクをクリックすると現在見ているウィンドウにリンク先のページを表示したいと考えています。リンクに target="_top" を指定すれば、ウィンドウにリンク先が開かれると思うのですが、実際にやってみると、うまく開くときもありますがインラインフレーム内でウィンドウが開いてしまうことがあります。 現在見ているウィンドウ＞インラインフレーム＞インラインフレーム＞リンクのあるページ と複数のインラインフレームを介しているのが原因のように考えています。 リンクのあるＨＴＭＬにjQueryプラグインを使ったスライドショーを入れて、複数のインラインフレームを介して画像をクリックすると現在見ているウィンドウにその画像のあるページを開きたいのです。 インラインフレーム内でリンク先のページが開いてしまうのは、やはりリンクのtarget指定の問題でしょうか？それともjQueryプラグインの設定か何かの問題でしょうか？ アドバイスいただければ幸いです。

    • ベストアンサー
    • HTML
  • インラインフレーム内の文字サイズを変えるには？

    現在、トップページに新着情報とお知らせをインラインフレームで作成しています。 そこで、最近良くある文字サイズ変更ボタンを設置して大中小とボタンをおした際にインラインフレーム内だけ文字サイズが変わりません。 この文字サイズを変更する方法はあるのでしょうか？ インラインフレームの中は、別ページになるので、スタイルシートの設定が及ばないのかな～と思ったりしているのですが、諦めきれません。 【styleswitcher.js】を利用して文字サイズ変更を設定しています。 どなたかご教授ください。 どうぞ宜しくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する