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

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

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

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

Webサイト

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

CSS

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

Q&A

解決済

3回答

40264閲覧

ブロック要素を中央下揃えに配置したい

peanuts

総合スコア34

HTML5

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

Webサイト

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

CSS

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

0グッド

1クリップ

投稿2016/03/14 20:51

編集2016/03/15 03:25

現在ウェブ制作を行っています。

デザインとして以下のようなものをレスポンシブにコーディングしたいです。
(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...

example

色々試行錯誤してみたのですが、なかなかうまく実現できません。
こういった場合は、どういった方法で実現するのでしょうか?

JavaScriptを用いて幅を取得しつつ、マージンを計算し適用する、といった操作が必要になってくるのでしょうか?

ご教示いただければ嬉しいです。よろしくお願いします。

追記

質問ご覧いただきありがとうございます。
あいまいな説明で申し訳ありません。
@sk_3122さんの情報の追記依頼に回答します。

■これは、灰色の部分は常に画面下部にある状態でしょうか?(ブラウザサイズを縮めても常に位置固定?メニューバー的な)また、灰色部分の高さは固定なのかとか、内容値によってサイズが変わる感じなのか等の情報も必要でしょうか。

灰色の部分はは特にフッター(常に画面下部にある)である、という意味ではありません。
blue-backの部分はページのトップに位置しヘッダーも含まれる部分ですので、ロゴやナビゲーションバーなどを配置する予定です。ヘッダーに関しては実装済みですので、特に問題ありません。

また、blue-backの高さは height: 100vhで高さを持たせることを検討しています。

■ブラウザサイズを縮めた場合はどうなるのでしょうか。

white-backの要素の上にちょっとした文字が載る補助的なデザインを想定しています(文字の可読性を上げるためのデザイン)。ですので、モバイル・タブレットなどの幅の狭い端末ではwhite-back要素は背景色を適用せず(ないものとして)、幅が広いPC端末のみ、このデザインを適用したいと考えています。

よろしくお願いします。

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

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

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

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

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

sk_3122

2016/03/15 01:32

■これは、灰色の部分は常に画面下部にある状態でしょうか?(ブラウザサイズを縮めても常に位置固定?メニューバー的な) ■ブラウザサイズを縮めた場合はどうなるのでしょうか。白い部分だけでスクロールバーが出る状態ですか?それとも青い部分にスクロールバーが出て、青白ともに見切れる感じでしょうか。
sk_3122

2016/03/15 01:35

■あと灰色部分の高さは固定なのかとか、内容値によってサイズが変わる感じなのか等の情報も必要でしょうか。
guest

回答3

0

ベストアンサー

方法を2つ提示しますね!
まず基本となるcssがこれです

css

1 2.blue-back { 3 position:relative; 4 background-color : blue; 5 width:100%; 6 height: 100vh 7} 8.white-back { 9 background-color : white; 10}

でwidthとheightが固定幅の場合

css

1.white-back{ 2 position:absolute; 3 width:600px; 4 height:300px; 5 bottom:0; 6 left:0; 7 right:0; 8 margin:auto; 9} 10

でwidthとheightが可変幅の場合

css

1.white-back{ 2 position:absolute; 3 bottom:0; 4 left:50%; 5 transform:translateX(-50%); 6}

でいかがでしょうか!

投稿2016/03/15 04:24

MasakazuFukami

総合スコア1869

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

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

peanuts

2016/03/15 04:59

ご回答ありがとうございます!イメージしていたデザイン通りのコーディングができました。 可変長、固定長の2通りのご教示、ありがとうございました! 今回は固定長で実装しましたが、とくに、固定長の場合「position: absolute」で、左右と下を0にして「margin: auto」とすることで、中央下揃えになる、という新たな知見が得られました。可変長に関しても今後のデザインの幅が広がりました!的確なご回答、ありがとうございました!
MasakazuFukami

2016/03/15 05:06

そう言っていただけて光栄です!頑張ってください!
guest

0

(ちょっとまだよくわかってないですが・・・)

■灰色はフッタではないのですか。灰色は何でしょうか。
青部分が height:100vh なんですよね?
灰色は青の子ではないのですよね。灰色あふれちゃいませんか?(いいの?)

■今回の質問のポイントは何でしょうか?
「白部分を青部分の下端につけたい」ということでしょうか。

単純にそれだけであれば、
青を position:relative; にして
その子である白は position:absolute; bottom:0; とかで
下端に付けちゃえば良いかなと思いますが・・・

.blue-back { background:#2871a2; height:70vh; } /* 100vhだと灰色が溢れるのでとりあえず70 */ .white-back { background:#ffffff; padding:10px; } .gray-back { background:#d4d3d4; } ... .blue-back { position:relative; } .white-back { position:absolute; left:5%; right:5%; bottom:0; }

みたいな・・・?
全然違ったらごめんなさい。

投稿2016/03/15 04:22

sk_3122

総合スコア1126

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

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

peanuts

2016/03/15 05:03

追記依頼とご回答ありがとうございました! イメージをうまく伝えられず、申し訳ありませんでした。 ご教示頂いた方法、たいへん参考になりました。
guest

0

余白を%指定すれば行けると思います。

CSS

1.blue-back { 2 background-color : blue; 3 width:100%; 4} 5.white-back { 6 background-color : white; 7 margin-left : 10%; 8 margin-right : 10%; 9}

投稿2016/03/15 00:29

lilithchan

総合スコア249

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

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

peanuts

2016/03/15 05:04

説明が拙く、イメージが伝えられずすみませんでした。 ご回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問