Webページの見本をみる
このようなページを作ってみます。
HTMLを記述する
HTMLを記述していきます。
まずはHTML文の構成を確認しながらおおよそのグループ分けをしていきましょう。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Travel Park</title>
</head>
<body>
<header>
ヘッダー
</header>
<div class="contents">
<div class="first-view">
<!-- 『トップ画像』を表示する -->
</div>
<div class="upper-content">
<!-- 『旅のプラン』を表示する -->
</div>
<div class="middle-content">
<!-- 『ギャラリー紹介』を表示する -->
</div>
<div class="bottom-content">
<!-- 『フォーム』を表示する -->
</div>
</div>
<footer>
フッター
</footer>
</body>
</html>
次に要素の中を <header> , contentsクラス , <footer> に分け、
さらにcontentsを４つに分けていきます。
リセットCSS
ブラウザにはデフォルトで余白など設定されています。
そういった設定をあらかじめ打ち消すのにリセットCSSというものを記述します。
/* リセットCSS */
body {
font-size: 14px;
color: #333;
margin: 0 auto;
}
h1,h2,h3,h4,h5,h6,p {
padding: 10px 0;
margin: 0;
}
ul,li {
padding: 0;
margin: 0;
}
次にそれぞれの要素に色をつけ、可視的にみやすくします。
header {
height: 50px;
background-color: #f0f0f0;
}
.contents {
background-color: white;
}
.first-view{
background-color: pink;
}
.upper-content{
height: 450px;
background-color: aqua;
margin: 0 160px;
}
.middle-content{
height: 450px;
background-color: aquamarine;
margin: 0 160px;
}
.bottom-content {
height: 800px;
background-color: lightgreen;
margin: 0 160px;
}
footer {
height: 50px;
background-color: #f0f0f0;
}
ブラウザを確認しましょう。
「upper-content」,「middle-content」,「bottom-content」に「marginオプション」を設定しています。
これでおおまかなページの形が見えてきたと思います。
この背景色を消し、content要素のなかに情報を記述していきます。
ヘッダーの実装
ヘッダーをrightとleftで分けていきます。
div要素はブロック要素なので「display: flex;」で横並びにします。
<header>
<div class="header-right">
</div>
<div class="header-left">
</div>
</header>
header {
height: 50px;
background-color: #f0f0f0;
padding: 10px 0;
display: flex;
}
これでヘッダーを右側と左側で分けることができました。
それぞれの要素に文字を入力していきます。
<header>
<div class="header-left">
<h1 class="title">Travel Park</h1>
</div>
<div class="header-right">
<ul class="header-list">
<li>メニュー</li>
<li>ギャラリー</li>
<li>お問い合わせ</li>
</ul>
</div>
</header>
右側のリストは<li>要素で作ります。
また、<li>要素を横並びにするために<ul>要素に「display: flex;」を指定します。
header {
height: 50px;
background-color: #f0f0f0;
padding: 10px 0;
display: flex;
}
.header-left{
width: 50%;
margin-left: 30px;
}
.header-right {
width: 50%;
padding: 20px;
}
.header-list {
display: flex;
justify-content: space-around;
}
ブラウザを確認してみましょう。
フッター
続いてフッターを書いていきます。
HTMLにテキスト記述し、CSSのプロパティも指定します。
<footer>
<p>Copyright(C) Travel Park ALL RIGHTS RESERVED.</p>
</footer>
footer {
height: 50px;
background-color: #f0f0f0;
text-align: center;
color: gray;
}
「text-alignプロパティ」で文字を真ん中に持ってきます。文字の色もグレーにします。
これでヘッダーとフッターができました。
ブラウザで確認しましょう。
