なんだか楽しそうなHTML5・CSS3

ICTスペシャリスト養成講座の第2回目のテーマは「あらためて見直す、HTML5・CSS3」ということで、前回のWebサイト制作の概論の次にふさわしい内容ですね。

今回の講師は、鹿児島を拠点にフリーランスのHTMLコーダーとしてお仕事をされている森 史憲さんです。

(自己紹介に「カレー・地ビール・チョコレートをこよなく愛する丸めがねの九州男児」と書かれていたので、受講生の方が休憩時間にチョコをおすそ分けして、地ビールの話で盛り上がっているのが、なんだか楽しそうでした。)

本日の講義のゴールは「HTML5・CSS3でコーディングするのはなんだか楽しそうだぞ、と感じること!」だそうです。

 

意外と知らないHTML5・CSS3の裏側

講義の出だしはクイズからスタート。1つ目の質問は「HTML5・CSS3を使うことで改善されることってなんでしょうか?」というもの。答えは「今までより適切なマークアップができるようになる、HTML, CSSだけでできることが増える、コード量が少なくなる、画像の切り出しが少なくなる、レイアウトが楽になる」とのことです。効率化できる方向に進んでいるのですね。

2つ目の質問は、少し難問。「HTML5が作られる際に意図していたことはどんなことでしょうか?」。これに答えてくださったのは1回目で講師を勤められていた黒葛原道さん(後ろで講義を見学されていました)。答えは「Webアプリケーションを作りやすくすること」。HTML5が単なる文書やデータを作る言語ではなく、Webアプリケーションを作る言語となることを目指したそうです。

 

HTML5の用語、正しく言えますか

さて、用語について正しく理解している方はどれくらいいらっしゃるのでしょうか。

「要素」「タグ」「属性」「コンテンツ」を下記のHTMLでそれぞれ説明してみました。

<h1 class=”heading”>あらためて見直す、HTML5・CSS3</h1>:要素

<h1>:開始タグ
</h1>:終了タグ
class:属性名
heading:属性値
あらためて見直す、HTML5・CSS3:コンテンツ

 

このように一つ一つ丁寧に解説してくださる森さん。時にはおもしろポイントをコードの中にまじえて、みなさんの笑いをとっていました。

<figure>
<img src=”img.png” alt=”チキン南蛮カレーの写真”>
<figcaption>
宮崎はカレー倶楽部ルウのチキン南蛮カレー。
美味しすぎルウ!
</figcaption>
</figure>

 

CSS3で変わったこと

後半はCSS3について解説していただきました。CSS3で変わったことはまず「要素を減らすことができる」、つまり背景画像を表示するために要素をたくさん追加する必要はなくなりました。また、「class名を追加しなくても要素を絞りこめる」「画像を適用しなくても表現できる」「レイアウトが楽にできる」「JavaScriptを使わなくてもできる」などがあげられるそうです。

 

次回の講義も森先生が担当。内容は、「HTML5.1 / 5.2、HTML5 API、新しめのCSSのプロパティのお話をします」とのことです。それまでにしっかり復習しておきたいところです。

関連記事

  1. CSSフレームワーク 「Bootstrap」を活用しよう

  2. コーディング実践