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

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

ただいまの
回答率

89.12%

レスポンシブ対応web画面 レイアウト 画像をTOP画面とコンテンツ部分にかかるように表記したい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 4
  • VIEW 1,915

nekomura

score 132

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

現在、レスポンシブ対応のweb画面を製作中です。
レイアウトについて、有職者の皆様からお知恵やアドバイス、実現方法をご教示いただきたく存じます。

下記画像が、実現したいレイアウト(デザイン原案)です。
主に、カラーの楕円でマークしている部分を実現させるコーディングがうまくできません。
イメージ説明

私が作ったものは以下です。
デザイン原案通りのレイアウト表示にするために試行錯誤していますが、現在のところうまくできていません。
また、可能であればレスポンシブでスマホ画面にした際は、アイコン部分(赤楕円内)が、5つのpanelの一番下に並ぶようにもしたいです…。
(試作段階なので原案と背景色やフォントが違う事をご了承ください。
また、navbarをfixにしているので、全画面をキャプチャする際にtop(背景がブルーの部分)がデザイン原案より短く見えています。)
イメージ説明
黄色で囲ったテキスト部分、赤い楕円で囲ったアイコンの部分ですが、表示には全てpanelを使用しています。
フリーハンドのグレーで線を引いている部分が、panelの大体の領域です。
デザイン原案にレイアウトを近づける為、アイコン部分(赤楕円内)は
position:relative;
bottom:100px;
の処理をCSSでして、TOP部分にかかるようにしています。

ソースは以下です。
■html(Contents部分のみ記載)

<div id="content">
    <div class="container">
        <div class="row">

            <div  class="col-md-4 col-sm-4 item-1">
                <div class="panel panel-deafult">
         <!--(黄楕円部分)--><div class="panel-header">HOGEHOGEHOGE</div>
                    <div class="panel-body">

                        <div>
                           <p>特徴1の説明文特徴1の説明文 </p>
                           <p>特徴1の説明文特徴1の説明文 </p>
                           <p>特徴1の説明文特徴1の説明文 </p>
                           <p>特徴1の説明文特徴1の説明文 </p>
                           <p>特徴1の説明文特徴1の説明文 </p>
                        </div>
                    </div>
                </div>
            </div>
            <div  class="col-md-4 col-sm-4 item-2 hidden-xs">
                <div class="img-box">   
<!--アイコン(赤楕円部分)--><img src="images/7a660987-b8d8-478e-bf14-f199dd9e9c70.png" class="box-img img-responsive center-block" alt="">
                </div>
            </div>
            <div  class="col-md-4 col-sm-4 item-3">
         <!--(黄楕円部分)--><div class="panel panel-deafult">
                    <div class="panel-header">HOGEHOGE</div>
                    <div class="panel-body">
                        <div>
                           <p>hogehogehogehogehogehoge </p>
                        </div>
                    </div>
                </div>
            </div>
                <div  class="col-md-6 col-sm-6 item-4">
                <div class="panel panel-deafult">
                    <div class="panel-header">マルチデバイス対応</div>
                    <div class="panel-body">

                        <div>
                           <p>hogehogehogeho</p>
                           <p>hogehogehogehoge </p>
                           <p>hogehogehogehogehoge </p>
                           <p>hogehogehogehogehogehoge</p>
                        </div>
                    </div>
                </div>
            </div>
                <div  class="col-md-6 col-sm-6 item-5">    
<!--(黄楕円部分)--> <div class="panel panel-deafult">
                    <div class="panel-header">HOGEHOGEHOGE</div>
                    <div class="panel-body">
                        <div>
                           <p>特徴1の説明文特徴1の説明文 </p>
                           <p>特徴1の説明文特徴1の説明文 </p>
                           <p>特徴1の説明文特徴1の説明文 </p>
                           <p>特徴1の説明文特徴1の説明文 </p>
                           <p>特徴1の説明文特徴1の説明文 </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- end content -->

■CSS(Contents部分のみ記載)

.panel-header{
    text-align: center;
    padding-top: 10px;
    height: 40px;
}

.panel-body{
     text-align: center;
}
img.box-img{
    width:291.33px;
    height:auto;

    position:relative;
    bottom:100px;
}


私のやり方では、デザイン原案のように

・アイコン部分(赤楕円内)を原案のような位置に配置した上で
        
・アイコン部分(赤楕円内)を真ん中にして4つのテキストの固まり(黄色楕円内)をアイコンの長さにあわせて並行に配置したい

のですが、どのような方法を用いれば実現できるでしょうか。
分からないので、とりあえず前述のようにpanelを使用して作ってみましたが、何か良い方法がないか、皆様のお知恵をお貸しください。
どうぞよろしくお願いいたします。

サンプルコード等、具体的なご教示を頂ければ尚幸いです。
どうぞよろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • aKusano

    2016/10/04 13:58

    Bootstrapのグリッド・コンポーネントを使わず、この部分のパーツのみ全てオリジナルでCSSを書くという選択肢もアリですか?

    キャンセル

  • nekomura

    2016/10/04 14:04

    akusano様
    特に実現方法に指定はありませんが、レスポンシブ対応や、UIのデザイン的な面からBootstrapを使用するようには上から言われています。
    ただ、オリジナルのCSSのみで上記条件が満たされるのであれば、問題ないかと思われます。
    どうぞよろしくお願いいたします。

    キャンセル

  • aKusano

    2016/10/04 14:09

    オリジナルCSSでよければやりようはいくらでもありますが、BootStrapの機能の組み合わせで可能ならその方が良さそうですね(上司さん的に)。
    残念ながらBootStrap使わない人なので、BootStrapコンポーネントでの解決法が出てこないかちょっと様子見てみます。(個人的に興味あり)

    キャンセル

  • nekomura

    2016/10/04 14:38

    akusano様
    オリジナルcssの方法も是非後学のために知りたいので、もしよろしければご教示いただけるとありがたいです。
    どうぞよろしくお願いいたします。

    キャンセル

回答 3

checkベストアンサー

+6

Bootstrapのグリッド・コンポーネントを使わず、
ここだけ完全にオリジナルで構築する場合のサンプルを作ってみようと思いますが、
そのためには図に矢印で示した箇所のサイズ【A】〜【E】(デザインカンプ上で計測したpx数値)が必要です。
なので、まずコメント欄で【A】〜【E】の数値をご連絡ください。

あと、スマホの時にコンテンツを並べる順番は、①〜⑤の順で良いでしょうか?
違うならスマホ時にどの順番で並べたいのかもご連絡ください。

オリジナルで組む場合、上記の情報を元に、マークアップ構造とレスポンシブの設定をすることになります。
ご連絡いただけましたら時間をみて追記してみようと思います。

イメージ説明

追記1

どうも図が表示されないので一応言葉で欲しい情報を記載しておきます。
【知りたい数値】
・【A】コンテンツ全体の最大幅(※これ以上は広がらない最大の横幅)
・【B】スマホキャプチャ画像の横幅
・【C】キャプチャ横に配置されたテキストブロックの横幅
・【D】テキストブロックとコンテナ両端の間の余白(※両端にピッタリくっつけるなら無し)
・【E】テキストブロックとキャプチャ画像の間の余白

【SP時の並び順】
テキストブロック(左上)→テキストブロック(左下)→テキストブロック(右上)→テキストブロック(右下)→キャプチャ
の順番でいいか?

追記2(実装例)

実装サンプル

上記に実装サンプルを置いてみました。
細かく余白の数値等を聞いたくせに、実はそのあたり厳密には再現していません(苦笑)
せっかくBootstrapを使っているのだから、ある程度Bootstrapのお作法にのっとって基本の
レスポンシブレイアウトグリッドは組んでおいて、できなさそうなところだけオリジナルで追加実装するパターンになってます。

★fixedのナビ分だけTopが短くなってしまう件
→fixedナビの高さ分だけ、bodyに余白を入れてやれば良いと思います。

★キャプチャ画像をTOP側に飛び出させる
→position:absoluteで配置して、topに負の値を入れています。bottomから調節するよりやりやすいと思います。

★SP時に①③②④⑤の順に並べる
→最初からSP時に並べたい順番でマークアップしておけばOK

★PC時のレイアウト
→全体のコンテナ幅と、左右のカラムはBootstrapのグリッドシステムを活用。(赤いエリア)
Bootstrapのカラム幅と異なる箇所は、中に入れてコンテンツ側で調整(グレーのエリア)
→キャプチャ画像はposition:absoluteで絶対配置。
最大1200px(※bootstrapコンテナを利用しているので実際のコンテンツ幅は1170px)に対して
画像幅292pxなので、292/1170で%の数値を割り出し、コンテナ幅によって相対的にサイズ変化するように設定。

★SP時のレイアウト
→Bootstrapはデスクトップファースト方式なので、オリジナルで設定したPC用のレイアウトは、
メディアクエリを使って手動でSP用に上書きする必要がある。画面幅を見ながら適宜調整。

細かいところはjsdoitのサイトに掲載しているコードをご確認ください。

【補足】

jsdoitは何か普通のブラウザのようにシームレスにPC〜SPの幅確認みたいなことができないっぽいので、
・「PLAY」ボタンを押して最初に出てきた画面→SP表示
・fullscreenボタンを押して出てきた画面→PC(レスポンシブ)表示
としてそれぞれで確認してくださいー。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/04 19:35

    実装サンプル追加しましたー

    キャンセル

  • 2016/10/05 13:47

    akusano様
    早速試させていただきました。
    期待通りの動作で、感激です。
    Bootstrapのグリッドシステムを活用しながら、その他の細かいアドバイスもいただけて本当に感謝です。
    サイトを調べ歩いても、このようなわかりやすいテクニックに出会う事は無く、前に進めていなかったので目からうろこで大変勉強にもなりました。
    細かい調整は、まだ私が未熟な為荒削りですが、ご教示を元にがんばります!
    実装サンプルまでご丁寧に、本当にありがとうございます。

    今後ともどうぞよろしくお願いいたします。

    キャンセル

  • 2016/10/05 15:03

    nekomura様

    こちらこそ、なかなか面白い課題で考えるの楽しかったです。
    Bootstrap食わず嫌い(?)で全然これまで使ってなかったので、逆にこちらも良い勉強になりました〜。

    キャンセル

+1

bootstrapなどのCSSフレームワークはこういった特殊(?)なデザインは苦手なところだと思います。
この部分を無理やりいろいろ駆使すればできなくはなさそうですが、構造がおかしくなったり煩雑になったりして元も子もなくなります。

すべてをbootstrapの機能でやるのではなく、こういった特殊な部分は独自で作成(ブレークポイントは合わせて)し、そのほかの普通に機能が使える部分をbootstrapでやる形が一般的かな~と思います。

…なんか日本語変ですね…

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/05 10:51

    gin様
    なるほど~。
    確かに、参考にbootstrapを使用しているレスポンシブ対応のwebサイトを見ても、
    レイアウト自体はシンプルなものが多い気がしました。
    >殊な部分は独自で作成(ブレークポイントは合わせて)し、
    難しそうですが、色々とトライしてみます!
    その際はまた、ご教示いただければ幸いです。

    キャンセル

0

ちょっと古いですが、画像を使わず、CSSでデザインされた iPhone です。
Imageless iPhone 4

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/05 10:51

    Kosuke様
    cssだけでこんな事までできるんですね!
    参考サイトありがとうございます。

    キャンセル

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

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • CSSに関する質問
  • レスポンシブ対応web画面 レイアウト 画像をTOP画面とコンテンツ部分にかかるように表記したい