現在ウェブ制作を行っています。
デザインとして以下のようなものをレスポンシブにコーディングしたいです。
(blue-backブロック要素の中で常に中央にありつつ、下部に位置するような)
html
1<div class="blue-back"> 2 <div class="white-back"> 3 ... 4 </div> 5</div> 6<div class="gray-back"> 7 ... 8</div> 9...
色々試行錯誤してみたのですが、なかなかうまく実現できません。
こういった場合は、どういった方法で実現するのでしょうか?
JavaScriptを用いて幅を取得しつつ、マージンを計算し適用する、といった操作が必要になってくるのでしょうか?
ご教示いただければ嬉しいです。よろしくお願いします。
追記
質問ご覧いただきありがとうございます。
あいまいな説明で申し訳ありません。
@sk_3122さんの情報の追記依頼に回答します。
■これは、灰色の部分は常に画面下部にある状態でしょうか?(ブラウザサイズを縮めても常に位置固定?メニューバー的な)また、灰色部分の高さは固定なのかとか、内容値によってサイズが変わる感じなのか等の情報も必要でしょうか。
灰色の部分はは特にフッター(常に画面下部にある)である、という意味ではありません。
blue-backの部分はページのトップに位置しヘッダーも含まれる部分ですので、ロゴやナビゲーションバーなどを配置する予定です。ヘッダーに関しては実装済みですので、特に問題ありません。
また、blue-backの高さは height: 100vh
で高さを持たせることを検討しています。
■ブラウザサイズを縮めた場合はどうなるのでしょうか。
white-backの要素の上にちょっとした文字が載る補助的なデザインを想定しています(文字の可読性を上げるためのデザイン)。ですので、モバイル・タブレットなどの幅の狭い端末ではwhite-back要素は背景色を適用せず(ないものとして)、幅が広いPC端末のみ、このデザインを適用したいと考えています。
よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー