質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • HTML

    11487questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7542questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5124questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2626questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

【緊急】画像やdivの配置方法に関して

受付中

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 1,296

mikio

score 41

下記コードの様にHTMLを書いた際に
コンテンツ同士が重なってしまい、
綺麗に縦に並べる事が出来ません。

また上のグレーのコンテンツに関しては、
横幅を100%で高さはウィンドウサイズによって自動で調整されるようにしたいと思っております。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>

<body>

<!-- ▼グレーのコンテンツ▼ -->
<div style="width:100%; height:auto; margin:0 auto; padding:0 auto; position:absolute; top:0; left:0;">
<iframe src="http://www.placehold.it/2000x1500" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>
</div>

<!-- ▼イエローのコンテンツ▼ -->
<div style="width:100%; height:auto; margin:0 auto; padding:0 auto; left:0; position:absolute;">
<iframe src="http://placehold.it/2000x1500/ffff00/000000" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>
</div>


</body>
</html>

上記コードで中に画像を設置した場合、
グレーの中の画像がウィンドウサイズを小さくした際に、
ある大きさで固定されてしまい、それ以上小さくならない部分に関しては、
どのような理由が考えられますでしょうか。

ifreamタグの中へ画像を設置して
それぞれwidth="100%" height="100%"という指定を行っているのですが、
中の画像が縮んだ際にifreamと画像の高さの差が出てしまい、
ifreamの下部分へ隙間ができてしまう部分に関しても、是非原因をご教授頂けましたら幸いです。


画像などを横幅100%にして高さは自動でページ上へ設置する際には、
どのようなHTMLやCSSをするのがベストなのでしょうか。

また1枚を横幅100%で表示するだけではなく、
複数の画像を横幅100%で設置したい場合の方法もご教授頂きたいと思っております。

以上、知識不足で分からない点が数多くございますが、
是非ご教授頂けましたら幸いです。


  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

0

iframeタグを使わないといけないのでしょうか?
どのようにしたいのかいまいち理解していないため、的外れかもしれませんが、下記のようにimgを配置するだけではダメなのでしょうか。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style type="text/css">
* { margin:0; padding:0; }
img {
    width: 100% ;
    height:auto;
    display:block;
}
</style>
</head>
<body>
<div><img src="http://www.placehold.it/2000x1500"></div>
<div><img src="http://placehold.it/2000x1500/ffff00/000000"></div>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/22 17:52

    コメント頂き誠にありがとうございます。

    ご返信が遅くなってしまい申し訳ございませんでした。

    今回ifreamタグを使用する件は、
    どうしても複数ページ同じもの(例えばヘッダーなど)
    を表示させなければいけないので、今回ifreamのご質問をさせて頂きました。

    どうしてもifreamの中へ画像を設置してページ上へは画像が設置された
    ifreamをサイズが可変式で設置できるようにしたいと考えております。

    キャンセル

  • 2015/04/22 20:29

    iframeのサイズを可変にするには、おそらくCSSだけでは難しいと思います。
    私がCSSだけでやる方法を知らないだけかもしれませんが、jQueryなどを使わないとiframeで読み込むhtmlファイルの高さを取得できないと思います。

    キャンセル

  • 2015/04/23 14:19

    そうなんですね!

    ちなみにjQueryで実装する方法などはご存知ですか??

    キャンセル

0

position:absolute;を消すと縦に並びます。
divやiframeにbackground-color:pink;などと背景色をつけると解析しやすいと思います。

高さはhtml、body(親タグ)にも設定しないと調整されません。
以下のようにCSS書いて、
<style>
html,body{
height:100%;
margin:0;
padding:0;
}
</style>
divにheight:50%とか指定したらどうでしょう?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/22 17:54

    ご回答頂きありがとうございます。

    またご返信が遅れてしまい申し訳ございませんでした。

    すいません。

    私の知識不足と理解力不足にて、
    lightwill さんがおっしゃっている内容の意味が
    よくわかりません。

    申し訳ございません。

    大変恐縮ですが、
    もう少し具体的にご教授頂けましたら幸いです。

    キャンセル

0

position: absolute を指定した場合、top/bottom が指定されていないと(縦方向には)現状の構造と同じ箇所に配置するという特性があります。(→ absoluteを指定しなかったときと同じ位置に配置されます)
left, right が設定されていない場合は、横方向的にも同様になります。

また、absolute にて配置されたコンテンツは既存のコンテンツの配置には影響を与えません。

つまりは、ブラウザは下記のように解釈します。

1. (absolute)grey のコンテンツは Top:0, Left:0 に配置。
2. (absolute)yellow のコンテンツは (Top:0), Left:0 に配置となります。

上部のコンテンツ位置を元に次のコンテンツを配置したい場合は、position:relative を利用してください。

今回の場合・・・

<body style="position:relative"><!-- 親要素にも position を追加 -->
  <div style="position:relative; top:0; left:0">GreyContents...</div>
  <div style="position:relative; left:0;">YellowContents...</div>
</body>
コード

グレーの中の画像がウィンドウサイズを小さくした際に、 
ある大きさで固定されてしまい、それ以上小さくならない部分に関しては、 
どのような理由が考えられますでしょうか。 

iframe の中で、CSS に min-width (min-height) 等が指定されていないでしょうか?


画像などを横幅100%にして高さは自動でページ上へ設置する際には、 
どのようなHTMLやCSSをするのがベストなのでしょうか。 

高さ、幅が可変長であるなら、position:absolute は利用しないこと・・・かな。
あとはケースバイケースになります。


また1枚を横幅100%で表示するだけではなく、 
複数の画像を横幅100%で設置したい場合の方法もご教授頂きたいと思っております。 

個人的には、画像に対して width はあまり指定しない方が良いですね。
min-width, max-width を利用して、最低(最高)サイズを決めるといった方法の方が良いかと思います。
(画像に関しては下手にサイズを変更するとぼけてしまいますので。。。)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/22 18:41

    uskさん

    とてもご丁寧なご返答ありがとうございます!

    コメント頂きました内容を参考に下記の様なサンプルを作ってみたのですが、
    どうしてもウィンドウサイズの横幅を狭くすると画像はしっかりと縮むのですが、
    画像を読み込んでいるifreamの高さがうまく縮まらず、
    2つ目に設置したifreamとの間に隙間ができてしまいます。

    また反対にウィンドウサイズの横幅を横に伸ばした場合、
    上のifreamと下のifreamが重なり、
    中の画像も切れてしまいます。。。

    この部分に関しては、
    どのように対応すればよろしいでしょうか。

    下記にて現在試しているサンプルのHTMLを記載させて頂きます。




    ====【 画像が入っているHTML(ifreamで読み込まれるHTML)-1 】====
    ■HTML名:back-image.html
    ▼HTMLソース
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>無題ドキュメント</title>
    <style>
    <!--
    html,body {
    height:100%;
    margin:0;
    padding:0;
    }
    img {
    max-width:100%;
    min-width:10%;
    }
    -->
    </style>
    </head>

    <body>



    <img src="http://placehold.it/2000x1500/ffff00/000000&quot;&gt;



    </body>
    </html>

    =======================================

    ====【 画像が入っているHTML(ifreamで読み込まれるHTML)-2 】====
    ■HTML名:back-image2.html
    ▼HTMLソース
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>無題ドキュメント</title>
    <style>
    <!--
    html,body {
    height:100%;
    margin:0;
    padding:0;
    }
    img {
    max-width:100%;
    min-width:10%;
    }
    -->
    </style>
    </head>

    <body>



    <img src="http://www.placehold.it/2000x1500&quot;&gt;



    </body>
    </html>

    =======================================

    ====【 上記2つのHTMLをifreamで読み込むHTML 】====
    ■HTML名:ifream-back-image.html
    ▼HTMLソース
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>無題ドキュメント</title>
    <style>
    <!--
    html,body {
    height:100%;
    margin:0;
    padding:0;
    }
    #ifream_test,
    #ifream_test2 {
    max-width:100%;
    min-width:100%;
    height:100%;
    position:relative;
    top:0;
    left:0;
    }
    -->
    </style>
    </head>

    <body>


    <iframe id="ifream_test" src="back-image.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe>

    <iframe id="ifream_test2" src="back-image2.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe>



    </body>
    </html>

    =======================================

    以上です。

    大変お手間ではございますが、
    上記の件に関しまして、
    ご回答の程宜しくお願い致します。


    簡単にご説明させて頂きますと、
    下記の様にifream-back-image.htmlに
    左記の2つのHTMLを読み込みたいと思っております。

    ●back-image.html━━┳━ ifream-back-image.html
    ●back-image2.htm l━┛


    キャンセル

  • 2015/04/23 10:24

    > どうしてもウィンドウサイズの横幅を狭くすると画像はしっかりと縮むのですが、
    > 画像を読み込んでいるifreamの高さがうまく縮まらず、
    > 2つ目に設置したifreamとの間に隙間ができてしまいます。

    コメントのHTML/CSSでは iframe の高さを 100% としている為、iframe のコンテンツ内容に関わらずウィンドウサイズ(body の高さ)の高さ一杯に iframe の領域が取られます。
    なお、iframe の高さを iframe 内に記載されたコンテンツの高さに合わせる為には、Javascript を利用し、ifame 内容を読込んだ後でリサイズする必要が有ります。
    (HTML、CSS だけでは対応でき無かったと思います)

    具体的には iframe タグの読込完了イベント(onload)にて、iframe の幅・高さを変更すればよいです。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>無題ドキュメント</title>
    <style>
    <!--
    html,body {
    height:100%;
    margin:0;
    padding:0;
    }

    #ifream_test,
    #ifream_test2 {
    max-width:100%;
    min-width:100%;
    position:relative;
    top:0;
    left:0;
    }
    -->
    </style>
    </head>
    <script>
    function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
    }
    </script>
    <body>
    <iframe id="ifream_test" src="back-image.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" onload="resizeIframe(this);"></iframe>
    <iframe id="ifream_test2" src="back-image2.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" onload="resizeIframe(this);"></iframe>
    </body>
    </html>


    ただこの方法は iframe の URL がドメインを超えている場合(他サイトを参照している場合)、ブラウザによってはセキュリティエラーが発生してしまいます。
    その際、解決策は下記のサイトを確認してみてください。

    http://i556tips.tumblr.com/post/15710917018/iframe-javascript

    キャンセル

0

もうしわけありませn間違った操作によって回答が投稿されてしまいました。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

共通部分はPHPの方が良いと思いますが、以前PHP不可の状況がありjqueryで対処したことがあります。
back-image.htmlとback-image2.htmをjqueryでスクレイピングして配置。
cssで整形した方がデザインしやすいと思います。

画像は img{width:100%; height:auto;}でいけると思います。

back-image.htmlとback-image2.htmの表示したい部分が
<div id="img">で囲ってあるとすると以下でいけると思います。



<html>
 <head>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 </head>
 <body>
  <div id="back-image"></div>
  <div id="back-image2"></div>

  <script type="text/javascript">
   $(document).ready(function(){
   $("#back-image").load("back-image.html #img");
   $("#back-image2").load("back-image2.html #img");
   });
  </script>
 </body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • HTML

    11487questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7542questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5124questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2626questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。