#1 実践を踏まえたコーディング

LPサイトを作ってみましょう(6時間ほどで作りましょう)

最初の一歩はhtmlで構造体を作ることです。紙に枠を書いて要素にクラス名を記入します。
ラッパーだけのマークアップを行いその後、ラッパーの中身に画像や文字を入れていきましょう。

完成

枠線のみ

まず枠だけのコードを作ろう

まず枠だけのサイトを作ってみましょう。 使うプロパティは 「width, height, margin, padding, display, flex, position, text-align」のみを使って組んでみましょう。
またreset.cssを使い、ブラウザごとに異なる余白などの初期値を初期化してレイアウトを始めます。
reset.cssをダウンロード

まずはこのような枠線だけのサイトサイトを作るところから始めます。

HTMLコーディングの間違えやすいポイント

  • ・html文書内で要素に閉じタグが無い、または違うタグで閉じている
  • ・html文書内でcssファイルがリンクしていない。異なるcssファイルを編集している
  • ・階層を分かりやすくするためにインデントをつける(TABキーでつけれます)
  • ・英数字を書く時は必ず、半角小文字で書く
  • ・スペースは必ず半角スペースでつける

CSSコーディングの間違いやすいポイント

  • ・cssのセレクタに「.」や「#」、「}」「;」が不足している
  • ・ブラウザでの確認は細かく(慣れるまでは1個書いたら確認する)
  • ・htmlのクラス名と対になるcssのセレクタ名が違うことにならないよう。クラス名やid名はHTMLからコピーして持ってくる
  • ・スペースは必ず半角スペースでつける
制作の現場ではBEMベムと呼ばれる、クラス名の命名規則があります。今回はサンプルのクラス名を使って構築していきましょう。

フェーズ1

なにはともあれ、初期準備です。test2フォルダを作り、index.htmlとstyle.cssを作りましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CBC | コーディング01</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
枠線だけでレイアウトしますので、よく登場するセレクタに余白と線を付けて見えやすいようにしておきます。style.cssに記述します。これらの設定は完成間近になったら削除します。

@charset "UTF-8";
/******************************
* 初期設定
******************************/
body {
  color: #060606;
  font-size: 16px;
  font-family: sans-serif;
}
a{
  text-decoration: none;
  color: #060606;
}
/*枠線の確認用に一時的に適応 後で削除*/
body, header, footer, main, section, div, p, li, dt, dd, a{
  margin:10px;
  padding:10px;
}
header, footer, main, section{
  border: 2px solid #f00;
}
div, p{
  border: 1px solid #00f;
}
li, dt, dd, a{
  border: 1px dotted #0f0;
}

フェーズ2

さきほど書き出した枠線を見ながら、大まかな枠に名前をつけながら組んでいきます。手書きの枠線の絵で言うところの赤い部分です。
コーディングデータ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CBC | コーディング01</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<header class="header">
  .header 
</header>

<main class="main">
  .main
</main>

<footer class="footer">
  .footer
</footer>

</body>
</html>

@charset "UTF-8";
/******************************
 初期設定
******************************/
body {
  color: #060606;
  font-size: 16px;
  font-family: sans-serif;
}
|
|略
|
li, dt, dd, a{
  border: 1px dotted #0F0;
}

/******************************
 header
******************************/
.header {

}

/**********************************
 main
**********************************/
.main{

}

/**********************************
 footer
**********************************/
.footer{

}

ブラウザではこのような表示になります

フェーズ3

先にheaderとfooterの要素を作っていきます。わかる方はcssも同時に編集していきましょう。
header
footer
コーディングデータ

<header class="header">
  .header
  <div class="header__wrap"> 
    .header-wrap
    <div class="header__logo"> 
      .header-logo
      <a href=""><img src=""></a> 
    </div>
    <ul class="header__menu">  
      <li><a href="">li</a></li> 
      <li><a href="">li</a></li>
      <li><a href="">li</a></li>
      <li><a href="">li</a></li>
    </ul>
  </div>
</header>

<main class="main">
  .main
</main>

<footer class="footer">
  .footer
  <div class="footer__logo"><img src=""></div>  
  <div class="footer__copyright">copy</div>  
</footer>

/******************************
 header
******************************/
.header {
  width:100%;
}
.header__wrap {
  width: 85%; /*固定幅に*/
  margin:0 auto; /*センタリングします*/
  display: flex; /*中身を横並びにしたいのでflex*/
  justify-content: space-between;
  align-items: center;
}
.header__logo { /*決まっている画像のサイズを入力*/
  width: 54px;
  height: 76px;
}
.header__menu { /*liタグを横並びにしたいのでflex*/
  display: flex;
}
.header__menu li {
  width: 100px;
}

/**********************************
 main
**********************************/
.main{

}

/**********************************
 footer
**********************************/
.footer{
  padding: 90px 0 70px; /*内側 上に90px 下に70pxの余白*/
}
.footer__logo {
  width: 100px;
  margin: 0 auto; /*真ん中に*/
}
.footer__copyright {
  margin-top: 30px;
  text-align: center; /*文字真ん中に*/
}

ブラウザではこのような表示になります

フェーズ4

mainエリアの4つの大枠部分の枠だけ書いてみましょう。手書きの枠線で言うところの青い部分です。
コーディングデータ

<main class="main">
.main
<section class="main__kv">  
  .main_kv  
</section>

<section class="main__about">
  .main__about
</section>

<section class="main__service">
  .main__service
</section>

<section class="main__news">
 .main__news
</section>
</main>

/**********************************
 main
**********************************/
.main{

}
.main__kv {
  height: 70vh;  /*決められている高さを指定します*/
}
.main__about {
  width: 85%;  /*固定幅でセンタリング*/
  margin: 50px auto 200px;
  padding: 0 10px 80px;
}
.main__service {
  width: 85%;  /*固定幅でセンタリング*/
  margin:0 auto;
  padding-bottom: 100px;
}
.main__news {
  width: 85%;  /*固定幅でセンタリング*/
  margin:0 auto;
  padding: 0 20px 0;
}

ブラウザではこのような表示になります

フェーズ5

mainエリア内を上から順番に作りましょう。.main__aboutエリアを作っていきます。

コーディングデータ

<section class="main__about">
  .main__about
  <h2 class="main__about--ttl">title</h2>
  <div class="main__about--logo"><img src=""></div>
  <p class="main__about--txt">text</p>
</section>

.main__about {
  width: 85%;
  margin: 50px auto 200px;
  padding: 0 10px 80px;
}
.main__about--ttl {
  margin-bottom:60px;
  text-align: center;
}
.main__about--logo {
  width: 40%;
  margin:0 auto;
}
.main__about--txt {
  margin: 45px 0 60px;
  text-align: center;
}

ブラウザではこのような表示になります

フェーズ6

つづいて.main__serviceエリアを作っていきます。

コーディングデータ

<section class="main__service">
  .main__service-wrap
  <div class="main__service--message">  
    <h2>h2 title</h2> 
    <p>text</p>       
  </div>
  <ul class="main__service--list">
    <li>  
      <a href="">
        <img src="">   
        <h3>title</h3> 
        <p>text</p>    
      </a>
    </li>
    <li>
      <a href="">
        <img src="">
        <h3>title</h3>
        <p>text</p>
      </a>
    </li>
    <li>
      <a href="">
        <img src="">
        <h3>title</h3>
        <p>text</p>
      </a>
    </li>
  </ul>
</section>

.main__service {
  width: 85%;
  margin:10px auto;
  padding-bottom: 100px;
}
.main__service--message {  /*中規模の枠*/
  margin-bottom: 95px;
  display: flex;  /*h2とpタグは横なら見なのでflex*/
}
.main__service--message h2 {
  flex: 1;
  flex-direction: column;
}
.main__service--message p {
  flex: 2;
  margin-top: 70px;
}

.main__service--list {  /*中規模の枠*/
  display: flex;
}
.main__service--list li{
  flex:1;
}
.main__service--list li a{
  display: block;
  height: 100%;
}
.main__service--list li img{
  width: 100%;
}
.main__service--list li h3{
  margin: 50px 0 30px 0;
}
.main__service--list li p{
}

ブラウザではこのような表示になります

フェーズ7

つづいて.main__newsエリアを作っていきます。

コーディングデータ

<section class="main__news">
.main__news
  <h2 class="main__news--ttl">h2 title</h2> 
  <ul class="main__news--list">  
  .main__news--list
    <li>
      <a href="">  
        <dl class="main__news--item">
          <dt class="main__news--day">2019.08.20</dt>
          <dd class="main__news--data">text</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="">
        <dl class="main__news--item">
          <dt class="main__news--day">2019.08.20</dt>
          <dd class="main__news--data">text</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="">
        <dl class="main__news--item">
          <dt class="main__news--day">2019.08.20</dt>
          <dd class="main__news--data">text</dd>
        </dl>
      </a>
    </li>
  </ul>
</section>

.main__news {
  width: 85%;
  margin:10px auto;
  padding: 0 20px 0;
}
.main__news--ttl {
  margin-bottom: 16px;
  padding-top:120px;
}
.main__news--list{
  padding: 40px 12px;
}
.main__news--list li{
}
.main__news--list li a{
  display: block;  /*aタグ全体でリンクできるようにblock化*/
  padding: 38px 20px;
}
.main__news--item {
  display: flex;  /*中の要素を横ならびにする*/
}
.main__news--day {
  width: 265px;
  display: flex;  /*天地のセンターにするためにflex*/
  align-items: center;  /*天地のセンターにする*/
  margin-right: 32px;
}
.main__news--data {
}

ブラウザではこのような表示になります

完成!

枠だけの完成形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CBC | コーディング01</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
<header class="header">
  .header
  <div class="header__wrap">
    .header-wrap
    <div class="header__logo">
      .header-logo
      <a href="">a</a>
    </div>
    <div class="header__menu">
      .header-menu
      <ul>
        <li><a href="">li</a></li>
        <li><a href="">li</a></li>
        <li><a href="">li</a></li>
        <li><a href="">li</a></li>
      </ul>
    </div>
  </div>
</header>

<main class="main">
  .main
<section class="main__kv">
  .main_kv
</section>

<section class="main__about">
  .main__about
  <h2 class="main__about--ttl">title</h2>
  <div class="main__about--logo"><img src=""></div>
  <p class="main__about--txt">text</p>
</section>

<section class="main__service">
  .main__service-wrap
  <div class="main__service--message">
    <h2>h2 title</h2>
    <p>text</p>
  </div>
  <ul class="main__service--list">
    <li>
      <a href="">
        <img src="">
        <h3>title</h3>
        <p>text</p>
      </a>
    </li>
    <li>
      <a href="">
        <img src="">
        <h3>title</h3>
        <p>text</p>
      </a>
    </li>
    <li>
      <a href="">
        <img src="">
        <h3>title</h3>
        <p>text</p>
      </a>
    </li>
  </ul>
</section>

<section class="main__news">
.main__news
  <h2 class="main__news--ttl">h2 title</h2>
  <ul class="main__news--list">
  .main__news--list
    <li>
      <a href="">
        <dl class="main__news--item">
          <dt class="main__news--day">2019.08.20</dt>
          <dd class="main__news--data">text</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="">
        <dl class="main__news--item">
          <dt class="main__news--day">2019.08.20</dt>
          <dd class="main__news--data">text</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="">
        <dl class="main__news--item">
          <dt class="main__news--day">2019.08.20</dt>
          <dd class="main__news--data">text</dd>
        </dl>
      </a>
    </li>
  </ul>
</section>
</main>

<footer class="footer">
  .footer
  <div class="footer__logo">logo</div>
  <div class="footer__copyright">copy</div>
</footer>
</body>
</html>

@charset "UTF-8";
/******************************
* 初期設定
******************************/
body {
  color: #060606;
  font-size: 16px;
  font-family: sans-serif;
}
a{
  text-decoration: none;
  color: #060606;
}

/*枠線の確認用に一時的に適応 後で削除*/
body, header, footer, main, section, div, p, li, dt, dd, a{
  margin:10px;
  padding:10px;
}
header, footer, main{
  border: 2px solid #F00;
}
section{
  border: 2px solid #00F;
}
div, p{
  border: 1px solid #F0F;
}
li, dt, dd, a{
  border: 1px dotted #0F0;
}

/******************************
 header
******************************/
.header {
  width: 100%;
}
.header__wrap {
  width: 85%;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  width: 54px;
  height: 76px;
}
.header__logo a {
  display: block;
}

.header__menu{
}
.header__menu ul {
  display: flex;
}
.header__menu ul li {
  width: 80px;
}
.header__menu ul li a{
  display: block;
  width: 100%;
  text-align: center;
}

/**********************************
/* main
**********************************/
.main{
}

.main__kv {
  height: 70vh;
}

.main__about {
  width: 85%;
  margin: 50px auto 200px;
  padding: 0 10px 80px;
}
.main__about--ttl {
  margin-bottom:60px;
  text-align: center;
}
.main__about--logo {
  width: 40%;
  margin:0 auto;
}
.main__about--txt {
  margin: 45px 0 60px;
  text-align: center;
}

.main__service {
  width: 85%;
  margin:10px auto;
  padding-bottom: 100px;
}
.main__service--message {
  margin-bottom: 95px;
  display: flex;
}
.main__service--message h2 {
  flex: 1;
  flex-direction: column;
}
.main__service--message p {
  flex: 2;
  margin-top: 70px;
}
.main__service--list {
  display: flex;
}
.main__service--list li{
  flex:1;
}
.main__service--list li a{
  display: block;
  height: 100%;
}
.main__service--list li img{
  width: 100%;
}
.main__service--list li h3{
  margin: 50px 0 30px 0;
}
.main__service--list li p{
}

.main__news {
  width: 85%;
  margin:10px auto;
  padding: 0 20px 0;
}
.main__news--ttl {
  margin-bottom: 16px;
  padding-top:120px;
}
.main__news--list{
  padding: 40px 12px;
}
.main__news--list li{
}
.main__news--list li a{
  display: block;
  padding: 50px 20px;
}
.main__news--item {
  display: flex;
}
.main__news--day {
  width: 265px;
  display: flex;
  align-items: center;
  margin-right: 32px;
}
.main__news--data {
}

/**********************************
/* footer
**********************************/
.footer{
  padding: 90px 0 71px;
}
.footer__logo {
  width: 100px;
  margin: 0 auto;
}
.footer__copyright {
  color: #b5b5b5;
  font-size: 11px;
  margin-top: 31px;
  text-align: center;
}

枠線が完成したら80%は完成したも同然です。次に、画像と文字を入れていきます。

画像や文字要素を入れ込んでいく

画像素材をダウンロード
枠の状態から画像やテキストを入れ込んで、余白・フォントサイズ・文字の位置などを調整します。
htmlファイルではクラス名を削除しながら、画像やテキストを入れ込んでみましょう。
cssファイルの/*add*/と書いてある下の内容が、枠だけのcssから追加されたものです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CBC | コーディング01</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
<header class="header">
  <div class="header__wrap">
    <div class="header__logo">
      <a href=""><img src="images/header_logo.svg"></a>
    </div>
    <div class="header__menu">
      <ul>
        <li><a href="">ナビ01</a></li>
        <li><a href="">ナビ02</a></li>
        <li><a href="">ナビ03</a></li>
        <li><a href="">ナビ04</a></li>
      </ul>
    </div>
  </div>
</header>

<main class="main">
<section class="main__kv">
  むずかしいことを簡単に。<br>
  つまらないことを面白く。<br>
  わからないが分かる人に。<br>
</section>

<section class="main__about">
  <h2 class="main__about--ttl">h2タイトルタイトルタイトルタイトル</h2>
  <div class="main__about--logo"><img src="images/header_logo.svg" alt="logo"></div>
  <p class="main__about--txt">
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  </p>
</section>

<section class="main__service">
  <div class="main__service--message">
    <h2>h2 title</h2>
    <p>
      テキストテキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキスト
    </p>
  </div>
  <ul class="main__service--list">
    <li>
      <a href="">
        <img src="images/top_service01.jpg" alt="">
        <h3>h3 title01</h3>
        <p>テキストテキストテキストテキスト</p>
      </a>
    </li>
    <li>
      <a href="">
        <img src="images/top_service02.jpg" alt="">
        <h3>h3 title02</h3>
        <p>テキストテキストテキストテキスト</p>
      </a>
    </li>
    <li>
      <a href="">
        <img src="images/top_service03.jpg" alt="">
        <h3>h3 title03</h3>
        <p>テキストテキストテキストテキスト</p>
      </a>
    </li>
  </ul>
</section>

<section class="main__news">
  <h2 class="main__news--ttl">h2 title</h2>
  <ul class="main__news--list">
    <li>
      <a href="">
        <dl class="main__news--item">
          <dt class="main__news--day">2019.08.20</dt>
          <dd class="main__news--data">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="">
        <dl class="main__news--item">
          <dt class="main__news--day">2019.08.20</dt>
          <dd class="main__news--data">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="">
      <dl class="main__news--item">
        <dt class="main__news--day">2019.08.20</dt>
        <dd class="main__news--data">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</dd>
      </dl>
      </a>
    </li>
  </ul>
</section>
</main>

<footer class="footer">
  <div class="footer__logo"><img src="images/header_logo.svg" alt="logo"></div>
  <div class="footer__copyright">(C)CRI.LTD. 2019</div>
</footer>
</body>
</html>

@charset "UTF-8";
/******************************
* 初期設定
******************************/
body {
  color: #060606;
  font-size: 16px;
  font-family: sans-serif;
  /*add*/
  letter-spacing: 0.06em;
}
a{
  text-decoration: none;
  color: #060606;
}

/******************************
 header
******************************/
.header {
  width: 100%;
  /*add*/
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,.15);
}
.header__wrap {
  width: 85%;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  width: 54px;
  height: 76px;
}
.header__logo a {
  display: block;
}

.header__menu{
}
.header__menu ul {
  display: flex;
}
.header__menu ul li {
  width: 80px;
}
.header__menu ul li a{
  display: block;
  width: 100%;
  text-align: center;
}

/**********************************
 main
**********************************/
.main{
}

.main__kv {
  height: 70vh;
  /*add*/
  display: flex;
  align-items: center;
  padding-left: 10%;
  background: url(../images/top_kv.jpg) center/cover no-repeat;
  font:normal 24px/1.8 sans-serif;
}

.main__about {
  width: 85%;
  margin: 50px auto 200px;
  padding: 0 10px 80px;
}
.main__about--ttl {
  margin-bottom:60px;
  text-align: center;
  /*add*/
  color: #060606;
  font-size: 28px;
  letter-spacing: 4px;
  margin-bottom: 60px;
}
.main__about--logo {
  width: 40%;
  margin:0 auto;
}
.main__about--txt {
  margin: 45px 0 60px;
  text-align: center;
  /*add*/
  padding:0 20px;
  font:normal 16px/2 sans-serif;
  letter-spacing: 4px;
}

.main__service {
  width: 85%;
  margin:10px auto;
  padding-bottom: 100px;
}
.main__service--message {
  margin-bottom: 95px;
  display: flex;
}
.main__service--message h2 {
  flex: 1;
  flex-direction: column;
  /*add*/
  font-size: 50px;
  font-weight: bold;
}
.main__service--message p {
  flex: 2;
  margin-top: 70px;
  /*add*/
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: 2px;
}
.main__service--list {
  display: flex;
}
.main__service--list li{
  flex:1;
  /*add*/
  margin-right: 2%;
}
.main__service--list li a{
  display: block;
  height: 100%;
}
.main__service--list li img{
  width: 100%;
  /*add*/
  display: block;
}
.main__service--list li h3{
  margin: 50px 0 30px 0;
}
.main__service--list li p{
}

.main__news {
  width: 85%;
  margin:10px auto;
  padding: 0 20px 0;
}
.main__news--ttl {
  margin-bottom: 16px;
  padding-top:120px;
  /*add*/
  font-size: 48px;
}
.main__news--list{
  padding: 40px 12px;
  /*add*/
  border-top: 1px solid #a7b7bf;
}
.main__news--list li{
  /*add*/
  border-bottom: 1px solid #e8ecee;
}

/*add*/
.main__news--list li:first-child{
  border-top: 1px solid #e8ecee;
}

.main__news--list li a{
  display: block;
  padding: 50px 20px;
}

/*add*/
.main__news--list li a:hover{
  background: #e8ecee;
}

.main__news--item {
  display: flex;
}
.main__news--day {
  width: 265px;
  display: flex;
  align-items: center;
  margin-right: 32px;
}
.main__news--data {
  /*add*/
  line-height: 1.8;
}

/**********************************
 footer
**********************************/
.footer{
  padding: 90px 0 71px;
  /*add*/
  border-top: 1px solid #e8ecee;
}
.footer__logo {
  width: 100px;
  margin: 0 auto;
}
.footer__copyright {
  color: #b5b5b5;
  font-size: 11px;
  margin-top: 31px;
  text-align: center;
}
文字と画像を入れ込んだデータ
powerd by