これからWebデザイナーのスキルを身に着けて、副業や在宅ワークでお金を稼ぎたい！
そんな方は、Webサイト制作の基本であるHTML、CSSの勉強から始めましょう。
今回の記事では「HTML、CSSのコーディングとは何ぞや？」「どうやって勉強すれば良いの？」といった疑問にお答えしていきます。
HTML、CSSのコーディングとは？
コーディングとは、Webサイトを制作するための工程の1つです。
Webサイトを制作する工程は、大きく以下の3つに分かれます。
- デザイン作成
- コーディング
- データのアップロード
Webサイトのデザインは、基本的にPhotoshop（フォトショップ）やillustrator（イラストレーター）といった画像処理ソフトで作成します。
そして、Webサイトを作成するための言語であるHTML、CSSを打ち込み、デザインにそっくりなWebサイトを構築していきます。（この作業をコーディングと呼ぶ）
※コーディングの事を「マークアップ」「デザインのWeb化」と呼ぶこともあります。
HTML、CSSは主に以下の役割を持っています。
HTML・・・webサイトにテキストや画像などのパーツを置く
CSS・・・HTMLで置いたパーツに装飾（色を付けたり、大きさを変えたり）する
世界中に存在するWebサイトは、基本的にHTML、CSSを使用して作られています。
webサイトって、wordとかパワポみたいなのでサクサク作れないの？
コーディングを行わずにwebサイトが作れる便利なソフトも有りますが、ソフト側で用意されたテンプレートのようなものを使用してwebサイトを作っていくので、「ここのパーツはもう少し小さくしたい・・・」といった細かな調整が出来ない欠点があります。
こうした理由から、自分でHTML、CSSのコーディングを行い、顧客のこだわりや要望にピッタリとお応えしたWebサイトを制作するスキルが求められる訳です。
HTML、CSSって未経験からでも出来るの？
できます。実際に私も未経験から勉強を始めて、2ヶ月後にはクラウドソーシングサイトでWebサイト制作案件を受注しました。
HTML、CSSのコードを見ると、「プログラミングみたいで難しそう…」と感じるかもしれませんが、HTMLとCSSは厳密にはプログラミング言語では無いんです。
これに対してHTML、CSSは例外を除いて計算を行いません。
「HTMLがパーツを置き、CSSがパーツに装飾をする。」という単純な関係性にあります。
CSS「写真Aは横幅350px（ピクセル）にします！テキストBは太字にします！」
HTML、CSSの勉強は無料で始められる！
何か新しい事を始めるのって、お金が掛かりますよね。
野球だったらバッド、グローブ、スパイク、ボールを買わなければいけませんし、将棋だったら駒や将棋盤を買わなければいけません。
でもご安心下さい！HTML、CSSはパソコンとインターネット環境さえ揃っていれば無料で始められます。
何せHTMLやCSSは競技人口（スポーツ風に言うと）がとてつもなく多いですので、インターネットで「HTML CSS 入門」などと検索すれば、有益な情報がた～くさん出てきます。
具体的には、後ほどご紹介する「プロゲート」という学習サイトや、エンジニアの方が趣味で書いているブログの記事、プログラミング学習サービスを行っている会社の記事（HTML、CSS系の情報は無料で公開している会社が多い）などです。
無料なのは嬉しいけど、始めるまでの準備とか大変そう・・・
そんな方にはProgate（プロゲート）というサイトがおすすめです。
こちらのサイトの特筆すべきは、ブラウザ上（サイト内の入力欄に直接コードを打ち込んでいく形式）でプログラミングの学習が出来ちゃう点です。
自分のPCにソフトをインストールすること無く、すぐにHTML、CSSの勉強を開始する事が出来ます。
プログラミング言語の学習用コンテンツが多いですが、HTML＆CSSのコースも用意されています。しかも「HTML & CSS 初級編」というコースは無料で受講できます。（月額980円の有料会員になると中級編以降を受講できます）
会員登録～学習開始まで5分も掛からず辿り着きますので、「とりあえず、HTML＆CSSがどんなものか触れてみようかな。」という方はサクっと試されてみてはいかがでしょうか。
あなたのしばらくの目標は「ポートフォリオ作り」です！
HTML、CSSの勉強を開始してからの当面の目標はポートフォリオ作りです。
ぽーとふぉりお・・・？
ポートフォリオとは、クライアントに自分のスキルをアピールするために見せる作品のことです。
経験者の場合は過去に受注した案件のWebサイトを掲載しますが、未経験の場合は「架空の化粧品ブランドのサイト」や「架空の飲料水メーカーのサイト」などを制作して公開します。
自分でデザインを考え、そしてコーディングをして1つのサイトを作り上げるため、始めはとても苦労しますが、ポートフォリオの制作を通すことでスキルが大幅に伸びることを実感するでしょう。
今後、案件に応募する際にクライアントにアピールするための材料にもなりますので、少しでもHTML、CSSの基本がわかったら早めにポートフォリオ作成に取り掛かるのがオススメです。
ポートフォリオの作り方については以下の記事で詳しく解説しています。
しっかりと確実に学びたい方はオンラインスクールの選択肢もあり
独学で勉強するよりも講師付きで確実に教わりたいという人には、有料になりますが、TECH ACADEMYのWebデザインコースがオススメです。
自宅完結型のオンラインスクールなので、スクールに通う時間の取れないサラリーマンや、子育てで忙しい主婦の方でもプロから教わることが出来ます。
HTML、CSSの他にもPhotoshopを使った画像加工や、Webサイトに動きを出すためのJavascriptというプログラミング言語も併せて勉強できるので、最短で結果を出したい！という方も検討されてみてはいかがでしょうか？
TECH ACADEMYの公式サイトを見るデベロッパーツールの使い方の勉強も優先度高し！
HTML、CSSについて「なんとな～くわかってきた！」というレベルになったら、出来るだけ早くデベロッパーツールの使い方についても覚えるべきです。
デベロッパーツールの使い方を覚えることで、効率的にWeb制作を進められるようになるだけでなく、これからのHTML、CSSの勉強効率も大幅にアップします。
詳細は【Web制作入門】デベロッパーツールの使い方（特に必要な３つを厳選）の記事でご紹介しています。
まとめ
- WEB制作を未経験から始めたい人は、コーディングの勉強から始めよう
- コーディングとはHTML、CSSを使ってコードを打つこと
- HTML、CSSは習得難易度が低い
- HTML、CSSは無料で始められる
- 独学する人にはProgateがすごくオススメ
- 講師から学びたい人はTECH ACADEMY
などを活用してみよう
- デベロッパーツールの勉強も優先度高し
それではあなたの良きWebデザインライフを願って、今回はここで失礼します！