トップ > Web フロントエンド > 素のHTML, CSS, JavaScriptで0から始めるWeb開発【HTML&CSS基礎編】

素のHTML, CSS, JavaScriptで0から始めるWeb開発【HTML&CSS基礎編】

Web フロントエンド

こんにちは、エムティーアイの井上です。今回はこれからWeb開発を始めたいという方向けにWeb開発の基礎となる部分を紹介します。

このシリーズのゴールはWeb開発に必要な3つの言語 HTML, CSS, JavaScript の仕組みを理解し書けるようになることにあります。HTML, CSS, JavaScriptでテトリスを作りながらそれぞれの仕組みをご紹介いたします。 全体で4部構成になっており今回はその第2弾【HTML&CSS基礎編】となります。

f:id:mti-hackers:20171117141649p:plain

入れ子になったHTMLタグ

前回では文字を表す<h1>タグを使用しました。しかし、ただ文字を表示するだけの単純な構造だったためただ一対のタグが置かれただけでしたね。今回は入れ子になったHTMLタグを使用します。

表組みを表すHTMLタグは<table>タグです。しかし、これ一つで表の構造を表すことはできません。そのため、<table>タグはその中に表の行を表す<tr>タグを持ちま す。さらに<tr>タグはその中に表の一つ一つのセルを示す<td>タグを持ちます。

まずはかんたんな表を作ってみましょう！

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <h1 id="hello_text">Hello World</h1>
    <table>
      <tr>
        <td>1</td><td>2</td><td>3</td>
      </tr>
      <tr>
        <td>あ</td><td>い</td><td>う</td>
      </tr>
    </table>
    <script src="./js/main.js"></script>
  </body>
</html>

このように構造に沿ってタグを入れ子にして記述します。 ただし今はデザインを何も設定していないので暗くて見づらいですね。

f:id:mti-hackers:20171117142400j:plain

CSSを編集して見やすくしてみましょう！

style.css

body {
  background-color: #263238;
}

h1 {
  color: #FFFFFF;
}

td {
  color: #FFFFFF;
}

簡単に白い文字にしました。

f:id:mti-hackers:20171117142404j:plain

表なので枠やセルの高さや幅、背景色などを変更できます

次にテトリスに必要なゲーム盤を作っていきましょう！ テトリスは横10マス縦20マスのマス目上にブロックが落ちてきます。 これをHTMLで考えると... <table>タグの中に20個の<tr>タグがあり、それぞれの<tr>タグには10個の<td>タグが入っている という構造になります。 HTMLを次のように編集しましょう！

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <h1 id="hello_text">Hello World</h1>
    <table>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
    </table>
    <script src="./js/main.js"></script>
  </body>
</html>

これで構造は書けました。 しかし、中身のない表なので何も表示されませんね？ CSSでデザインを追加しましょう！

style.css

body {
  background-color: #263238;
}

h1 {
  color: #FFFFFF;
}

table {
  width: 400px; /* 表の幅 */
  height: 800px; /* 表の高さ */
  /* 中央揃えにする */
  margin-left: auto;
  margin-right: auto;
}

td {
  width: 10%; /* セルの幅 */
  height: 5%; /* セルの高さ */
  background-color: #455A64; /* 背景色 */
}

table{}に書かれた内容は表全体のデザインになります。それぞれが示す内容は/コメントアウト/にて記載しております。 中央揃えにするために左側の余白と右側の余白をautoに設定しています。 左右の余白が自動的に調整される →同じ幅の余白に調整される →中央に揃う という流れで中央になります。

f:id:mti-hackers:20171117142408j:plain

このような盤ができましたでしょうか？ 次はCSSのクラスという機能を使ってそれぞれのセルに色を付けていきます。 クラスはHTMLのタグに

<td class="クラス名"></td>

というように記述し、CSSには

.クラス名 {}

というように記述します。 こうすることで同じタグ名でも違った見た目にすることができます。 では実際に次のようにクラスを振ります。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <h1 id="hello_text">Hello World</h1>
    <table>
      <tr> <td class="i"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="o"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="t"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="s"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="z"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="j"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="l"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
    </table>
    <script src="./js/main.js"></script>
  </body>
</html>

ここで割り振ったクラスi, o, t, s, z, j, lはテトリスのブロック(テトリミノ)の形になぞらえた名前にしてあります。 ガイドラインではそれぞれのテトリミノに対して配色が決められているためそれに従ってCSSを編集します。

style.css

body {
  background-color: #263238;
}

h1 {
  color: #FFFFFF;
}

table {
  width: 400px; /* 表の幅 */
  height: 800px; /* 表の高さ */
  /* 中央揃えにする */
  margin-left: auto;
  margin-right: auto;
}

td {
  width: 10%; /* セルの幅 */
  height: 5%; /* セルの高さ */
  background-color: #455A64; /* 背景色 */
}

.i {
  background-color: #00BCD4; /* cyan */
}

.o {
  background-color: #FFEB3B; /* yellow */
}

.t {
  background-color: #9C27B0; /* purple */
}

.s {
  background-color: #4CAF50; /* green */
}

.z {
  background-color: #F44336; /* red */
}

.j {
  background-color: #2196F3; /* blue */
}

.l {
  background-color: #FF9800; /* orange */
}

これで以下のような見た目になりましたか？

f:id:mti-hackers:20171117142411j:plain

まだまだ動きませんがテトリミノの形を作ってみましょう！ HTMLでクラスを振る<td>タグを変更してそれぞれのクラスにあったテトリミノの形になるように次のように変更します。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <h1 id="hello_text">Hello World</h1>
    <table>
      <tr> <td class="i"></td><td class="i"></td><td class="i"></td><td class="i"></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="o"></td><td class="o"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="o"></td><td class="o"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td class="t"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="t"></td><td class="t"></td><td class="t"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td class="s"></td><td class="s"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="s"></td><td class="s"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="z"></td><td class="z"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td class="z"></td><td class="z"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="j"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="j"></td><td class="j"></td><td class="j"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td class="l"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td class="l"></td><td class="l"></td><td class="l"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
      <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr>
    </table>
    <script src="./js/main.js"></script>
  </body>
</html>

少しわかりずらいかもしれませんが以下のような見た目になります。

f:id:mti-hackers:20171117142415j:plain

実際に並べてみるとテトリスっぽくなってきましたね。

いかがだったでしょうか？ 第1回に比べてぐっとゲームの雰囲気が出てきましたね！ 実際にWebページでは HTMLタグはより深い入れ子構造になり CSSには大量のクラスが記述されるようになります。

次回はこのブロックを実際に動かしていきます！