便利な AtomとHTML/CSSの基本の基本

この記事を読むのに必要な時間は約 3 分です。

先週に続いてHTML/CSSの基本を学んでおります。

最初はどこから学ぼうか迷うところですが、先週にコードの書き方の基本を抑えた上で、今回から実際にコードを打ってデモサイトを作っていきます。

バナー画像模写課題

まずは課題から。デザイン経験者である徳山さんが実際に作られたバナー画像を模写する課題をやってもらいました。

デザイン初心者にとっても経験者にとってもやり方を苦労しながら真似して勉強し、どうしてもできなかった箇所などを後日、本人から説明してもらうことで全員のスキルアップが最大の狙いです。

課題のバナーはこのブログにも掲載しているこちら↓

基本的な作り方は僕も理解はしているのですが、徳山さん本人から説明受けて、かなり細かい箇所まで作り込まれているので僕自身も改めて勉強になりました。

先週でHTML/CSSの書き方の基礎はおさえました。

今週からデモサイトの制作に入ったわけですが、今回はまずCSSの読み込みやリセットCSSの説明などheadタグ内についておさえました。

body内に書くタグとは違って、head内に書く内容は基本目に見えずにわかりにくいですが、ここを理解していないと、そもそもCSSやJSをHTMLに読み込み出来ないなど根本を理解せずに進めるのはよくないなと思い、まずはここからはじめました。

また、Wizcoでベースとしている教科書では、HTML内にすべてのテキスト情報を入れ込んでから一気にマークアップをするという方法が書いてあるのですが、初心者にとってその方法はミスの原因にしかならないのでWizcoでは上から少しづつコーディングしていくというやり方で学んでいきます。

先週はこのWizcoプロジェクトのプロモーション動画撮影を行いました。

Wizcoプロジェクト自体どうしてもわかりにくくて、テキスト情報や写真だけでは価値が伝わりづらいので、もっとわかりやすく興味をもってもらえるものが動画だなと思い、今回制作をお願いしました。

終始和やかな雰囲気で撮影が進みましたが、天気に恵まれすぎて疲れました・・・・。

ご協力していただいたみなさん、ありがとうございました！

枚方市在住のフリーランスWEBデザイナー。様々な業種のWEBサイトの制作から印刷物、スマートフォンアプリのUIデザインも手がける。 ITコミュニティースクール Wizcoの主宰。 WEBDAデザイン