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

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

新規登録して質問してみよう
ただいま回答率
85.51%
HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

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

CSS

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

Q&A

解決済

3回答

2751閲覧

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

nekomura

総合スコア132

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

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

CSS

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

1グッド

4クリップ

投稿2016/10/04 04:37

編集2016/10/04 06:55

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

現在、レスポンシブ対応の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を使用して作ってみましたが、何か良い方法がないか、皆様のお知恵をお貸しください。
どうぞよろしくお願いいたします。

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

ikuwow👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aKusano

2016/10/04 04:58

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

2016/10/04 05:04

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

2016/10/04 05:09

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

2016/10/04 05:38

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

回答3

0

ベストアンサー

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 07:12

編集2016/10/04 10:23
aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aKusano

2016/10/04 07:14

あれ、図が掲載できない・・・大きすぎるのかな。
aKusano

2016/10/04 07:26

文言で追記したら画像出てきたし・・・(;´Д`)
nekomura

2016/10/04 07:46

akusano様 ありがとうございます。大変丁寧にお答えくださり恐縮です。 追記まで頂きありがたいです。画像も確認できました! ・【A】1157px ・【B】768px未満 ・【C】291px ・【D】108.5px ・【E】67px >あと、スマホの時にコンテンツを並べる順番は、①〜⑤の順で良いでしょうか? ①③②④でお願いいたします。お手数おかけいたします。 もし、無理であれば①〜⑤の順でお願いします。 どうぞよろしくお願いいたします。
aKusano

2016/10/04 07:52

>nekomura様 B〜Eを足すとAの幅を大幅に超えてしまうのですがどういうことでしょう。 B+C+C+E+E = A でないと組めませんよ。 あと、pxに小数点入れても意味ないので整数に丸めてくださいね。
nekomura

2016/10/04 08:39

akusano様 すみません、自分の作った画面をgoogleの検証ツールで見ながらpxを出していたのですが、うまく数字をお伝えできず申し訳ありません。 初めに送った【B】768px未満 などは、SPの一般的な画面幅をそのまま入力してしまっておりました…。 一応、下記のように設定はしてみたのですが…。 ・【A】1200px ・【B】292px ・【C】358px ・【D】30px ・【E】66px googleの検証ツールでpxを確認すると、表示した画面サイズに応じてpxが変わってしまうため、 最大幅を1200pxとして、確認しました。 akusano様の意図を汲めず申し訳ありません。 どうぞよろしくお願いいたします。
aKusano

2016/10/04 08:49

了解です。こちらの数値で試してみますねー
gin

2016/10/04 09:07

>nekomuraさん 試してみたいけど時間が…で少し気になったのは、スマホ版の並びってこの図でいうところの12345の順ですか?? 質問では13245っぽく見えたので…あと24の頭のラインが合ってる感じですかね? 組む前に分かってた方がいいと思いまして…
aKusano

2016/10/04 09:17

>ginさん できれば13245の順がいいみたいですよ。 >nekomuraさん 2と4の頭のラインは揃えたい…ですか? あーあと一応、動作保証のサポート環境もいりますね…。 使える技術が限定されてくるので。
nekomura

2016/10/04 09:19

gin様 いつもお世話になっております。 >質問では13245っぽく見えたので はい、スマホの並びで実現したいのは①③②④⑤です。 ご指摘ありがとうございます。 >あと24の頭のラインが合ってる感じですかね? 左様でございます。 まだ、表題の件が解決できていないので、gin様も何かお気づきの事やアドバイスがございましたら、どうぞよろしくお願いいたします。
nekomura

2016/10/04 09:27

>2と4の頭のラインは揃えたい…ですか? 現段階のデザイン案では、ラインが揃っている印象の為そのようにお答えしました。 確かに、テキストの文字数によってラインは変わりそうですよね。 ただ、このデザイン案を出してきたデザイナーは、かなり几帳面なレイアウトを好むので、文字数を制限してでも2,4のラインを揃える様にしてくるのかな…と思いましたので。 あまりCSSとBootstrapに慣れていない上に、すぐに上司やデザイナーに確認できない状況の為、何かとうまくお伝えできず申し訳ありません。 どうぞよろしくお願いいたします。
aKusano

2016/10/04 10:35

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

2016/10/05 04:47

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

2016/10/05 06:03

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

0

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

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

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

投稿2016/10/04 10:14

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nekomura

2016/10/05 01:51

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

0

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

投稿2016/10/04 07:19

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nekomura

2016/10/05 01:51

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問