Dummy Coast TOPページの作成


HTMLでの構造の作成、CSSでレイアウトを行っていきます。

# 初期設定

## 1. index.htmlに基本を記述する
index.htmlを開き、下記を記述します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Dummy Coast</title>
</head>
<body>

</body>
</html>
```

## 2. common.cssを読み込む
index.htmlのhead内ににlinkタグにてcommon.cssを読み込みます。

```html
<head>
    <meta charset="UTF-8">
    <title>Dummy Coast</title>
    <link rel="stylesheet" href="css/common.css">
</head>

```

## 3. common.cssに基準を記述する
cssフォルダ内のcommon.cssを開き、コメント/* base */以下に下記を記述します。

```css
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif; /* 1. 文字種類: 〜 */
	font-size: 16px;         /* 2. 文字サイズ: 16px */
	line-height: 1.6;        /* 3. 行間: 1.6 (1で改行された場合、行間がなくなる) */
}
```
1. 全体の文字の種類を設定
2. 全体の文字のサイズを指定
3. 全体の文字の行間を指定

# 全体の構成を決める

## 1. index.htmlに全体を囲うdivを作成

index.htmlのbody内に全体を囲う```<div class="wraper"></div>```を作成します。

![wrapper.png](https://qiita-image-store.s3.amazonaws.com/0/32375/3b5fbb06-756c-c5cd-d17a-73dc9fb3338b.png "wrapper.png")




```html
<body>
	<!-- 全体を囲むdiv -->
	<div class="wrapper">
	
	</div>
</body>

```

## 2. index.htmlに基本ブロックを作成 
```<div class="wrapper"></div>```の中に基本ブロックheader,contents.footerを作成します。header,footerはタグがあります。

![contents.png](https://qiita-image-store.s3.amazonaws.com/0/32375/31be0780-e510-679b-5300-b8d103ef40dd.png "contents.png")



```html
<body>
	<div class="wrapper">
		<header class="header">
		
		</header>
		<div class="contents">
		
		</div>
		<footer class="footer">
		
		</footer>
	</div>
</body>

```

# headerの作成

![header.png](https://qiita-image-store.s3.amazonaws.com/0/32375/dce95788-e028-2149-8903-51be87a8409b.png "header.png")


## 1. 要素を作成
index.htmlの```<header class="header"></header>```内に記述します。

```html

<header class="header">
	<div class="header-logo">
		<a href="/">
			<img src="img/common/logo_large.png" alt="Dummy Coast">
		</a>
	</div>
</header>
```

1. ロゴを囲うブロック```<div class="header-logo"></div>```を作成。
2. アンカータグ```<a href="/"></a>```で囲い、```<img src="img/common/logo_large.png" alt="Dummy Coast">```でロゴ画像を読み込みます。

## 2. レイアウト
common.cssのコメント/* header */以下に下記を記述します。

```css
.header {
	background-color: #0ba1eb;         /* 1, 背景色: #0ba1eb */
	border-bottom: 2px solid #ccc;     /* 2. 下線: 2px 直線 #ccc */
	padding: 5px 10px 5px 10px;        /* 4. 余白: ↑5px →10px ↓5px ←10px */
}
.header-logo img {
	width: 150px;                      /* 3. 幅: 150px */
}

```

1. 背景色を設定
2. 下線を作成
3. ロゴ画像(.header-logo img)の大きさを設定
4. 余白を調整

# キービジュアルの作成

![kv.png](https://qiita-image-store.s3.amazonaws.com/0/32375/88285a42-8881-cd1f-d3d4-9fb81f1864ee.png "kv.png")


## 1. 要素を作成
index.htmlの```<div class="contents"></div>```内に記述します。

```html
<div class="contents">
	<div class="top-kv">
		<img src="img/top/kv.jpg" alt="海">
		<h1 class="top-kv-catch">
			<img src="img/top/kv_catch.png" alt="青い空と海">
		</h1>
	</div>
</div>

```
1. キービジュアルのブロック```<div class="top-kv"></div>```を作成します。
2. 幅いっぱいにする画像を```<img src="img/top/kv.jpg" alt="海">```で読み込みます。
3. 中央に配置する文字画像を```<h1 class="top-kv-catch"></h1>```で囲い、```<img src="img/top/kv_catch.png" alt="青い空と海">```で読み込みます。


## 2. レイアウト
common.cssのコメント/* top */以下に下記を記述します。

```css
.top-kv {
	height: 360px;              /* 2. 高さ: 360px */
	overflow: hidden;           /* 3. はみ出し: 隠す */
	position: relative;         /* 5. ポジション: 絶対配置の基準 */
}
.top-kv img {
	width: 100%;                /* 1. 幅: 100% */
}
.top-kv-catch {
	width: 294px;               /* 6. 幅: 294px */
	position: absolute;         /* 4. ポジション: 絶対配置 */
	top: 50%;                   /* 7. 上からの位置: 50% */
	left: 50%;                  /* 8. 左からの位置: 50% */
	margin: -46px 0 0 -147px;   /* 9. マージン: ↑-46px →0 ↓0 ←-147px */
}
```

1. 画像(.top-kv img)をウィンドウいっぱいにする。
2. ウィンドウサイズを変えると画像(.top-kv img)の高さも変わってしまうので、
   画像を囲むdiv(.top-kv)の高さを固定する。
3. div(.top-kv)から画像のはみ出した部分を見せないようにする。
4. 文字部分(.top-kv-catch)を中央配置にするため、絶対配置にする宣言をする。
5. 絶対配置をするために基準となる親要素を設定する。
6. 絶対配置にした要素(.top-kv-catch)に中身(青い空と海の画像)の幅を設定
7. 絶対配置にした要素(.top-kv-catch)に上からの位置を設定する
8. 絶対配置にした要素(.top-kv-catch)に左からの位置を設定する
9. 絶対配置にした要素(.top-kv-catch)の幅と高さの半分をmarginでマイナス設定する。
   (上50%,左50%にしたが.top-kv-catchの左上が起点になっているので位置を調整するため)


# セクション 説明文部分の作成

![sec01.png](https://qiita-image-store.s3.amazonaws.com/0/32375/ead550c3-0f83-6cb3-c0c9-d17346b9e578.png "sec01.png")

## 1. 要素を作成
index.htmlの```<div class="top-kv"></div>```の下に記述します。

```html
<div class="contents">
	<div class="top-kv">
		〜〜〜
	</div>
	
	<section class="top-sec">
		<h2 class="top-sec-head">タイトル</h2>
		<p class="top-sec-text top-sec-text-first">ダミーテキストダミーテキスト</p>
		<p class="top-sec-text">ダミーテキストダミーテキスト</p>
	</section>
	
</div>

```

1. ```<section></section>```タグで囲い、見出し、段落テキストを作成します。

## 2. レイアウト
common.css内、.top-kv-catchの下に記述していきます。

```css
.top-sec {
	width: 960px;               /* 1. 幅: 960px */
	margin: 0 auto 0 auto;      /* 2. マージン: ↑0 →auto ↓0 ←auto 左と右をautoにすると中央に寄る */
	padding: 40px 0 50px 0;     /* 3. 余白: ↑40px →0 ↓50px ←0 */
}
.top-sec-head {
	font-size: 24px;            /* 4. 文字サイズ: 24px */
	font-weight: bold;          /* 5. 文字太さ: 太く */
}
.top-sec-text {
	font-size: 18px;            /* 6. 文字サイズ: 18px */
	margin: 20px 0 0 0;         /* 7. マージン: ↑20px →0 ↓0 ←0  */
}
.top-sec-text.top-sec-text-first {
	margin: 25px 0 0 0;         /* 8. マージン: ↑25px →0 ↓0 ←0 */
}
```

1. セクション(.top-sec)の幅を指定
2. セクション(.top-sec)を画面の中央に寄せる
3. セクション(.top-sec)の余白を調整
4. 見出し(.top-sec-head)の文字サイズを指定
5. 見出し(.top-sec-head)の文字の太さを指定
6. 段落(.top-sec-text)の文字サイズを指定
7. 段落(.top-sec-text)のマージンを設定
8. 最初の段落(.top-sec-textと.top-sec-text-firstをついているpタグ)のマージンを設定

# セクション ビジュアルの作成

![seckv01.png](https://qiita-image-store.s3.amazonaws.com/0/32375/08aff45e-1603-113a-1a0e-868c9557000e.png "seckv01.png")

## 1. 要素を作成
index.htmlの```<section class="top-sec"></section>```の下に記述します。

```html
<div class="contents">
	<div class="top-kv">
		〜〜〜
	</div>
	
	<section class="top-sec">
		〜〜〜
	</section>
	
	<div class="top-sec-kv">
		<img src="img/top/sea_01.jpg" alt="きれいな海">
	</div>
	
</div>

```

1. ```<div class="top-sec-kv"></div>```でブロックを作ります。
2. ```<img src="img/top/sea_01.jpg" alt="きれいな海">```で画像を読み込みます。

## 2. レイアウト
common.css内、.top-sec-text.top-sec-text-firstの下に記述していきます

```css
.top-sec-kv {
	height: 200px;             /* 2. 高さ: 200px */
	overflow: hidden;          /* 3. はみ出し: 隠す */
}
.top-sec-kv img {
	width: 100%;               /* 1. 幅: 100% */
}

```
1. 画像(.top-sec-kv img)をウィンドウいっぱいにする。
2. ウィンドウサイズを変えると画像(.top-sec-kv img)の高さも変わってしまうので、
   画像を囲むdiv(.top-sec-kv)の高さを固定する。
3. div(.top-sec-kv)から画像のはみ出した部分を見せないようにする。


# セクション リスト部分の作成

![sec02.png](https://qiita-image-store.s3.amazonaws.com/0/32375/cc036a97-f320-fe13-b32b-cd6c8258d291.png "sec02.png")

## 1. 要素を作成
index.htmlの```<div class="top-sec-kv"></div>```の下に記述します。

```html
<div class="contents">
	<div class="top-kv">
		〜〜〜
	</div>
	
	<section class="top-sec">
		〜〜〜
	</section>
	
	<div class="top-sec-kv">
		〜〜〜
	</div>
	
	<section class="top-sec">
		<h2 class="top-sec-head">私達の海にはたくさんの楽しさがあります</h2>
		<ul class="top-sec-list">
			<li>
				<img src="img/top/play_01.jpg" alt="ジェットスキー">
				<h3 class="top-sec-list-head">マリンスポーツ</h3>
				<p class="top-sec-list-text">ダミーテキスト</p>
			</li>
			<li>
				<img src="img/top/play_02.jpg" alt="グルメ">
				<h3 class="top-sec-list-head">グルメ</h3>
				<p class="top-sec-list-text">ダミーテキスト</p>
			</li>
			<li>
				<img src="img/top/play_03.jpg" alt="ワイン">
				<h3 class="top-sec-list-head">お酒</h3>
				<p class="top-sec-list-text">ダミーテキスト</p>
			</li>
		</ul>
	</section>
	
</div>

```

1. ```<section class="top-sec"></section>```でブロックを作ります。
2. 見出しを作成します。
3. ```<ul> > <li>```を使い、リスト型を作成します。
4. ```<li></li>```の中にそれぞれ、画像・見出し・テキストを作成します。

## 2. レイアウト
common.css内、.top-sec-kv imgの下に記述していきます。

```css
.top-sec-list {
	margin: 25px 0 0 0;        /* 1. マージン: ↑25px →0 ↓0 ←0 */
	overflow: hidden;          /* 3. はみ出し: 隠す(floatのおまじない) */
}
.top-sec-list li {
	float: left;               /* 2. 横並び: 左 */
	width: 300px;              /* 4. 幅: 300px */
	margin: 0 0 0 30px;        /* 5. マージン: ↑0 →0 ↓0 ←30px */
}
.top-sec-list li:first-child {
	margin: 0;                 /* 6. マージン: すべて0 */
}
.top-sec-list-head {
	font-size: 20px;           /* 7. 文字サイズ: 20px */
	font-weight: bold;         /* 8. 文字の太さ: 太く */
}
.top-sec-list-text {
	margin: 15px 0 0 0;        /* 9. マージン: ↑15px →0 ↓0 ←0 */
}
```

1. リストの見出しからのマージンを設定
2. 各リスト(.top-sec-list li)を左寄せに設定
3. 各リストを左寄せにしたので親要素(.top-sec-list)におまじないを指定(floatをつけた親要素にはつけること)
4. 各リスト(.top-sec-list li)の幅を設定
5. 各リスト間のマージンを指定
6. 最初のリスト(.top-sec-list li:first-child)の左マージンがいらないので上書きする
7. 各リストの見出し(.top-sec-list-head)の文字サイズを指定
8. 各リストの見出しの文字の太さを指定
9. 各リストの段落テキスト(.top-sec-list-text)のマージンを設定