- ベストアンサー
疑似インラインフレームの文字が透明
ORUKA1951の回答
- 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>
関連するQ&A
- インラインフレーム内の文字クリックで別窓を開く事は出来ますか？
こんにちは。 いつもお世話になっております。 今、HTMLのテーブル内にインラインフレームを 作って、読み込みHTMLはリンク集になっている ページを作っています。 読み込まれている【リンク集HTML】のリンク文字に target="_blank" をつけているのですが、 インラインフレーム内が切り替わるだけなのです。 インラインフレームの属性指定の部分の name="" を削除してみたのですが、リンク文字クリックで 別窓表示にはなりませんでした…。 インラインフレーム内のリンク文字をクリックして 新しいウィンドゥで表示する事は不可能なのでしょうか？ どうかご指導よろしくお願い致します。
- ベストアンサー
- HTML
- インラインフレームにリンクするには
お世話になります。 少年野球のホームページを作っていますが、リンクボタンを５つ作り、同じページにインラインフレームを一つ作って、リンクボタンをクリックすると、インラインフレーム内に表示させたいのですが、その方法が分かりません。HTMLで作っています。どなたかご教示願えますでしょうか？よろしくお願いいたします。
- ベストアンサー
- Windows XP
- インラインフレームについて
インラインフレーム内にあるリンクからインラインフレーム内に飛ぶのではなくて、フレームの外に飛ばしたいのですがどうしたらいいでしょうか？ 全部がインラインフレーム内に入ってしまうので困っています。宜しくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- インラインフレームで・・・
インラインフレームで１つのページにインラインフレームを2つ作って左に１つ、右に1つインラインフレームを設置して左にリンクをはってそのリンクをクリックすると右のインラインフレームにページが表示されるようにしたいのですが どうすればいいのでしょうか？ ちなみにですがこのようなＨＰを作りたいのです。 http://cgi-design.net/ いろいろ調べたのですがわかりません おしえてください。
- 締切済み
- HTML
- インラインフレームの作り方
ホームページNinja 2003を使ってます。 HP内に四角く切り抜いて、そこに元の枠のページからリンクを張り、いろんな別ページを表示させたいです。調べたら、インラインフレームというようですが、当該ソフトでもそういう操作はできるのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- インラインフレームのことなんですが・・・
インラインフレームの中にリンク先のページを表示させて、その、インラインフレームのフレームの色を変えることはできますか？ ぜひ、教えてください。
- ベストアンサー
- HTML
- インラインフレームからのリンクについて
質問させて下さい。 ブログのTOPページにインラインフレームを使って、コンテンツを収めていますが、そのリンク先においてのリンク元を調べて見ると、リンク元がTOPページのアドレスではなく、コンテンツを収めているページになってしまします。 スペースの関係でスクローバーを使ってコンテンツをどうしても収めたいのですが、リンク元がTOPページのままにするにはどうすれば良いでしょうか？ 宜しくお願いします。
- 締切済み
- ブログ
- インラインフレームのリンク
インラインフレーム内にリンクを配置して、リンクをクリックすると現在見ているウィンドウにリンク先のページを表示したいと考えています。リンクに target="_top" を指定すれば、ウィンドウにリンク先が開かれると思うのですが、実際にやってみると、うまく開くときもありますがインラインフレーム内でウィンドウが開いてしまうことがあります。 現在見ているウィンドウ＞インラインフレーム＞インラインフレーム＞リンクのあるページ と複数のインラインフレームを介しているのが原因のように考えています。 リンクのあるＨＴＭＬにjQueryプラグインを使ったスライドショーを入れて、複数のインラインフレームを介して画像をクリックすると現在見ているウィンドウにその画像のあるページを開きたいのです。 インラインフレーム内でリンク先のページが開いてしまうのは、やはりリンクのtarget指定の問題でしょうか？それともjQueryプラグインの設定か何かの問題でしょうか？ アドバイスいただければ幸いです。
- ベストアンサー
- HTML
- インラインフレーム内の文字サイズを変えるには？
現在、トップページに新着情報とお知らせをインラインフレームで作成しています。 そこで、最近良くある文字サイズ変更ボタンを設置して大中小とボタンをおした際にインラインフレーム内だけ文字サイズが変わりません。 この文字サイズを変更する方法はあるのでしょうか？ インラインフレームの中は、別ページになるので、スタイルシートの設定が及ばないのかな～と思ったりしているのですが、諦めきれません。 【styleswitcher.js】を利用して文字サイズ変更を設定しています。 どなたかご教授ください。 どうぞ宜しくお願いいたします。
- ベストアンサー
- HTML
お礼
回答ありがとうございます。