2016年10月15日土曜日

(css) ページ全体のレイアウト



実行してみる

ホームページ全体のレイアウトです



画像のようなレイアウトは、以下のようなCSSでなりたっています。
黄色の部分でヘッダーやフッターの設定で重要ですが、
div.left,div.content等の全体的な構造も大切だと思いますね！















<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
margin: 0px;
border: 1px solid gray;
line-height: 150%;
}
div.header, div.footer {
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
}
h1.header {
padding: 0;
margin: 0;
}
div.left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
div.content {
margin-left: 190px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">おいしいもの</h1></div>
<div class="left"><p>
ここにメニューを書くこと
</p></div>
<div class="content">
<h2>よろしくね</h2>
<p>ここは、本文内容</p>
<p>ここは、本文内容２</p>
</div>
<div class="footer">Copyright</div>
</div>
</body>
</html>
at

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)