Webエンジニアになりたい人に向けた学習ロードマップ〈ファーストステップ編〉

こんにちは、株式会社Gizumo教育担当です。

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

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

対象読者：

Webエンジニア志望で学習を始めたばかりの方（全く未経験でも大丈夫！）

PC推奨スペック：

CPU 2コア 2GHz以上、メモリ8GB以上 or Mac

学習推奨サイト：

ドットインストール

費用：　

月額1080円（ドットインストールの月額課金費用）

Webエンジニアとは

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

Webエンジニアは大別するとフロントエンドエンジニアとバックエンドエンジニアに分かれます。

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

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

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

HTML/CSSとは

HTML

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ブラウザのタブに表示されるタイトル</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div>はじめてのマークアップ</div>
</body>
</html>

CSS

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

@charset "utf-8";
div { /* divと書いてあるものが、このカッコ内のスタイルを適用させるターゲット（セレクタ） */
  width: 300px; /* セレクタの幅の指定 */
  color: #fff; /* セレクタの文字の色の指定 */
  font-weight: bold; /* セレクタの文字の太さを指定 */
  font-size: 20px; /* セレクタの文字の大きさを指定 */
  background-color: #555; /* セレクタの背景色を指定 */
}

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

HTML/CSSの学習ステップ

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

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

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

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

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

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

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

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

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

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

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

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

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

Webエンジニアになりたい人に捧げる学習ロードマップ

ENTRY
ENTRY