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

投稿日: カテゴリー: 未分類
Pocket

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

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

第1部 【入門編】Web開発未経験者
第2部 【HTML&CSS基礎編】簡単な仕組みはわかっているという人向け
第3部 【HTML&JavaScript基礎編】簡単な仕組みはわかっているという人向け
第4部 【応用編】Web開発経験者向け

入れ子になったHTMLタグ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Pocket