LoginSignup
1
0

More than 5 years have passed since last update.

@t-onizawa(Tetsuya Onizawa)

Dummy Coast TOPページの作成

Last updated at Posted at 2015-07-05

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

初期設定

1. index.htmlに基本を記述する

index.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を読み込みます。

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

3. common.cssに基準を記述する

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

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

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

    </div>
</body>

2. index.htmlに基本ブロックを作成

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

contents.png

<body>
    <div class="wrapper">
        <header class="header">

        </header>
        <div class="contents">

        </div>
        <footer class="footer">

        </footer>
    </div>
</body>

headerの作成

header.png

1. 要素を作成

index.htmlの<header class="header"></header>内に記述します。


<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 */以下に下記を記述します。

.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

1. 要素を作成

index.htmlの<div class="contents"></div>内に記述します。

<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 */以下に下記を記述します。

.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

1. 要素を作成

index.htmlの<div class="top-kv"></div>の下に記述します。

<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の下に記述していきます。

.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

1. 要素を作成

index.htmlの<section class="top-sec"></section>の下に記述します。

<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の下に記述していきます

.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

1. 要素を作成

index.htmlの<div class="top-sec-kv"></div>の下に記述します。

<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の下に記述していきます。

.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)のマージンを設定
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0