私のXOOPSのサイトにインラインフレームを設置し
そのインラインフレームの中から私のXOOPSのサイトを見れるようにしたのですが

それだとサイドメニューとヘッダーが表示され
目的のものが非常にみづらいので
インラインフレームの中の表示する部分を指定し目的の部分だけ見えるようにしたいのですが
表示する位置を指定したりはできないのでしょうか?

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

A 回答 (1件)

どのあたりを表示させたいのか分かりませんが、


iframe要素に属性marginwidthとmarginheightを指定すると、
インラインフレームの中の表示する部分の位置をずらすことが出来ます。
属性値を細かく変えて調整すると、
目的の部分をうまく表示させることも可能ですね。
例↓
<iframe src="*.html" width="***" height="***" Frameborder="no" marginwidth="***" marginheight="***"></iframe>

一発で目的の部分を指定表示させる魔法のようなタグは、私はないと思います。
    • good
    • 0

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

QCSSでインラインフレームを非表示にしたい

初心者です。
いろいろ試したのですがうまくいかないので教えてください。
複数のインラインフレームのレイアウトを、スタイルシートで一括管理したいのですが、

たとえば、

<iframe class="free" src="http://www.***" scrolling="no" frameborder="no"></iframe>
<iframe class="only" src="http://www.***" scrolling="no" frameborder="no"></iframe>
<iframe class="link" src="http://www.***" scrolling="no" frameborder="no"></iframe>

と縦に並んでいるインラインフレームをhtmlは変更せずに、
真ん中の「only」だけ隠すことはできませんか?
スペースが空かずにfreeとlinkだけが並んでいる状態にしたいです。
宜しくお願いします。

.free {
width:450;
height:760;
border:none;
margin: 0px;
overflow: hidden;
}

.only {
width:450;
height:680;
border:none;
margin: 0px;
overflow: hidden;
}

.link {
width:450;
height:680;
border:none;
margin: 0px;
overflow: hidden;
}

初心者です。
いろいろ試したのですがうまくいかないので教えてください。
複数のインラインフレームのレイアウトを、スタイルシートで一括管理したいのですが、

たとえば、

<iframe class="free" src="http://www.***" scrolling="no" frameborder="no"></iframe>
<iframe class="only" src="http://www.***" scrolling="no" frameborder="no"></iframe>
<iframe class="link" src="http://www.***" scrolling="no" frameborder="no"></iframe>

と縦に並んでいるインラインフレームをhtmlは変更せずに、
...続きを読む

Aベストアンサー

.only に display: none; を入れれば消えませんか。

Qインラインフレームについて。

インラインフレームについて。

インラインフレームは掲載するサイトの位置を決め固定することはできないのでしょうか?

http://girlschannel.net/topics/144767/

↑このサイトの上部に

2. 匿名 2014/05/30(金) 10:19:40 [通報]
スコティッシュフォールド

という書き込みがあります。

そのあたりをもう1つのホームページに表示させたいのですがスクロールしたものがでてきたり位置を調節できません。

ちなみに作成中のタグです。
<iframe src=" http://girlschannel.net/topics/144767/" width="?" height=?"px" frameborder="?">猫</iframe>

?は解らない所です。

他にその部分だけを表示させる方法はあるかもしれませんが解らないのでこの方法にしました。
あれば良ければ教えて頂きたいです。

どなたかご指導頂きたいです。
よかったらご意見ください。

Aベストアンサー

やっつけでやるなら
<iframe src="【ご提示のURL】#vbox1">

ご提示のページが質問者様の管理下にあるならば
ページ内容を
<li id="commentNo2"> <!-- 各コメントを囲む <li> に id 属性を付ける -->
<div class="comment_head">... 2. 匿名 2014/05/30(金) 10:19:40 ...</div>
<div class="comment">...</div>
<div class="value_box" id="vbox2">...</div>
</li>
と修正したうえで
<iframe src="【ご提示のURL】#commentNo2">


余談ではありますが

iframe を幅 800 ピクセル未満で表示すると、
ご提示のページは CSS に不備があるので、テキスト全体が表示されない問題があります。
ご注意ください
参考) http://www.blades.co.jp/blog/2010/07/cssverticalalignmiddle2.html

やっつけでやるなら
<iframe src="【ご提示のURL】#vbox1">

ご提示のページが質問者様の管理下にあるならば
ページ内容を
<li id="commentNo2"> <!-- 各コメントを囲む <li> に id 属性を付ける -->
<div class="comment_head">... 2. 匿名 2014/05/30(金) 10:19:40 ...</div>
<div class="comment">...</div>
<div class="value_box" id="vbox2">...</div>
</li>
と修正したうえで
<iframe src="【ご提示のURL】#commentNo2">


余談ではありますが

iframe を幅 800 ピクセル未満で表示すると、
ご提示のページ...続きを読む

Qヘッダーとフッターだけ背景を指定する方法

Webサイト全体の背景色を指定する方法は、スタイルシートで次のようにして行っております。

body { background-color: white; }

全体の背景色を指定するのは出来るのですが、ヘッター部分やフッター部分だけの背景色を指定するには、どうしたら良いのでしょうか?

例えば、下記、株式会社ノジマのようにヘッターとフッターだけ色を指定したいのです。
また、ヘッターとフッターだけは、パターン素材を使いたいと思っております。

http://www.nojima.co.jp/index.html

パターン素材を使った、ヘッターやフッターだけの背景を指定する方法を教えて下さい。

Aベストアンサー

> ヘッター部分やフッター部分
というからには、「この部分をヘッダーにする」と決めている個所があるかと思われます。
以下、ヘッダーに対する手順を書きますが、フッターの場合も同様の手順でできるはずです。

(1)もしその箇所が複数の要素になっている場合、つまり、
<!-- ここからヘッダー -->
 ……(何らかの要素)……
<!-- ヘッダー終わり -->
となっていたならば、まずそこを header (HTML5 の場合)または div (既存の HTML の場合)で囲みます。このとき div の場合にはクラスとして header を設定します。
すでに上記のような状況になっている場合はそのまま次に進みます。

(2)上記で設定した header または div に対して CSS で背景色・背景画像を設定します。
たとえば背景色を赤にしたい場合は
 header { background-color:red; }
または
 div.header { background-color:red; }
となります。

Q【CSS】ヘッダーの高さが不明の時、コンテンツの高さの指定について

画像のようなことをしたいです。
height:100%で、画面をスクロール、動かさないようにして表示したいのですが、ヘッダーの高さが指定されていないので、うまくいきません。

#contentはこのような場合、どうやってCSSを指定すれば『画面の高さ - #headerの高さ』のサイズになるのでしょうか?

できればJavaScriptやjQueryは使用しないで、CSSのみでお願いします。

Aベストアンサー

No.3の方が言われていることが気になったので補足です。

質問者さんが具体的にやりたいことは伝わっているので問題ありませんよ。
やりたいことは、#headerの高さをJSなしで取得し、#contentからその高さを引くにはどうしたらいいか、です。
JS(Jqueryでもなんでもいい)をできれば使いたくない、ということが条件なのでCSSのみで限りなく再現できる方法と、”できれば”とあるので余力があればJSの例を回答すればいいのです。
ユーザビリティについても触れられていますが、そんなことは質問とは別です。
マークアップに関しても指摘されていますが、divを使っている、とは質問者さんも一言も書いてないので気にしなくてよいです。
divを使おうがheaderを使おうが自由です、質問者さんの環境はHTML4かもしれませんし、環境はわかりません。idを指定するのも自由です。
とにかく、自由にやってみてください。もしそれでも本格的にHTMLを覚えたければ、正しい書き方をぜひ勉強してください。

で、解決方法ですが、経験上、#header高さが固定できない場合は、JSで引くことになると思います。
もしくは#headerの高さを固定できれば(あるいはおよそわかっていれば)calcを使ってもいいかもしれません。
下のHTMLをコピペしたHTMLファイルをつくって確認してみてください。こういうのをやりたかったんですかね?
※height: calc(100% - 60px);の60pxが#headerの高さとした場合です。

<!doctype html>
<html>
<head>
<style>
* {
margin:0;
}
html,body {
height:100%;
margin:0;
}

#header {
position:relative;
padding:20px;
background:#FF0;
}
#header h1{
line-height:20px;
font-size:16px;
}

#content {
position:relative;
height: calc(100% - 60px);
box-sizing:border-box;
background:#FF0000;
}
</style>
</head>

<body>

<div id="header">
<h1>TITLE</h1>
</div>

<div id="content">
</div>

</body>
</html>

No.3の方が言われていることが気になったので補足です。

質問者さんが具体的にやりたいことは伝わっているので問題ありませんよ。
やりたいことは、#headerの高さをJSなしで取得し、#contentからその高さを引くにはどうしたらいいか、です。
JS(Jqueryでもなんでもいい)をできれば使いたくない、ということが条件なのでCSSのみで限りなく再現できる方法と、”できれば”とあるので余力があればJSの例を回答すればいいのです。
ユーザビリティについても触れられていますが、そんなことは質問とは別です。
マーク...続きを読む

Q【html&css】ヘッダー画像が100%表示できません。

html&cssを勉強中の初心者です。

ヘッダー画像を横幅いっぱいに設定するために、画像を1000×100pxで作成しました。
下部分に罫線が2本入ったデザインです。

cssを以下のように入力しましたが、heightを150pxにしないと、罫線が表示しません。
色々調べましたが何が原因なのか分からず手こずっています(><;)
ホームページビルダーを使用していますが、なるべくcssで作成しています。

基本的な質問ですが、ヘッダーの縦幅を100pxにしたい場合はそれより大きいサイズの画像を
設定しなければいけないのでしょうか?

よろしくお願い致します。

header{
width:100%;
min-width:1020px;
height:150px;
background-image:url('img/header.png');
background-repeat:no-repeat;
background-position:center;
background-size:100%;

}

html&cssを勉強中の初心者です。

ヘッダー画像を横幅いっぱいに設定するために、画像を1000×100pxで作成しました。
下部分に罫線が2本入ったデザインです。

cssを以下のように入力しましたが、heightを150pxにしないと、罫線が表示しません。
色々調べましたが何が原因なのか分からず手こずっています(><;)
ホームページビルダーを使用していますが、なるべくcssで作成しています。

基本的な質問ですが、ヘッダーの縦幅を100pxにしたい場合はそれより大きいサイズの画像を
設定しなければいけないの...続きを読む

Aベストアンサー

%で指定する場合には工夫が要る。
信じられないかも知れないが、縦の比率はpadding-bottomで調整する。

#header{
width:100%;
min-width:1020px;
/*height:150px;*/ ←要らないからコメントアウトするか、削除
background-image:url(headertest.gif);
background-repeat:no-repeat;
background-position:center;
background-size:cover; ←cover指定する。
padding-bottom:10%; ←追加←最重要!値は微調整する。

}


このQ&Aを見た人がよく見るQ&A

このカテゴリの人気Q&Aランキング

おすすめ情報