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

さて、いよいよHTML/CSS編がはじまりました。これから7月あたまごろまでHTML/CSSの基本を学んでいきます。

その後は、いよいよ実習に入ります。

制作フローについて

いきなりHTML/CSSの知識と実践から入る前に、WEB制作のフローについてかんたんに学びました。

  1. 掲載内容や情報の整理。ヒアリングなど。
  2. サイトマップの制作
  3. ワイヤーフレームの制作
  4. デザインカンプの制作
  5. コーディング
  6. 修正・納品・公開

かなりざっくりですが、一般的にはこのようなフローだと思います。

案件によっては各工程をカットすることもあります。例えばシンプルな数ページだけのサイトの場合は、サイトマップの制作をカットすることも僕はあります。

その他、ワイヤーフレームの作り方やツールなど、僕の実際の仕事で使っているケースを紹介しながら進めました。

 Atomの導入

Wizcoではテキストエディタに Atomを導入して進めることにしました。

DreamweaverやBraketsなどありますが、DreamweaverはAdobeの契約がいりますし、ちょっと前に大規模なリニューアルがあったとはいえシンプルなエディタとは言えないかなと思います。（講義では百徳ナイフのようなものと伝えました）

最初はAtomと同じオープンソースのテキストエディタ Bracketsを導入しようと思い、僕の実際の仕事の案件でしばらく使っていたのですが、やはりAdobeさんのプロダクトならではの、動作の重さが気になって仕事にならないので導入を取りやめました。

HTML/CSSのきほん

最初なので、基本中の基本を学んでもらいました。HTMLやCSSの書き方の基本を繰り返し書いていってもらいます。

HTMLはプラグラムではなくて正確にはマークアップ言語なので慣れてしまえばそこまで難易度は高くないかなと思います。

<br />
&lt;body&gt;<br />
こんにちは<br />
&lt;/body&gt;<br />


<br />
p {<br />
color:#ff0000;<br />
}<br />

これからいろいろなタグなど覚えますが、やっぱり一番身につくのは実際に作りたいものを四苦八苦しながら作りながら覚えることだと思いますので、まずは基礎をおさえてからちょっと厳しいかもですが半ば丸投げ気味の課題も与えてみようと思います。

The following two tabs change content below.
WEBDAデザイン 岡田
Twitter のプロフィールFacebook のプロフィール

WEBDAデザイン 岡田

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