作成日：2021/04/12　更新日：2022/03/17

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

WebサイトのTOPページを作る（6時間ほどで作りましょう）

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

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

まず枠だけのサイトを作ってみましょう。 使うプロパティは 「width, height, margin, padding, display, flex, position, text-align」のみを使って組んでみましょう。
まずはこのような枠線だけのサイト を作るところから始めます。

HTMLコーディングの間違えやすいポイント
  1. html文書内で要素に閉じタグが無い、または違うタグで閉じている
  2. html文書内でcssファイルがリンクしていない。異なるcssファイルを編集している
  3. 階層を分かりやすくするためにインデントをつける（TABキーでつけれます）
  4. 英数字を書く時は必ず、半角小文字で書く
  5. スペースは必ず半角スペースでつける
CSSコーディングの間違いやすいポイント
  1. cssのセレクタに「.」や「#」、「}」「;」が不足している
  2. ブラウザでの確認は細かく(慣れるまでは1個書いたら確認する)
  3. htmlのクラス名と対になるcssのセレクタ名が違うことにならないよう。クラス名やid名はHTMLからコピーして持ってくる
  4. 制作の現場ではBEMベムと呼ばれる、クラス名の命名規則があります。
    今回はサンプルのクラス名を使って構築していきましょう。
  5. スペースは必ず半角スペースでつける

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>
htmlはこのように書いておきます。
またreset.cssを使い、ブラウザごとに異なる余白などの初期値を初期化してレイアウトを始めます。
reset.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;
}
枠線だけでレイアウトしますので、よく登場するセレクタに余白と線を付けて見えやすいようにしておきます。 style.cssに記述します。これらの設定は完成間近になったら削除します。

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を作る

先にheaderとfooterの要素を作っていきます。
下に出てくるコードを自分のファイルに丸写しして書き足していきましょう。
※<!-- -->　や　/* */　この部分のコメントは書かなくても良いです。
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 {
}
.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 section {
  width: 85%;
  margin:0 auto 60px;
}

.main .main__kv { /* 上の設定を上書きする書き方です。親のセレクタを左に入れます。 */
  width: auto;
  height: 70vh;  /*決められている高さを指定します*/
}
.main__about {

}
.main__service {

}
.main__news {

}

ブラウザで見るとこのような表示になります。

5. aboutエリア

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


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


.main__about {
  padding: 0 10px 80px; /* 追加 */
}
.main__about--ttl {  /* h2タグ */
  margin-bottom:60px;
  text-align: center;
}
.main__about--logo {  /* divタグ */
  width: 40%;
  margin:0 auto;
}
.main__about--txt {  /* pタグ */
  margin: 45px 0 60px;
  text-align: center;
}

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

.main__about--ttlはh2タグなので、 クラス名を付けずに、.main__about h2という子孫セレクタを使っても良いです。
今のところは、基本的には全要素にクラスはつける。でもちょっと面倒だなと思ったら子孫セレクタを使うという程度の理解でOKです。

6. serviceエリア

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


<section class="main__service">
  .main__service
  <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 {
  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;
}

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

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

7. newsエリア

つづいて.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 {
  padding: 0 20px 0; /* 追加 */
}
.main__news--ttl {
  margin-bottom: 16px;
}
.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 {
}

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

8. 枠が完成！

これまでのコードを合わせることこのようになります。みなさんのファイルもこの様になっているはずです
いかがでしょうか？😊
▼完成したコード

<!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
  <h1 class="main__about--ttl">title</h1>
  <div class="main__about--logo"><img src=""></div>
  <p class="main__about--txt">text</p>
</section>

<section class="main__service">
  .main__service
  <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 section {
  width: 85%;
  margin:0 auto 60px;
}

.main .main__kv {
  width: auto;
  height: 70vh;
}

.main__about {
  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 {
  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;
}
.main__service--list {
  display: flex;
}
.main__service--list li {
  flex:1;
}
.main__service--list li a {
  display: block;
}
.main__service--list li img {
  width: 100%;
}
.main__service--list li h3 {
  margin: 50px 0 30px 0;
}
.main__service--list li p {
}

.main__news {
  padding: 0 20px 0;
}
.main__news--ttl {
  margin-bottom: 16px;
}
.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 70px;
}
.footer__logo {
  width: 100px;
  margin: 0 auto;
}
.footer__copyright {
  margin-top: 30px;
  text-align: center;
}
完成した枠線レイアウト
枠線が完成したら80%は完成したも同然です！
次に、画像と文字を入れていきます。

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

画像素材をダウンロード
枠の状態から画像やテキストを入れ込んで、余白・フォントサイズ・文字の位置などを調整します。

htmlファイル
クラス名（.headerなど）の文字を削除しながら、テキストや<img>タグで画像を入れ込んでみましょう。
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">
  <h1 class="main__about--ttl">h1タイトルタイトルタイトルタイトル</h1>
  <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 section {
  width: 85%;
  margin:0 auto 60px;
}

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

.main__about {
  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 {
  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;
  /*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;
}
.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 {
  padding: 0 20px 0;
}
.main__news--ttl {
  margin-bottom: 16px;
  /*add*/
  font-size: 48px;
}
.main__news--list {
  padding: 40px 12px;
}
.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 70px;
  /*add*/
  border-top: 1px solid #e8ecee;
}
.footer__logo {
  width: 100px;
  margin: 0 auto;
}
.footer__copyright {
  margin-top: 30px;
  text-align: center;
  /*add*/
  color: #b5b5b5;
  font-size: 11px;
}
文字と画像を入れ込んだデータ
入門入門

入門1（コーダー初級）

  1. Webサイトを作る準備
  2. Webサイトはhtmlとcssで作る
  3. htmlとcssの決まりごと
  4. htmlは枠というブロックのパズル
  5. htmlでの枠の使い方と特性
  6. cssでデザインしてみる
  7. cssでデザインする時のプロパティ
  8. 簡単なWebサイトを作ってみよう
  9. 枠をなぞってhtmlを作る
  10. 枠に名前をつけて個別にデザインする
  11. 枠を中央に配置する方法
  12. 2つの枠を横並びにする方法
  13. 枠だけのホームページが完成
  14. 枠の中に画像や色を入れる
  15. 枠の中にテキストを入れる
  16. 簡単なwebサイトの完成
  17. 完成したレイアウトを拡張する

入門2（コーダー中級）

  1. 枠のことを「要素」と呼ぶ
  2. 要素のレイアウトに便利なflexボックス
  3. 要素の種類を変えるdisplayプロパティ
  4. 要素の位置を調整できるpositionプロパティ
  5. 要素を回り込みさせるfloatプロパティ
  6. いろんなcssのセレクタ指定方法

入門3（コーダー上級）

  1. 実践を踏まえたコーディング
基礎基礎

基礎1（マークアップ 初級）

  1. インターネットの仕組み
  2. FTP接続
  3. SEOについて
  4. レスポンシブコーディングとは
  5. ビューポート、cssメディアクエリについて
  6. 作ったhtmlをレスポンシブ化してみよう
  7. レスポンシブコーディングでサイト制作①
  8. レスポンシブコーディングでサイト制作②

基礎2（マークアップ 中級）

  1. エクセル関数について
  2. エクセル関数（売上票を作る）
  3. エクセル関数（成績表を作る）
  4. jQueryってなに？
  5. jQueryライブラリの読み込み
  6. 簡単な機能をjQueryで実装しよう
  7. 変数を使う
  8. 関数を使う
  9. コンソールでデータの確認
  10. モーダルウィンドウを作る

基礎3（マークアップ 上級）

  1. jQueryプラグインを実装してみる
  2. CSSでアニメーション(transform,transition)
  3. デザインでよく使うtransitionスニペット
  4. Sassを使ってCSSを効率的に記述する
  5. SCSSの使い方
応用応用

応用1（フロントエンドエンジニア 初級）

  1. ローカルにWeb開発環境を作る(LAMP)
  2. PHPについて
  3. PHPの変数
  4. PHPで条件によって処理を変える（条件分岐）
  5. PHPで繰り返し処理を行う（ループ処理）
  6. PHPの配列変数（変数に複数データ）
  7. PHPで配列のループ処理
  8. PHPを便利にするいろんな記号
  9. データベース（DB）を作る

応用2（フロントエンドエンジニア 中級1）

  1. PHPとjsで簡単なアプリを作ってみよう
  2. PHPのエラーをブラウザに表示させる
  3. データベース(DB)に接続する
  4. DBデータをhtmlで表示させる
  5. formタグから入力したデータをDBに登録
  6. jQueryで要素をドラッグ移動させる
  7. データをAjaxでPHPに送信しDBに登録
  8. PHPで簡単にできるデバッグ方法
  9. 作ったプログラムを拡張してみる
  10. リレーショナルデータベース
  11. PHPのクラスを理解するための準備
  12. PHPアプリケーションをクラス化してみよう

応用3（フロントエンドエンジニア 中級2）

  1. CMSについて
  2. WordPressのインストールと初期設定
  3. 独自テーマを作る
  4. 共通部分をテンプレート化
  5. TOPページを作る
  6. 下層ページを作る
  7. 固定ページにNEWS投稿を読み込む
  8. 便利なプラグインを使う
  9. カスタムフィールド機能を使う
  10. その他の便利なWordPressの機能
  11. カスタム投稿機能を使う
  12. カスタムタクソノミー機能を使う
実践フロントエンド実践フロントエンド

実践1（フロントエンジニア 中級3）

  1. コマンドラインを使おう
  2. Homebrewのインストール
  3. Gitでファイルのバージョン管理
  4. Gitを視覚的に確認
  5. Gitでファイルを共有する
  6. Gitでファイルの取り込み

実践2（フロントエンドエンジニア 中級4）

  1. Vue.jsをインストールして動作確認
  2. 静的なページをVue.jsを使って構築する
  3. Veu.jsをCDNで読み込み画面表示させる
  4. PHPの代わりにVue.jsでHTML表示
  5. VueコンポーネントでHTML表示させる

実践3（フロントエンドエンジニア 上級1）

  1. VueとWebAPIでアプリを作る
  2. APIファイルを自作する
  3. Vueでドラッグ&ドロップ
  4. Vue.js + WordPressでヘッドレスCMSを作る
実践バックエンド実践バックエンド

実践3（バックエンド Laravel）

  1. PHPフレームワークのLaravel(ララベル)をつかおう
  2. Laravelをローカル環境に導入する準備
  3. Laravelの環境構築の方法
  4. Laravelでアプリケーション作成の準備
  5. Laravelでブラウザに表示されるかを確認する
  6. Laravelの仕組み〜MVCの理解〜
  7. Laravelでデータベースのデータを表示する方法
  8. Laravelアプリでデータを新規登録する方法
  9. LaravelでAjaxのデータを登録する方法
  10. Laravelでアプリを作ってみよう
デザインデザイン

入門（デザイン概論）

  1. デザインを科学する
  2. 観察（与件の整理）
  3. 実験（別案の作成）
  4. 数字（裏付けとなる数字）
  5. デザイン（配置の優先順位）
  6. デザイン（余白をつくる）
  7. デザイン（目を引く方法と目線の流れ）
  8. デザイン（書体を考える）
  9. デザイン（立体感を出す）

基礎（デザイン実践）

  1. バナーをデザインする

応用（クリエイティブ）

  1. 居酒屋サイトを作る
  2. クリニックサイトを作る
  3. キャンペーンLPを作る
キッズキッズ
コピーしました
RSS https://cbc-study.com/rss.xml　
質問などあればSlackで。誰でも無料でできます
cbc-study.slack.com 質問の仕方はこちらをごらんください
powerd by logo