こんにちは、株式会社Gizumoの安藤です。

「どうやったらWebエンジニアになれるの？」「学習方法がわからない…」とプログラミング学習に苦戦しているエンジニアの卵の皆さんのためにこの記事を贈ります。

Webエンジニアを目指す方であれば必ず知っておくべき内容です。
まずはこちらの記事に沿って実際に手を動かしてみましょう。

筆者自己紹介：
安藤 大地（取締役 / COO）
お客様先に常駐し、バックエンドエンジニアとして開発支援に携わった後、本社勤務へ転属。バックエンドメンターとして研修生や社内エンジニアの教育を担当し、約200名のエンジニア教育を手掛けました。 現在は取締役 / COOとして教育事業の全体統括と開発事業のプロジェクトマネジメント、AI技術の研究開発に携わっています。

対象読者： Webエンジニア志望で学習を始めたばかりの方（全く未経験でも大丈夫！）
PC推奨スペック：CPU 2コア 2GHz以上、メモリ8GB以上 or Mac
学習推奨サイト：ドットインストール
費用：月額1,280円（ドットインストールの月額課金費用）

Webエンジニアとは

Webエンジニアは、皆さんが普段お使いのインターネットを通じて使う便利なWebサービスを開発することを仕事としています。

Webエンジニアは大別するとフロントエンドエンジニアとバックエンドエンジニアに分かれます。
フロントエンドエンジニアはユーザーに見える部分の開発をします。バックエンドエンジニアはサービスが自動で動く裏側の仕組みを開発しています。最初からどちらもできるエンジニアになることは難しいため、どちらからキャリアをスタートしたいか検討してみてください！

例えば「デザインがきれいなWebサイトや凝ったアニメーションの演出があるWebサイトを作ってみたい」という方はフロントエンドを志望してみるといいかもしれません。また、「ECサイトのようなユーザーに便利なサービスの開発に携わりたい」「将来的に自分のサービスを開発したい」という方はバックエンドを志望してみるといいと思います。

今回の〈ファーストステップ編〉では、フロントエンド・バックエンドどちらを志望する方にとっても基礎となるHTML/CSSについて学習していきます。

「HTML/CSSはもう完璧！」という方は、こちらの〈フロントエンド/バックエンド編〉も進めてみてください！

HTML/CSSとは

HTML

HTML（エイチティーエムエル）はWebページに表示する文字（タイトル、リスト、リンク）や画像などを定義して、ページの骨組みをつくるものです。

CSS

CSS（シーエスエス）は、HTMLで作ったページの骨組みに対して装飾をしていくものです。このCSSを使えば幅・高さ、背景色・背景画像、枠線、余白、文字の大きさ・太さ・色などを自分の好きなようにデザインすることができます。

※HTMLとCSSはマークアップ言語と呼ばれるもので、プログラミング言語ではありません。HTMLとCSSは条件によって処理を分岐させたり、処理を繰り返すといった「コンピューターへの命令」ができないのです。

HTML/CSSの学習ステップ

それでは学習に入っていきましょう。

今回はドットインストールというサービスに沿って学習していきます。（有料コンテンツが含まれます）

ドットインストールについて：
https://dotinstall.com/

ドットインストールは、豊富な3分動画を見ることで、はじめての人でも無理なくスキルを
身につけていくことができるプログラミング学習サービスです。
HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。
月額1,280円のサブスクリプションで、すべてのコンテンツの利用が可能なお得なサービスです。

まずは『Webサイトを作れるようになろう』レッスンを通じて、Web制作の流れを体験してみましょう。

Web制作の流れを体験しよう

• はじめてのWeb制作（全11回）

どんな流れでWeb制作を行っていくのか、イメージはつきましたか？
次に、エディタと呼ばれるプログラミングを入力するためのツールをダウンロードして初期設定をします。

学習環境を整えよう ※​お使いのOSを選択してください

• Web制作の準備をしよう Windows編(全10回)
• Web制作の準備をしよう macOS編(全10回)

エディタの準備はできましたか？
それでは用意したエディタを使って、下記の順番にHTMLとCSSのレッスンを進めてみましょう！

もっと詳しくHTML/CSSを学んでみよう

• 詳解HTML 基本タグ編（全27回）
• 詳解HTML フォームタグ編（全13回）
• 詳解CSS 基本スタイリング編（全27回）
• 詳解CSS 応用スタイリング編（全27回）
• 詳解CSS入門 セレクター編
• 詳解CSS入門 フレックスボックス編(全22回)
• 詳解CSS入門 アニメーション編(全19回)
• 詳解CSS入門 メディアクエリー編(全14回)

パズルみたいでおもしろくなってきたら嬉しいです。
全然わからなくてピンと来ない方は、何度か繰り返し学習してみると段々コツが掴めてくるはずです！

今回の〈ファーストステップ編〉はこちらで以上です。

ここまで学習してみてどうでしたか？
少しでも楽しいと感じたようであれば、是非エンジニアを目指して頑張っていただけたらと思います！

また、HTML/CSSについて理解が深まった方は、もう少し先まで学習を進めてみましょう。
学習ロードマップ〈フロントエンド/バックエンド編〉では、JavaScriptやPHPなどのプログラミング言語についても載せていますので、引き続きご覧ください！