HTMLとCSSはWEB制作の基本となる部分で、ウェブデザイナーなら必ず覚えておいてほしい知識です。
今回は現役WEBデザイナーが、初心者の方がHTMLとCSSを独学で覚える勉強法を紹介します。
また、WEB制作の初心者の方に向けて、やっておいた方がよいWEBの知識が身につく参考書も紹介します。
HTML・CSS独学に役立つオンライン勉強法
HTMLとCSSの基礎を勉強する最も効率的な勉強法は、オンラインの「Progate」を使った学習です。
Progateはオンラインのプログラミング講座で、基礎講座なら無料登録で利用できます。
- HTML & CSS 初級編
- HTML & CSS 中級編
- HTML & CSS 上級編
レベル別に学習できるので、全くの初心者でも無理なく勉強することができました。
HTMLの基礎であるタグから、CSSのプロパティまで段階的に覚えられるので参考書よりも理解度が高かったです。
最新の主流である、レスポンシブデザインの学習ができるのも役立ちました。
これだけで全てをマスターできるわけではありませんが、HTMLとCSSの基礎を理解するには十分です。
基礎ができたら、サンプルのソースを自分で修正してタグやプロパティを覚えると効率的です。
色の変更や文字サイズの変更など、自分でコードを変えると早く覚えられます。
Progateで基礎はできますが、HTMLとCSSを使いこなすために参考書やリファランスのサイトも普段から利用するようにしましょう。
HTMLとCSSの独学に役立つ学習サイト【リファランス】
HTMLタグやCSSの基本的なプロパティは使っていけば覚えられるのですが、数が多いので調べるためのリファランスサイトをブックマークしておくと便利です。
独学に役立ったHTMLとCSSの学習サイトを紹介します。
HTMLクイックリファレンス
HTMLとCSS辞典として参考になるのが、HTMLクイックリファレンスです。
タグやプロパティを目的やABC順に解説しているので、とても使いやすいです。
また、対応ブラウザについても記載されているので、実践でも役立つサイトになります。
HTMLやCSSでわからないことがあれば、とりあえずここで調べれば解決できます。
サルワカ
HTMLとCSSによる様々な要素のデザインサンプルが紹介されているサイトです。
とても綺麗なサイトで、吹き出しやボックスデザイン、見出しまで多数のサンプルがあるので初心者の方にも参考になるノウハウがたくさんあります。
デザインを見ると「CSSでここまで多様なことが出来るのか！」と思わず感嘆するに違いありません。
嬉しいことに、どのサンプルもコピペで使用可能です。
初心者向けというよりは、初中級者以上向けになりますが役立つことが多いのでチェックしてください。
Web Design Clip
Web Design Clipは、クリエイティブ性の高いWebサイトを集めたギャラリーサイトです。
HTMLとCSSの基礎ではないのですが、サイトデザインの参考になるのでピックアップしました。
自分が気に入ったサイトを「MyClip」として保存することもできるので、作ってみたいWEBサイトがあればチェックしておくと役立ちます。
自分で作ったサイトを提出することもできるので、力試しに利用するのもおすすめです。
WEB制作（HTML・CSS以外）で役立った参考書
Progateのようなオンライン学習ツールだけでも、HTML・CSSを学ぶことはできます。
ただ、技術だけを覚えるよりも、WEB全体を知っておくと将来的に就職した時に役立ちます。
HTMLとCSSを独学で勉強する方に、WEB業界を理解する意味で読んでほしい参考書を紹介します。
Webデザイン必携
独学のWEB学習で不足する、イラストレーターやフォトショップの勉強に役立ちました。
現場ではイラレやフォトショを使うのが一般的なので、そういった現場目線の学習ができます。
また「やるべきこと」と「やってはいけないこと」も明記されていて、終わったころにはWEBデザイナーとして一歩上のレベルになることができます。
Webディレクションの新・標準ルール
WEBディレクター向けの本になりますが、WEB全般の知識や現場でどんなことを意識してWEBサイトを作っているかの参考になりました。
WEBディレクターが考えていることがわかれば、実際の業務でも役立ちます。
Web業界の第一線で活躍する著者陣が執筆しているので、より実践的・具体的なことを学習できます。
沈黙のWebマーケティング
WEBサイトを作った後にどう運営していけばいいのか、さらにwebデザインの目的やどうやって広報していくかなどWEBマーケティングを勉強することができました。
WordPressテンプレート「賢威」を手がけている会社代表の著書で、ビジネス書として面白い本です。
あと、TwitterやFacebook、はてブなどのSNSを使った戦略はとても役立ちました。
WordPress標準デザイン講座
WordPressについては、紹介しようか本当に迷いました。
ただ今のWEB制作はWordPressで作られているWEBサイトも多く、避けて通れないので紹介することにしました。
WordPressに関しては、奥が深く初心者の方には理解できないことも多いのですが、こういったCMSでWEB制作することも覚えておいてください。
内容的に一番わかりやすいWordPressのデザイン参考書ですが、難しかったら現場に出てから勉強してもいいと思います。
HTML・CSS独学後はWEB制作会社でスキルアップ
HTMLとCSSの独学からスキルアップするためには、実践的なデザインやコーディングが必要不可欠です。
独学でもスキルアップできますが、WEB制作会社に就職・転職してHTMLとCSSを使ったほうが効率的に実力を伸ばすことができます。
デザインは日々の修練と時代の流れについていく必要がありますが、これも仕事で身につきます。
WEBデザイナーやコーダーは、中小のWEB企業で求人数も多いので基礎が理解できたら現場に出てみて下さい。最初は辛いですが、自分で作ったデザインが世界中の人に見てもらえると感動を覚えます。
IT業界は需要が高く、WEBを主体としている企業も多いので、早い段階からそういった企業でスキルアップするのが得策です。
フリーランスとして活動するためのスキル
WEBデザイナーでフリーランスとして活動している人が増えてきました。
実際に、フリーランスとして活動するためには、どんなことが必要か説明します。
フリーで活動するのに必要なスキル
基本的には、デザインとコーディングができればフリーランスとして活動できます。
ただしライバルが多い業界なので、スキル不足だと仕事が取れずに苦戦することになるので注意してください。
目安としては、WEB制作会社などで3～5年くらい仕事をすれば、一人でもできるレベルになれると思います。
仕事を受注する方法
WEB業界の経験が長いデザイナーであれば、しっているWEB制作会社などから依頼も来るので仕事はコンスタントにあると思います。
それ以外で仕事を受注する方法としては、クラウドワークスなどのクラウドサービスを利用するのが一般的です。
コンペになることも多いですが、スキルがあれば仕事を取れるようになってきます。
ただし単価が安いので、個人的にはWEB制作会社とタッグを組んで仕事をするのがおすすめです。
可能であればWordPressを覚えること
WEB業界で働くのであれば、WordPressは必ず覚えておいた方がいいでしょう。
今のホームページは、WordPressで使っているものが多く、デザイナーでもソースをいじることがあるからです。
WordPressを使えなくても仕事はできるでしょうが、できるようになると仕事の幅がグッと広がります。
ただ簡単ではないので、まずはHTMLとCSSを覚えてからWordPressに取り組むようにしてください。