人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

iframeを使った左メニューを作りたいと思っています。例えばこんな感じです↓
http://www2.cty-net.ne.jp/~komono-f/
ただ、メニューの入っているiframeの高さのサイズを長くすると(例えば上記ペー
ジでheight=1500にしたりすると)、印刷の際にメニュー部分が下のほうにずれ
てしまいます。
ブラウザでの表示と同じように、iframeのメニュー部分を、上揃えで印刷できる
ようにするにはどうしたらよいでしょうか?宜しくお願いいたします。

●質問者: vanda
●カテゴリ:ウェブ制作
✍キーワード:サイズ ブラウザ 印刷
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● ed_tks
●10ポイント

左メニュー部分が長くなると、右コンテンツ部分も縦に伸びて表示されるという事ですよね。

解決策は、右側コンテンツ部分を『入れ子』にし、上揃えすることです。

具体的には、現在のメニュー&コンテンツ部分のテーブル(セルが9つ)を左右の2つのセルにし(右8つのセルを結合させる)、左のセルの中にメニュー部分(これは現在と同じ)、右のセル【上揃えのため<TD>タグに VALIGN=”top”を記述します】の中にコンテンツ部分(セルが8つ)の『テーブル』を作成してあげればよいと思います。

分かり難くてすみません。

◎質問者からの返答

>左メニュー部分が長くなると、右コンテンツ部分も縦に伸びて表示されるという事ですよね。

いえそうではなく、印刷の時に表示がずれてしまうのを解決したいんです。

左のメニュー部分が伸びれば、当然右側のコンテンツ部分も長くなりますが、問題なのは、左メニューにiframeを使った時、印刷するとiframe部分がブラウザの表示とずれて印刷されてしまうということです。

サンプルページを作ってないのでわかりにくいかもしれないのですが。。。

(ちなみにhttp://www2.cty-net.ne.jp/~komono-f/は例としてあげているだけで、作りたい実際のページとは異なります)


2 ● HAL(源川はるか)
●30ポイント

http://www.tohoho-web.com/css/reference.htm#position

とほほのスタイルシート入門

iframeタグ内に絶対位置を指定していただくと、

印刷時のずれを防ぐことが可能です。

具体的には、<iframe>内に以下の属性を追加します。

style=”position:absolute; top:128px;”

(スタイルシートにてポジショニングを絶対位置で指定、ページ最上部より128ピクセル)

数字は任意でご変更いただけます。

※ただし、上記指定をなさった場合、iframeの周囲に書かれている内容がずれてメニューの下に潜ってしまう場合があります。

テーブルの段組み及び各セルの幅指定を見直す、他オブジェクトにも絶対位置指定を適用する、改行を挟む、などしていただければ回避可能です。

◎質問者からの返答

ありがとうございます。かなりいい感だったのですが、大枠のtableがセンター揃えなんです。

topは150pxで指定できたのですが、横位置(left)はブラウザのサイズによって位置を変えなくてはならずうまくいきません。

どうしたらよいでしょうか…(TT)


3 ● izayoimizuki
●10ポイント

配置の単位は%にすることもできます。

left:10%;といったようにすることでうまくいくと思います。

複雑なCSSを書いているとプロパティが相互干渉して

おかしなことにならないという保障はできませんが。

◎質問者からの返答

%指定も試してみたのですが駄目ですね。。

大枠のフレームのサイズ自体は固定なのでやはり%では駄目なのだと思います。

tableとcssのハイブリッドデザインなのですが

tableの代わりにdivで親ブロックを作り、その中にiframeを入れて位置関係を指定すればうまく言ったかもしれません。。

セル(td)に無理やりdivを入れてやってみたのですが

残念ながらうまくいきませんでした。

センター揃えでなく、左寄せだったら絶対位置指定でうまくいったのに。。。しまったなぁ。

しかしながら、解決策がもしあれば宜しくお願いいたします。


4 ● umode
●50ポイント

http://hp.vector.co.jp/authors/VA022006/css/media.html

メディアタイプ - CSS2リファレンス

こんにちは。

つい最近はてなに参加し始めたので

もし不手際がありましたらスミマセン。

さて、本題ですが

プリントアウトする場合のみ考慮すれば良いのですよね?

ならば、少々面倒くさいですが、

media=”print”用のCSSを作るのはいかがですか?

回答に対する返事を拝見した上で

大枠が<table>ならば、全体の位置を変えてもレイアウトは変わらないと判断しました。

プリントアウトする時だけ左に寄せて、position:absoluteで

iframeの位置を固定されればご希望通りになるのでは?

ただし、@media関連はバグも多い様ですが。。。

直接はiframeの配置に関係ありませんが、

media=printに関するサイトを挙げておきますね。

2つ目はもしprint用のCSSを作られるなら参考になるかと。

http://linkage.xrea.jp/article/2004/07/css2print.php

◎質問者からの返答

ありがとうございます。印刷用のCSSも考えていたので助かりました。^^

>4.回答者:umode 2005/02/01 05:15:59

こんにちは。

つい最近はてなに参加し始めたので

もし不手際がありましたらスミマセン。

さて、本題ですが

プリントアウトする場合のみ考慮すれば良いのですよね?

ならば、少々面倒くさいですが、

media=”print”用のCSSを作るのはいかがですか?

>回答に対する返事を拝見した上で

>大枠がならば、全体の位置を変えてもレイ>>アウトは変わらないと判断しました。

>プリントアウトする時だけ左に寄せて、position:absoluteで

>iframeの位置を固定されればご希望通りになるのでは?

今回の場合、これが一番いい方法だと思います。

ありがとうございます。

URLはたいへん参考になりますね。

お気に入りに入れさせてもらいました。

--

みなさまご回答ありがとうございました。

関連質問



●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ