こんばんは、以下のURLを参考に1ページ内のコンテンツを切り替えようと試行錯誤したのですが、メニューをdivでくくってしているため、どのように記述したらよいかわからず困っています。
参考URL
http://builder.japan.zdnet.com/news/story/0,3800 …

 左のメニューで右のメインコンテンツのレイヤーを切り替えられたいと思い作ったページです。実際に表示したい部分はコメントアウトしています。
floatでは、z-indexが使えないので無理やり、positionでレイアウトしていますが、よろしくおねがいします。

http://study.vs.land.to/index.html

このQ&Aに関連する最新のQ&A

A 回答 (2件)

IE6でjavascriptをつかうんだったら、結局全部javascriptでやっても


同じような気がします。

とはいえ、今回の件はこんな感じのことでしょうか?

<style>
#menu_set{float:left;}
#menu_set div{
background-Color:lime;
border:10px outset #666666;
height:60px;
line-height:60px;
text-align:center;
width:120px;
}
#menu_set div a:hover{border:10px inset #666666;}
#contents_t{background-Color:white;}
#contents_r{background-Color:red;}
#contents_b{background-Color:blue;}
#contents_y{background-Color:yellow;}

#contents_t,#contents_r,#contents_b,#contents_y{
position:absolute;
margin-left:140px;
border:10px outset #666666;
height:300px;
width:440px;
z-index:1;
}
#contents_t:target,#contents_r:target,#contents_b:target,#contents_y:target{z-index:2;}
</style>
<div id="menu_set">
<div id="menu1">
<a href="#contents_t">TOP</a>
</div>
<div id="menu2">
<a href="#contents_r">RED</a>
</div>
<div id="menu3">
<a href="#contents_b">BULE</a>
</div>
<div id="menu4">
<a href="#contents_y">YELLOW</a>
</div>
</div>
<div id="contents_t">
test1
</div>
<div id="contents_r">
test2
</div>
<div id="contents_b">
test3
</div>
<div id="contents_y">
test4
</div>
    • good
    • 0
この回答へのお礼

ありがとうございます。思った通りのイメージでした。上手く、ローカルでは、書き換えて表示できたので、アップロードしてみたいと思います。

お礼日時:2009/05/26 21:58

ちなみにIE6では:target非対応のようですが、IE6を


捨てる勇気はありますか?
    • good
    • 0
この回答へのお礼

ご意見ありがとうございます。捨てる勇気はありませんが、学ぶ意欲はあります。
javascriptとcssを駆使して、IE6で表現できる別の方法も今後、模索して行きたいと考えますが、今は、:targetを使用しての記述の仕方を知りたいです。

お礼日時:2009/05/26 01:11

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QFIRE FOX ツールバーの新しいタブボタン消失

FIRE FOXの ツールバーの 新しいタブボタンが 消失しました。
ツールバーのカスタマイズ画面にも 在りません。
何処へ行ってしまったのでしょう。

(注)タブバーの 新しいタブボタンでは ありません。御間違えなく。

Aベストアンサー

意外と気づかない人が居るかもしれませんね。
ツールバーのカスタマイズを開くとタブバーの一番右端に「+」というのが表示されます。
この「+」をツールバーのカスタマイズのウインドウにドラッグ&ドロップします。
そうすると、ツールバーのカスタマイズのウインドウに「新しいタブ」というボタンが出現しますので、これをナビゲーションツールバーへ再度ドラッグ&ドロップします。
これでナビゲーションツールバーに「新しいタブ」を追加することができます。

Qhttp://www.jqa.jp/index.html

http://www.jqa.jp/index.html
のようにブラウザの横幅を変更しても
内容が左右真中に表示され
ていますがこのようにするには、
どのようにすればよいのでしょうか?
よろしくお願いいたします。

Aベストアンサー

このような感じですか
最大800px,最小500px内で、ウィンドウ幅の60%で中央に表示される。

とりあえずサンプル・・
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
で(HTML4.01Strict)検証済み

<!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 http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:hoge@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
html,body{
margin:0px;padding:0px;background-color:rgb(200,200,200);
}
body>div{
width:60%;min-width:500px;max-width:800px;margin-left:auto;
margin-right:auto;background-color:white;padding:10px;
border:none;}
p{text-indent:1em;}
div{ margin:0.5em 1em; border:solid 2px blue;}
-->
</style>

</head>
<body>
<div>
<h1>サンプル</h1>
<p>http://www.jqa.jp/index.htmlのようにブラウザの横幅を変更しても、内容が左右真中に表示されていますがこのようにするには、どのようにすればよいのでしょうか?</p>
<p>よろしくお願いいたします。</p>
<div>
<p>こんな感じですかね。</p>
</div>
</div>
</body>
</html>

このような感じですか
最大800px,最小500px内で、ウィンドウ幅の60%で中央に表示される。

とりあえずサンプル・・
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
で(HTML4.01Strict)検証済み

<!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; ...続きを読む

Q●タブブラウザソフト「 sleipnir 」で上のツールバーの表示がおかしくなってしまった。

タブブラウザソフト「sleipnir」を利用しております。

ツールバーの表示がおかしくなり、ネットを見ている際「前の画面に戻る」際のボタンなどの含まれたツールバーが消えてしまいました。

現在残っているツールバーは、アドレス入力のボックスと、検索用のボックスのみです。

左右に「>>」のような記号がありますので、操作自体はそこにカーソルを合わせればできるのですが、ツールバーが復活しません。(><)

ツールバーの復活方法の手順をお教えくださいませ。m( _ _ )m

Aベストアンサー

単に隠れているだけでは?

「>>」の横にある縦に点が並んだ所(カーソルが「←→」になる所)をドラッグ&ドロップで好きな場所に移動する。
点がない場合はツールバー上で右クリック→ツールバーの固定を解除する。

Q[http://lxr.mozilla.org/mozilla/source/layout/style/html.css]のファイルを得るには

UAごとのHTML,CSSのデフォルトスタイルシートの違いが知りたいと思って検索していたところ

Firefoxのデフォルトスタイルシートは
http://lxr.mozilla.org/mozilla/source/layout/style/html.css
にあるらしいことが判明しました...が、これ、普通に見ると行番号のついた拡張子CSSのHTMLですよね。(行番号のない)CSS本体を入手するにはどうしたらいいのでしょうか?

#IE6,IE 7 beta2,Operaのデフォルトスタイルシートのありかについても知ってたら教えていただけるとありがたいです

Aベストアンサー

Firefox のデフォルトスタイルシートは
C:\Program Files\Mozilla Firefox\res\html.css

たぶん IE や Opera のデフォルトスタイルシートはプログラムに直接組み込まれていて CSS ファイルとして取り出すことは出来ないと思います。

Qgoogleツールバーが使えるタブブラウザ教えてください。

現在unDonutというタブブラウザを使っていますが
googleツールバーが使えないみたいなので変えようと思っています。

こちらの過去ログで調べてFireFox とLunascapeでは使える
様ですがその他googleツールバーが使える
タブブラウザがあったら教えて下さい。     

googleツールバーが使える物の中で一番使い易いものを
選ぶつもりです。

ネットサーフィンをしていてページランクが見たいだけ
なのでなんでもいいのですが一応全部知りたいのです。

ご回答よろしくお願いします。

Aベストアンサー

lite777さんの調べた通り、利用できるのは

FireFox  Lunascape IE7

です。
ページランクだけの利用であれば問題思いますが
lunaはツールバーのフル機能は使えず、一部機能が動作しません。

Qアドレスに http://www.○○○.com/%20 って?

ページを公開して、ネット上から自分のサイトを見てみたんですが、
トップページからリンクされたページを段々に開いていって見ていて、
何となくプロパティーを開いて見ていたら、アドレスの表示が

http://○○○.jp/3%20○○○○○○.html
って表示されているんです。

保存してファイル名とは違っているけど問題ないのでしょうか?

この %20っていうのは一体何の意味ですか?

どなたか教えてください。

Aベストアンサー

> 問題ないのでしょうか?
場合によっては「ファイル名が違う」ので表示エラーになります。
サーバによってはアップロードできません。
ファイル名、フォルダ名は基本、半角英数のみで名前をつけましょう。
(記号はハイフン「-」アンダーバー「_」程度にとどめるのが吉)

Qエクセルのツールバーとシートタブを隠す!

エクセルのツールバーを「フォント」と「フォントサイズ」だけ残して、シートタブも隠したいのですが、VBAでできますか?

※ 特定のファイルが開かれたときのみ実行させたい(その他は、ユーザーのカスタマイズ通り)
※ Openイベントで実行
※ エクセル97、2000に対応(作成は97)

ツールバーを消してしまうVBAは、結構見つけたのですが、どうもうまく行きません。どなたか宜しくお願いします。

Aベストアンサー

シートタブを隠すのは、ActiveWindow.DisplayWorkbookTabs = False

こんなことしか考えつきませんでした。
表示→ツールバー→ユーザー設定でツールバータブを選択して新規作成し名前を付けます。
次にコマンドタブを選んで編集をクリック。フォントとフォントサイズを新しく作成したツールバーにドラッグ&ドロップします。これをツールバーの位置(上)にドラッグ&ドロップします。
後はこのツールバー以外を非表示にします。(フォントのみのツールバーを作ったわけです)

今、どのようなツールバーが規定値か分かりませんので消したいツールバーはマクロの記録を使いコードの書き方は分かると思います。

書く場所は、ThisWorkbookに下のような感じです。
Private Sub Workbook_Open()
  ActiveWindow.DisplayWorkbookTabs = False
  :
  :
End Sub

ブックを閉じる時は元に戻したほうがいいでしょう。(ThisWorkbook)
Private Sub Workbook_BeforeClose(Cancel As Boolean)
  ActiveWindow.DisplayWorkbookTabs = True
  :
  :
End Sub

シートタブを隠すのは、ActiveWindow.DisplayWorkbookTabs = False

こんなことしか考えつきませんでした。
表示→ツールバー→ユーザー設定でツールバータブを選択して新規作成し名前を付けます。
次にコマンドタブを選んで編集をクリック。フォントとフォントサイズを新しく作成したツールバーにドラッグ&ドロップします。これをツールバーの位置(上)にドラッグ&ドロップします。
後はこのツールバー以外を非表示にします。(フォントのみのツールバーを作ったわけです)

今、どのようなツールバーが...続きを読む

Qhttp://www.mgame.com/ このページのナイトの広告はどうやってつくられてるのでしょうか?

http://www.mgame.com/ このページのナイトの広告はどうやってつくられてるのでしょうか?2回目以降はみれなくなります。

Aベストアンサー

作り方はマクロメディア社(現在はAdobeに買収)のFlashというソフトを使用して作ります。
他社からもFlash作成ソフトは出ていますが本格的に始めるのならやはり本家でしょう。

作り方は簡単ではありません。
基本的にはタイムラインに画像や音声、スクリプトを配置して動きをつけていきます。

サイト内で勉強されるのは困難だと思います。
まずは初心者向けの書籍を読んで勉強した方がいいのではないでしょうか。

参考URL:http://www2.netwave.or.jp/~light/

QGoogleツールバーの使えるタブブラウザ

Googleツールバーのように、検索の候補が表示され、タブが使用できるブラウザはありますでしょうか?

IE6を使っていましたが、10個ほど起動すると非常に重くなるため、IE7のタブブラウザを導入してみましたが、あまり軽くなりませんでした。またIE7はカスタマイズ性が無くなったのも残念でした。

便利さ・セキュリティ面など、比較するところはたくさんありますが、とりあえずタブ・検索候補表示(Googleツールバー以外でも構いません)ができるブラウザがありましたら、教えていただけると助かります。

Aベストアンサー

Firefoxに拡張機能のTab Mix Plusを導入して、プラグインの検索エンジン(Google,Yahoo,Gooなどがデフォルトで同梱)を入れたら良いのではないですか。

但し、FirefoxはActiveXコントロールのインストールが必要なサイトでは用が足せません。
その分、セキュリティ上は優位ですが。
(Firefox)
http://www.mozilla-japan.org/products/firefox/

(Tab Mix Plus)
https://addons.mozilla.org/en-US/firefox/addon/1122
(検索エンジン)
http://www.mozilla-japan.org/addons/firefox/search-engines/

Qindex.htmlとindex.htmを置いてますが、index.htm に集めたい!

変な質問になってすみません!!

現在ホームページ上に、index.htmlとindex.htmというファイルを置いています。現在、使っているページはindex.htmをメイン(トップページ)としています。

しかしながら、index.htmlに来る人もいます。このページは現在使っていないのですが、訳あって削除することが出来ません。

そこで、metaタグ?か.htaccess?などを使ってindex.htmlに訪れた場合、index.htm に行かせる事は出来ますでしょうか?

方法をご存知の方がおられましたらアドバイス宜しくお願いいたします。

Aベストアンサー

HTML(index.html) の場合
<meta http-equiv="refresh" content="./index.htm">

.htaccess の場合
Redirect /sample/index.html http://www.goo.ne.jp/sample/index.htm

上記の様に対処できます。
.htaccess の例示は、ドメイン,ディレクトリ共に架空の物です。
ただし同等の形式での動作実績はあります。
(ファイル名変更時の移行用として当方使用。
以前は JavaScript外部ファイルの管理で使用。
JavaScript外部ファイルでは HTML の METAタグの様にリダイレクトさせる物が無いので・・・。)
また、ファイル名を省略すると、ディレクトリ自体が対象となります。


で、改めて裏付けとなりそうな参考説明ページを探したのですが・・・。無いですねぇ~。どれもディレクトリまで・・・。
まぁ資料はないが(個人的)実績だけはあると・・・。

何か寂しい情報ですが、使えたら参考にして下さい。
自分も試行錯誤で試して動いたから使ったという様な気が・・・。

HTML(index.html) の場合
<meta http-equiv="refresh" content="./index.htm">

.htaccess の場合
Redirect /sample/index.html http://www.goo.ne.jp/sample/index.htm

上記の様に対処できます。
.htaccess の例示は、ドメイン,ディレクトリ共に架空の物です。
ただし同等の形式での動作実績はあります。
(ファイル名変更時の移行用として当方使用。
以前は JavaScript外部ファイルの管理で使用。
JavaScript外部ファイルでは HTML の METAタグの様にリダイレクトさせる物が無いので・・・...続きを読む


人気Q&Aランキング