人に聞けない痔の悩み、これでスッキリ >>

左にメニューバー、右にメインコンテンツ、という標準的な配置になっています。
左のメニューバーを iframe にしているのですが、ここで height を100%にすると右のメインコンテンツの高さの分だけが表示され、途中で切れてしまいます。
height を書かないともっと短くなってしまいます。

ですので、メニューバーの長さを超えた数値を適当に入れています。
例えば、メニューバーの高さが500ピクセルだったら、600ピクセル位にしておけば全部表示されます。

しかし、この場合、メニューバーの項目が増えてくるとその度にこの数値を変更しないといけないし、いつも適当に数字をあてはめて確かめるというのも大変です。
iframeをメニューバーとして使い、全部が表示されるよい方法がありましたら教えてください。
どうぞよろしくお願いします。

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

A 回答 (1件)

ありません。

iframeに表示されるデータの大きさを、親のHTMLを描画する以前に知る方法がないからです。
 そもそもiframeでメニューを表示すること自体が、iframeの趣旨に反しています。面倒でも内容を書きましょう。テキストエディタで複数行置換(差し替え)できるものはたくさんあります。それでもなら、CGIなどを使ってサーバーにさせればよい。
    • good
    • 0
この回答へのお礼

ご回答いただきありがとうございます。
>面倒でも内容を書きましょう。
面倒でもこれが一番無難なのでしょうね。

お礼日時:2010/03/01 10:27

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

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

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

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

Q最新ページを表示する際のF5キーとctrl+F5キーの違い

お世話になります。

Webページを最新状態で表示する際に、ショートカットキーを利用して「F5」押下または「ctrl」キーと「F5」キーを同時に押下する場合があるかと思います。

Q1.この、「F5」キー単独の場合と、「ctrl」キーと「F5」キーを同時に押下した場合の違いは何なのでしょうか?どちらの場合も、たまにですが、最新状態が表示されないことがあります。クライアントマシンのキャッシュの設定や、表示するWebページがフレームを使っているかどうかも関係しているのでしょうか?なにかご存知の方がいらっしゃいましたらお教え下さい。

Q2.ASP.NETで開発しているwebページがあるのですが、F5キーやctrlキー押下時の処理を記述することはできるのでしょうか?

以上、よろしくお願いいたします。

Aベストアンサー

> Q1.この、「F5」キー単独の場合と、「ctrl」キーと「F5」キーを
> 同時に押下した場合の違いは何なのでしょうか?
どちらもページを最新の情報に更新しますが、CTRLキーと同時に押した場合は強制リロードになります。
タイムスタンプが同じでも、更新するってことですね。


> どちらの場合も、たまにですが、最新状態が表示されないことがあります。
METAタグでキャッシュしないよう、コンテンツ側で設定されてみてはどうでしょうか。


> Q2.ASP.NETで開発しているwebページがあるのですが、
> F5キーやctrlキー押下時の処理を記述することはできるのでしょうか?
クライアント側の JavaScript でリロードの処理をしてやればOKです。

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

Qセルの高さをiframe内のページの高さに合わせて可変にする方法はない

セルの高さをiframe内のページの高さに合わせて可変にする方法はないでしょうか?


テーブルの中にインラインフレームを入れたページを作ろうと思っているのですが、セルの高さを、インラインフレーム内に表示させたページの高さに合わせて可変にする方法はないでしょうか。

セルの高さの指定をしない+インラインフレームの高さの指定を100%にすれば出来るかな、と思ったのですが、やってみると指定していないのにもかかわらずセルの高さが150pxくらいになり、インラインフレームもそれに合わせた高さになってしまって失敗でした。
インラインフレームの高さを中のページに合わせて可変にして、セルもその高さに合わせる、というような方法があるのであれば、そのやり方でもいいです。


理想は、インラインフレームの中にはリンクによって複数のページを交互に表示させ、またそれらのページはインラインフレームではありますがスクロール無し(つまり親ページのスクロールでインラインフレームごとスクロールさせて下の方まで読むような形)の仕様にしたいです。
しかしインラインフレームの中に表示させるどのページも文章の量や画像のサイズがばらばらでページの長さが異なるので、それぞれの長さに対応出来ればなと思い、このたびの質問に至りました。


図としては


※テーブル幅は指定

| ̄ ̄ ̄ ̄ ̄|←ヘッダー
| ̄ ̄ ̄ ̄ ̄|←メニュー
| ̄ ̄ ̄ ̄ ̄|
|     |
|     |←インラインフレーム
|     |(ここに表示させるページによって高さ可変)
|     |
|_____|
|_____|←フッター



例:

1:インラインフレームに短めのページが入った場合↓


| ̄ ̄ ̄ ̄ ̄|←ヘッダー
| ̄ ̄ ̄ ̄ ̄|←メニュー
| ̄ ̄ ̄ ̄ ̄|
|     |←インラインフレーム
|_____|
|_____|←フッター




2:インラインフレームに長めのページが入った場合↓


| ̄ ̄ ̄ ̄ ̄|←ヘッダー
| ̄ ̄ ̄ ̄ ̄|←メニュー
| ̄ ̄ ̄ ̄ ̄|
|     |
|     |←インラインフレーム
|     |
|     |
|     |
|     |
|     |
|     |
|     |
|     |
|     |
|_____|
|_____|←フッター


というのが理想です



うまい説明ができなくて申し訳ないのですが、もしわかる方がいらっしゃいましたら、ご回答よろしくお願いいたします。
 

セルの高さをiframe内のページの高さに合わせて可変にする方法はないでしょうか?


テーブルの中にインラインフレームを入れたページを作ろうと思っているのですが、セルの高さを、インラインフレーム内に表示させたページの高さに合わせて可変にする方法はないでしょうか。

セルの高さの指定をしない+インラインフレームの高さの指定を100%にすれば出来るかな、と思ったのですが、やってみると指定していないのにもかかわらずセルの高さが150pxくらいになり、インラインフレームもそれに合わせた高さになって...続きを読む

Aベストアンサー

Tipsを提供されている方の、ブログでの記事紹介になりますが…

iframe内の高さを取得し、内容に合わせて高さを変更するJavascript(参照URL)

ただし、iframe内に表示するドメインは同一ドメインである必要があります。

参考URL:http://css-eblog.com/javascript/fit-height-iframe.html

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

QHTMLページ上でiframeを最前面に出したい。

Javaを使用せずにHTMLページ上に埋め込んだiframeを最前面に出す方法はないでしょうか?

ヤフーショップページの左側にあるサイドナビ内のフリースペース枠にiframeでカテゴリーを埋め込んでいます。

その際にiframe枠内ではアコーディオン系のマウスオーバーにてサブメニューが右側に表示されるような感じの事を行っていますが、トリプルサービスでのトップページでは表示になんら問題はないものの、ヤフーショッピングサイトではHTMLタグの制限で外部CSS及びJavaが使用できず何とかならないものかと色々試行錯誤するものの解決の糸口が見当たりません(汗

z-indexをiframeタグに加えてみたもの効かず、overflow:visible;でも効かず、ダメもとでsrc=""のファイル名直後に?wmode=transparentを書き加えてももちろんダメでした(汗

Youtubeの時に?wmode=transparentが有効だったのでもしかして!?と思ったのですが。。。

ヤフーショッピングにてサイドナビ内に設置したいカテゴリが商品量に相応し縦長になり、更にはサイドカテゴリ部より直接商品ページへ飛ばしたいと考えており益々長くなってしまいバランスが悪いのでアコーディオン形のものが埋められればと試行錯誤しております。

他に表示的なアドバイスを含め、何か策があればご教授をお願いします m( . . )m

Javaを使用せずにHTMLページ上に埋め込んだiframeを最前面に出す方法はないでしょうか?

ヤフーショップページの左側にあるサイドナビ内のフリースペース枠にiframeでカテゴリーを埋め込んでいます。

その際にiframe枠内ではアコーディオン系のマウスオーバーにてサブメニューが右側に表示されるような感じの事を行っていますが、トリプルサービスでのトップページでは表示になんら問題はないものの、ヤフーショッピングサイトではHTMLタグの制限で外部CSS及びJavaが使用できず何とかならないものかと色々試行錯...続きを読む

Aベストアンサー

要素のスタイルに z-index だけでなく、position: relative も加えてください。

要素に z-index を適用する場合、その要素の position が static 以外の値でないといけません:
つまり relative, absolute, fixed のどれかです。
position: relative を指定し top, right, bottom, left の値を指定しなければ(デフォルト値の auto にしておけば)、要素の位置はそのままに z-index で重なり順を制御できるはずです。
この手法で表示崩れを生じる場合は他のスタイルとの干渉が考えられます。


表示に関するアドバイス、余計なお世話かもしれませんが加えます。
『縦長になってバランスが悪いので』といった理由で JavaScript を用いたアコーディオン型メニューを加えているなら、それはきっとやめたほうがよいでしょう。
JavaScript がオフの環境は考慮されているかという問題以前に、バランスの悪くなるほど縦長のメニューは折り畳んだところで使い勝手は悪いままの場合がほとんどです。

なぜ縦長のメニューになるのでしょう。
カテゴリを細かく分類しすぎなのか。
それとも最下層のカテゴリまで一度に表示しようとしているのですか。
考慮の浅い分類は、表示の工夫以前にそもそも使いづらい運命です。

ぱっと見で収まるくらいの分類数に収めるよう考え直してみてはどうでしょう。
分類しづらい、あまりにかけ離れた商品種を扱っているなら、それは別のショップとしてサイトを作るべきです。
細かな分類は、大きな分類を選んだあとに表示するべきです。
数十の分類から一つを探し出すより、数個の分類を複数回渡り歩くほうがユーザーにストレスはかからないそうです(一回のクリックまでが短ければ、複数回クリックは苦にならない)。
細かな分類まで最初に見せたい理由が、その中に人気の商品があるなどであるなら、それは別枠の分類『人気の商品』『新商品』などとしてリンクを設けるべきで、わらの中から針を探すという苦行をユーザーにさせるべきではありません。

あとただの偏見ですが、マウスオーバーで出てくるサブメニューは使い勝手の悪い印象があるので、よほど洗練された使い方でない限りそれがあるだけでサイトの評価減です。

提供側の『このように見せたい』ではなく、利用側の『このように見たい』が優先される世界を願って。
(Amazon などは『このように見たい』の中にさりげなく彼らの売りたいものを混ぜてくるので、さすがだと思っています)

参考URL:http://webdesignrecipes.com/css-visual-formating-model/

要素のスタイルに z-index だけでなく、position: relative も加えてください。

要素に z-index を適用する場合、その要素の position が static 以外の値でないといけません:
つまり relative, absolute, fixed のどれかです。
position: relative を指定し top, right, bottom, left の値を指定しなければ(デフォルト値の auto にしておけば)、要素の位置はそのままに z-index で重なり順を制御できるはずです。
この手法で表示崩れを生じる場合は他のスタイルとの干渉が考えられます。


表示に関するアド...続きを読む


人気Q&Aランキング