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

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

ただいまの
回答率

90.51%

  • Bootstrap

    962questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

bootstrapで画面をつくる

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 488

tsuru0508

score 32

前提・実現したいこと

いつもお世話になっております。

bootstrapを利用して、添付資料のような画面を作成したい。
各枠は、iframeを使ってコンテンツを表示させるつもりです。
offsetを使ってずらすことは出来ましたが、やりたいこととは違い、
また、画面を小さくすると、offsetしている分、画面がずれて
表示されてしまいます。

bootstrapでは、こういう画面構成は出来ないのでしょうか?
ご教授よろしくお願いします。

イメージ説明

該当のソースコード

<div class="container-flud">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <div class="embed-responsive embed-responsive-4by3" height="300" style="width:100% !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important;">
                <iframe src="a.php" id="a" class="embed-responsive-item" frameborder="0" style="margin:20px 0px;"></iframe>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <div class="embed-responsive embed-responsive-4by3" height="150" style="width:100% !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important;">
                <iframe src="b.php" id="b" class="embed-responsive-item" frameborder="0" style="margin:20px 0px;"></iframe>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-xs-offset-6">
            <div class="embed-responsive embed-responsive-4by3" height="150" style="width:100% !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important;">
                <iframe src="c.php" id="c" class="embed-responsive-item" frameborder="0" style="margin:20px 0px;"></iframe>
            </div>
        </div>        
        <div class="col-xs-12 col-sm-6">
            <div class="embed-responsive embed-responsive-4by3" height="150" style="width:100% !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important;">
                <iframe src="d.php" id="d" class="embed-responsive-item" frameborder="0" style="margin:20px 0px;"></iframe>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <div class="embed-responsive embed-responsive-4by3" height="150" style="width:100% !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important;">
                <iframe src="e.php" id="e" class="embed-responsive-item" frameborder="0" style="margin:20px 0px;"></iframe>
            </div>
        </div>        
    </div> <!-- row --> 
</div> <!-- container -->
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

このようなコードで実現できないでしょうか。少し実験のために変えましたが、構造は同じだと思います。
キモは②と③を同一階層内に置くところです。

<div class="container-flud">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <div class="embed-responsive embed-responsive-4by3" style="height:300px; width:100%; background-color: #F56B6B;">
                    1
                </div>
            </div>
            <div class="col-xs-12 col-sm-6">
                <div class="embed-responsive embed-responsive-4by3" style="height:150px; width:100%; background-color: #6B75F5;">
                2
                </div>
                <div class="embed-responsive embed-responsive-4by3" style="height:150px; width:100%; background-color: #B96BF5;">
                  3  
                </div>
            </div>   
            <div class="col-xs-12 col-sm-6">
                <div class="embed-responsive embed-responsive-4by3" style="height:150px; width:100%; background-color: #FFEB41;">
                4
                </div>
            </div>
            <div class="col-xs-12 col-sm-6">
                <div class="embed-responsive embed-responsive-4by3" style="height:150px; width:100%; background-color: #B3FF59;">
                5
                </div>
            </div>     
        </div> <!-- row --> 
    </div> <!-- container -->

2017/04/11追記
この方法が推奨されている方法なのかわかりませんが、このコードでお望みの通りに動きました

<div class="container-flud">
        <div class="row">
            <div class="col-xs-12 col-sm-6" style="height:300px; padding-right:0;">
                <div class="embed-responsive embed-responsive-4by3" style="padding-bottom:300px; width:100%; background-color: #F56B6B;">
                  1
                </div>
            </div>
            <div class="col-xs-12 col-sm-6" style="height:300px; padding:0;">
                <div  class="embed-responsive embed-responsive-4by3" style="padding-bottom:150px; width:100%; background-color: #6B75F5;">
                2
                </div>
                <div class="embed-responsive embed-responsive-4by3" style="padding-bottom:150px; height:150px; width:100%; background-color: #B96BF5;">
                  3
                </div>
            </div>
            <div class="col-xs-12 col-sm-6" style="height:150px; padding-right:0;">
                <div class="embed-responsive embed-responsive-4by3" style="padding-bottom:150px; height:150px; width:100%; background-color: #FFEB41;">
                4
                </div>
            </div>
            <div class="col-xs-12 col-sm-6" style="height:150px; padding:0;">
                <div class="embed-responsive embed-responsive-4by3" style="padding-bottom:150px; height:150px; width:100%; background-color: #B3FF59;">
                5
                </div>
            </div>
        </div> <!-- row -->
    </div> <!-- container -->

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/10 18:30

    1歩進みました。ありがとうございます。

    スマホモードになった時の(右の図)のようにはなりましたが、
    左の図で、
     ①のマスの高さは、②と③との合計の高さにはならず、
     ①の高さと②の高さが同じです。

    heightの設定を試してみます・・・できますよね???

    キャンセル

  • 2017/04/11 09:55

    embed-responsive-4by3クラスのpadding-bottomが悪さをしているようです。このクラスを使ったことが無いので、調べてみますが、ご自身でも調べてみてください。

    キャンセル

  • 2017/04/11 12:42

    ありがとうございます!

    夜、確認します。
    先ずは、お礼を。ありがとうございます

    キャンセル

  • 2017/04/12 06:40

    07JP27様

    何から何までありがとうございます。
    無事、思う通りに動作しました。

    今後とも宜しくおねがいします。ありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    JavaScript サムネイル 動画 切り替え

    質問を見ていただいてありがとうございsます。 前提・実現したいこと 前提 サムネイルを一覧で表示するHTMLを作成いたしました。 (下記コード参照お願いします。)

  • 解決済

    jquery モダールウインドウを閉じると同時にyoutubeを停止したい。

    素人ですがwordpressでホームページを作成しております。 動画ギャラリーとして、動画のキャプチャ画像をクリックすると モダールウインドウが開きその中に 「ifram

  • 解決済

    html cssで作ったページのマージン設定について

    <!DOCTYPE html> <head><link rel="stylesheet" href=".css" type="text/css" /></head> <body

  • 解決済

    iosのchromeでビヨーンというスクロールをさせない方法

    表題の通りなのですが、 iOsのChromeでビヨーンと画面をはみ出してスクロールするのを防ぎたいです。 例えば、 <body ontouchmove="event.

  • 解決済

    フレームで画面を9分割

    前提・実現したいこと HTMLで3x3の9分割画面を作っています 発生している問題 上手くフレームで9分割に出来ない 該当のソースコード <html> <fra

  • 解決済

    GoogleMapでメニューを消す方法

    VB.NETのWebBrowserコントロールを使って、GoogleMapの地図を表示させたいと思っています。 以下のURLですと画面左側にメニューが表示されてしまいます。

  • 解決済

    iframeがよこにずれる。

    サイトのコンタクトフォームをiframeを使い、トップページに表示させたいのですが、 スワイプすると、どうしても横にずれてしまいます。。。。 横幅ぴったりはめたいのですが、

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

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

  • Bootstrap

    962questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。