html練習
↑参考サイト
未経験・初心者向け「HTML・CSSのレイアウト鬼練１〜４」 | ウェブカツ公式BLOG
※使用したPCでhtmlエディタが使用できなかったので、参考サイトを写して勉強したいと思います。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
今でも現場での使用率の高い「float」を使用したレイアウト情報で練習します。
問題
１．ヘッダーとフッターを高さ80px
2.メインコンテンツを高さ500px
3.それぞれのボックスの中に「ヘッダー」「メインコンテンツ」「フッター」を文字を白で表示
４．ヘッダーの背景は赤
５．メインコンテンツの背景は青
６．フッター背景は黒
７．それぞれのボックスの幅は画面一杯
ーーー－ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
■■■■■■■■■■■■■■■■■■■■←ヘッダー
■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■←メインコンテンツ
■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■←フッター
※画像編集ｿﾌﾄが使用できなかったので、記号でブラウザの正解を再現しています。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
html
<!DOCKTYPE html>
<html lang="ja">
<head>
<meta chrset="UTF=8">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
ヘッダー
</header>
<main class="main">
メイン
</main>
<footer class="footer">
フッター
</footer>
</body>
</html>
※「ヘッダー」「メイン」「フッター」の三個のタグを使用
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
body{
margin: 0;
}
.header{
background: red;
height: 80px;
text-align: center;
color: #fff;
}
.main{
background: blue;
height: 500px;
text-align: center;
color: #fff;
}
.footer{
background: black;
height: 80px;
text-align: center;
color: #fff;
}
・表示するブラウザによって異なりますが「グーグルchrome」だと、「marｇin」が「body」タグに自動的に付いてしまい、横幅一杯になりません、なので「margin」を「０」にリセット、余計なスタイルを付けない状態に戻す。
・実際の現場だと「リセットCSS」という物を使用しています（ブラウザによって自動的に付いてしまう）
・実際の現場では「red」など簡略したコードで指定せず、RGBカラー（#112233)で指定する事になりま
