質問: よろしくお願いいたします。 現在、レスポンシブ対応のweb画面を製作中です。 レイアウトについて、有職者の皆様からお知恵やアドバイス、実現方法をご教示いただきたく存じます。 **下記画像が、実現したいレイアウト**(デザイン原案)です。 主に、カラーの楕円でマークしている部分を実現させるコーディングがうまくできません。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/80e4ffee44848df4a73f7997352f6752.jpeg) 私が作ったものは以下です。 デザイン原案通りのレイアウト表示にするために試行錯誤していますが、現在のところうまくできていません。 また、**可能であればレスポンシブでスマホ画面にした際は、アイコン部分(赤楕円内)が、5つのpanelの一番下に並ぶようにもしたい**です...。 (試作段階なので原案と背景色やフォントが違う事をご了承ください。 また、navbarをfixにしているので、全画面をキャプチャする際にtop(背景がブルーの部分)がデザイン原案より短く見えています。) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/8917970b32a19f6583ba5839e21885df.png) 黄色で囲ったテキスト部分、赤い楕円で囲ったアイコンの部分ですが、表示には全てpanelを使用しています。 フリーハンドのグレーで線を引いている部分が、panelの大体の領域です。 **デザイン原案にレイアウトを近づける為、アイコン部分(赤楕円内)は position:relative; bottom:100px; の処理をCSSでして、TOP部分にかかるようにしています。** ソースは以下です。 ■html(Contents部分のみ記載) ``` HOGEHOGEHOGE 特徴1の説明文特徴1の説明文 特徴1の説明文特徴1の説明文 特徴1の説明文特徴1の説明文 特徴1の説明文特徴1の説明文 特徴1の説明文特徴1の説明文 HOGEHOGE hogehogehogehogehogehoge マルチデバイス対応 hogehogehogeho hogehogehogehoge hogehogehogehogehoge hogehogehogehogehogehoge HOGEHOGEHOGE 特徴1の説明文特徴1の説明文 特徴1の説明文特徴1の説明文 特徴1の説明文特徴1の説明文 特徴1の説明文特徴1の説明文 特徴1の説明文特徴1の説明文 ``` ■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を使用して作ってみましたが、何か良い方法がないか、皆様のお知恵をお貸しください。** どうぞよろしくお願いいたします。 **サンプルコード等**、具体的なご教示を頂ければ尚幸いです。 どうぞよろしくお願いいたします。
回答: Bootstrapのグリッド・コンポーネントを使わず、 ここだけ完全にオリジナルで構築する場合のサンプルを作ってみようと思いますが、 そのためには図に矢印で示した箇所のサイズ【A】〜【E】(デザインカンプ上で計測したpx数値)が必要です。 なので、まずコメント欄で【A】〜【E】の数値をご連絡ください。 あと、スマホの時にコンテンツを並べる順番は、1〜5の順で良いでしょうか? 違うならスマホ時にどの順番で並べたいのかもご連絡ください。 オリジナルで組む場合、上記の情報を元に、マークアップ構造とレスポンシブの設定をすることになります。 ご連絡いただけましたら時間をみて追記してみようと思います。 !イメージ説明 ### 追記1 どうも図が表示されないので一応言葉で欲しい情報を記載しておきます。 【知りたい数値】 ・【A】コンテンツ全体の最大幅(※これ以上は広がらない最大の横幅) ・【B】スマホキャプチャ画像の横幅 ・【C】キャプチャ横に配置されたテキストブロックの横幅 ・【D】テキストブロックとコンテナ両端の間の余白(※両端にピッタリくっつけるなら無し) ・【E】テキストブロックとキャプチャ画像の間の余白 【SP時の並び順】 テキストブロック(左上)→テキストブロック(左下)→テキストブロック(右上)→テキストブロック(右下)→キャプチャ の順番でいいか? ### 追記2(実装例) 実装サンプル 上記に実装サンプルを置いてみました。 細かく余白の数値等を聞いたくせに、実はそのあたり厳密には再現していません(苦笑) せっかくBootstrapを使っているのだから、ある程度Bootstrapのお作法にのっとって基本の レスポンシブレイアウトグリッドは組んでおいて、できなさそうなところだけオリジナルで追加実装するパターンになってます。 **★fixedのナビ分だけTopが短くなってしまう件** →fixedナビの高さ分だけ、bodyに余白を入れてやれば良いと思います。 **★キャプチャ画像をTOP側に飛び出させる** →position:absoluteで配置して、topに負の値を入れています。bottomから調節するよりやりやすいと思います。 **★SP時に13245の順に並べる** →最初から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(レスポンシブ)表示 としてそれぞれで確認してくださいー。