ヘッダーとフッターについて

ヘッダー(背景:灰色)

影影影影影影影影影影影影

本文(背景)

フッター(背景:灰色)

このようなページを作りたいのですがdivを使えばいいのでしょうか？また、ヘッダーフッターどちらも上下幅の10%の指定をしたいのですがどうすればできますか？

試したことというより今現在はヘッダーのみを画像を置くだけで実装しています。実際ヘッダーのデザインを変える予定はないのでヘッダーについては画像に影を加えるCSS程度でいいかなとも思っています。

質問だらけで乱文ですが質問等ありましたら全て答えさせていただきます。
よろしくお願いします。

m.ts10806

2018/07/23 00:18

まずはご自身で調べてみて、その結果色々試してみては？ https://teratail.com/help/question-tips#questionTips1-2 >投稿前に自分で一度調べてみましょう。そして調べたことを元に、一度は自分でやってみましょう。

m.ts10806

2018/07/23 00:19

「どうすればできますか？」「画像に影を加えるCSS程度でいいかな」　　という流れだと「コードください」＝丸投げ　です。

dit.

2018/07/23 03:59

せめて現状のコードを提示しませんか？

yaschi

2018/07/23 08:50

画像に影を作る方法等は知っていますがどちらの方を利用すればいいのかというのを聞いているだけです

m.ts10806

2018/07/23 09:14

答えないならこんなこと書かなければいいのに。＞質問等ありましたら全て答えさせていただきます。

m.ts10806

2018/07/23 09:14

いずれにしてもteratailでの質問の仕方としては良くないですね。

行動規範の内容に同意します

回答2件

ベストアンサー

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			html,body {
8				margin: 0;
9				padding: 0;
10				width: 100%;
11				height: 100%;
12			}
13			body {
14				display: flex;
15				flex-direction: column;
16			}
17			.flex-item {
18				flex-grow: 1;
19			}
20			header.flex-item,
21			footer.flex-item {
22				max-height: 10%;
23				background-color: rgba(0,0,0,0.9);
24				color: white;
25			}
26			header.flex-item {
27				box-shadow: 0 5px 5px rgba(0,0,0,0.5);
28			}
29		</style>
30	</head>
31	<body>
32		<header class="flex-item">
33			Header
34		</header>
35		<main class="flex-item">
36			Main
37		</main>
38		<footer class="flex-item">
39			Footer
40		</footer>
41	</body>
42</html>

投稿2018/07/23 03:49

退会済みユーザー

総合スコア0

スクロールしない前提なのでしょうか？
headerタグfooterタグを設定しheightに10%をしてしてみてください

投稿2018/07/23 00:33

yambejp

総合スコア114814

yaschi

2018/07/23 03:36

言葉足らずですみません。ページの最上部と最下部に表示させます。

yambejp

2018/07/23 03:40

> ページの最上部と最下部に表示むしろ意味がわからなくなりました。スクロールしたら最上部のヘッダはきえていい？また隠れていた最下部のヘッダはみえるようになる？そうなると10％とはなんの10%なのでしょうか？スクロールさせずに10%ヘッダ、80%本体、10％フッタということではないなら、どうしたいか具体的なHTMLと細かい挙動の説明が必要でしょう

行動規範の内容に同意します

あなたの回答