IT業界というのは世界規模であり、あまりに広大であるため、今日は正解であっても明日には不正解となっている場合があります。
これから話す内容も同義で、数年後も等しく正しいかは誰にもわかりません。
その為、当塾では用語やサービスの仕組み等を詳しくは説明せず、大まかに把握できるまでに留めております。

当塾で身に着けるべきは、プログラミングの学習方法とIT業界の慣れと理解だと考えます。
上記内容をご理解頂いた上で、講義に参加いただけますよう、宜しくお願い致します。

WEB制作の立ち位置

上の画像は中小規模のWEB制作の際の人員配置例になります。

例えば、ある企業から会社のHP制作依頼が入ったとします。
その際に相手の要望を聞き取りに行くのがディレクター、またはSEです。
依頼者にはWEBに詳しくない方も多いため、経験と知識、提案力が必要とされます。

依頼内容が固まったところで社に持ち帰り、その内容をプログラマとデザイナーに伝え、協議したうえで制作計画、見積もりを作成します。
その内容を依頼者に送り、GOサインが出たところで製作開始となります。

制作計画計画に沿って作業を割り振り、進行します。
その際になるとコーダーと呼ばれる下流行程の作業者に仕事が振られます。

ものすごく簡易的な説明ですが、大きなプロジェクトでない限りは、これに近い形が取られます。
続いて、各肩書の役割を簡単に説明します。

SE（WEBディレクター）

色々な言われ方をしていますが、要は制作プロジェクトのチーム監督です。
小さい会社であれば、管理職のような立場でしょうか。

全体を把握し、仕事を割り振る。
依頼者との折衝も行い、正しく理解し、プログラマやデザイナーに伝える。

知識と経験が必要なため、プログラムやデザインにそれなりに精通していなければなりません。
それだけでなく、チーム全体に目を配り、円滑に製作が進行されるようにコントロールする能力も必要です。

ホームページ制作SEの業務内容と実態とは | エンジニア就活
SE（システムエンジニア）とは？SEの仕事内容と年収

WEBプログラマ

サービスに機能を与えるため、プログラミングする人。
受けてきた依頼内容に応じた技術を身に着けておく必要があります。

もしその知識がなかったとしても、その製作中にで覚えられるだけの知的好奇心と向上心があればなんとかなる場合もあります。
人手が足らなければ、コーダーの役割を兼用します。

Webプログラマーとは？Webプログラマーの仕事内容と年収
Webプログラマーとは – Web・IT業界におけるWebプログラマーの役割やキャリアについて解説 | マイナビクリエイター
Webプログラマーの仕事内容、なるには、給料、資格など | 550種類の職業や仕事を紹介 Career Garden

WEBデザイナー

依頼者が求める見た目を作り、ユーザーが満足するデザイン配置を行う人。
ユーザービリティと呼ばれる使い勝手をデザインで満たすのもデザイナーの役目です。

優秀なデザイナーは、コーディングの効率化も考えたデザインができるという点で重宝されます。
こちらも人手不足であれば、コーダーの役割を兼用します。

Webデザイナーとは？Webデザイナーの仕事内容と将来性
Webデザイナーってどんな仕事をするの？-独学!未経験からWebデザイナーになる!!

コーダー

コーディングをする人。
プログラマ、デザイナーの殆どがここから始めるほど、重要な作業者であり、WEBの基礎を学ぶ上で素通りできない役割です。

HTMLコーダー – Wikipedia
コーダーとは？仕事内容や将来性をご紹介
《よくわかる》コーダーとプログラマーの違い | MOREWORKS

コーディングとは、HTMLやCSSのマークアップ言語やJavascript言語を用いて、設計図通りになるようコードを記述し、ブラウザで表示できる状態とすることを指します。

コーディングに必要な3言語

• HTML
• CSS
• JavaScript

WEBページというのは、上記の3言語から成り立っています。
すなわち、この3言語が使えれば、WEBページが作れるということです。

HTML

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、WEBページを作るための最も基本的なマークアップ言語のひとつです。
これがすべての基礎であり、土台となります。

今さら聞けない！HTMLとは【初心者向け】 | TechAcademyマガジン
HTMLとは？－HTMLの基本

CSS

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、WEBページのスタイルを指定するための言語です。
装飾するための言語なので、これがなくともWEBページは表示されるが、見た目がよろしくありません。

今さら聞けない！CSSとは【初心者向け】 | TechAcademyマガジン
CSSとは？－CSSの基本

JavaScript

JavaScriptはプログラミング言語であり、ユーザー側のWEBブラウザと、WEBサイトまたはWEBサービスの相互間のやりとりを、円滑にするために使われています。
Javaと名前が似ているが、全く異なるプログラミング言語です。

JavaScriptとは何なのか！初心者向けに徹底解説 | TechAcademyマガジン
JavaScript – Wikipedia

タスクバーとは、PC下部にある、黒い背景部分の事で、自分が立ち上げているアプリやピン止めした状態のアプリが表示されてたり、検索窓があったりします。
タスクバーは、自分が作業しているフォルダやブラウザ、ソフトなどの状態を表しており、現状が一目で理解できるのが良いと思うので、カスタマイズをしてみましょう。

タスクバーの表示を隠す

検索バー『Cortana』

タスクバーの黒の部分で右クリック＞Cortana(T)＞表示しない(N)をクリック。
※この機能を使いたい場合は、[Windows]＋[S]キーを押すと、検索バーが表示されます。

タスクビューボタン

タスクバーの黒の部分で右クリック＞タスクビューボタンを表示をクリック。
※この機能を使いたい場合は、[Windows]＋[Tab]キーを押すと、タスクビューが表示されます。

その他のボタン

ボタン上で右クリック＞タスクバーからピン留めを外すをクリック。

タスクバーの表示を切り替える

人それぞれの好みはあると思いますが、タスクバーボタンは結合していない方が、開いたフォルダやブラウザ、Excel等のソフトの確認がしやすいです。
そこで、タスクバーボタンのサイズ変更、結合の有無を調整しましょう。
タスクバーの黒の部分で右クリック＞タスクバーの設定(T)をクリック。
下の様な設定画面が開いたら、好みに合わせて設定を行いましょう。

タスクバーにクイック起動を表示する

クイック起動を表示すると、タスクバーをランチャーのように使えます。
タスクバーの黒の部分で右クリック＞ツールバー(T)＞新規ツールバー(N)…をクリック。
フォルダー選択画面が表示されるので、フォルダーにshell:Quick Launchを入力して [フォルダーの選択] をクリック。
タスクバーを固定しているときはタスクバー上で右クリック＞タスクバーを固定する(L)をクリックし、Quick Launchを好みの場所に移動します。
その他、Quick Launch上で右クリックすることにより、表示設定が変更できます。

Windows 10 タスクバーにクイック起動を表示する

エディタは複数インストールしておこう

初受講時の準備としてAtomエディタを推奨してましたが、実際は複数あったほうが便利です。
目印として数値や文字に色分けするのと同じで、エディタも用途に応じて使い分けてもいいと思います。

エディタはそれぞれ癖があったり、見易さに違いがあるので、自分が一番使いやすいものを選べるように、複数のエディタに触れてみましょう。
無料テキストエディタの解説は以下を参考にしてください。

拡張子の表示

プログラミングをする上で、必須設定となるのが拡張子の表示です。

拡張子とは、ファイルの種類を識別するために使われるファイルの末尾にある「.（ピリオド） + 英数字3文字」のことです。
例えば、テキストファイルだと「.txt」、エクセルファイルだと「.xls」が拡張子ですね。

上の図を参考に手順を解説します。

1. エクスプローラ（フォルダ）を開く
2. 左上のタブにある『表示』の文字をクリック
3. サブメニューの『ファイル名拡張子』をクリック

拡張子の表示が確認できたら完了です。

ファイルとエディタの関連付け

テキストファイルをダブルクリックすればメモ帳が開くように、ファイルはそれぞれプログラムに関連付けられています。
プログラミングの場合、主なもので『.html』ファイル、『.css』ファイル、『.js』ファイルがあります。
これらのファイルはテキストエディタと関連付けが出来てなければ、対応プログラムを選択する必要があります。
そこで、使いやすいエディタとプログラミングファイルを関連付ける方法を紹介します。

対象のファイルを選択＞右クリック＞プロパティ(R)をクリックで、以下の画像のようになります。

プログラム：変更＞対象のプログラム＞OKをクリック。
アイコンが変更されたのを確認したら『OK』をクリックしてウインドウを閉じて関連付けは完了です。

Windows 10 ファイルの関連付けと既定のプログラムを変更する

コピペでHTMLファイルを作る

簡単な教材を作成します。
以下のコードを利用し、HTMLファイルを作って動作させましょう。

1. フォルダ名『lesson』を作成
2. テキストエディタを開く（メモ帳でも可）
3. 黒のコード表の上でダブルクリックし、Ctrl + A で全選択
4. Ctrl + C でコピー
5. テキストエディタ上で Ctrl + V 貼り付け
6. Ctrl + S でファイル名を『lesson_01.html』として保存
7. 出来上がったファイルをブラウザ上にドラッグ＆ドロップで表示

※拡張子が表示されていない場合は、必ず表示するように設定しましょう。
Windows10 – ファイルの拡張子を表示/非表示にする – PC設定のカルマ

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>講義1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
	<div class="panel panel-warning">
		<div class="panel-heading">
			<h3 class="panel-title">ここに貼り付けよう</h3>
		</div>
		<div class="panel-body">
			<div class="form-group">
				<textarea class="form-control" rows="5" id="put-data"></textarea>
			</div>
			<div class="form-group">
				<button type="button" class="btn btn-lg btn-warning send-data">送信</button>
				<button type="button" class="btn btn-lg btn-default reset-data">削除</button>
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-body">
			<div id="view-data">
				<h2 class="text-center">ここに表示</h2>
			</div>
		</div>
	</div>
</div>
<script>
// JavaScript Document
jQuery(document).ready(function($) {
     
    //put_data
    $(document).on('click','.send-data',function(){
        var data = $('#put-data').val();
        $('#view-data').html(data);
    }); 
     
    //reset_data
    $(document).on('click','.reset-data',function(){
        $('#put-data').val('');
        $('#view-data').html('<h2 class="text-center">ここに出る</2>');
    });
});
</script>
</body>
</html>

まずは、コピーとペースト動作のみ利用して、プログラムを動作させてみましょう。

1. ページ上で右クリックを押し、『ページのソースを表示』をクリック
2. Ctrl + A で全選択
3. Ctrl + C でコピー。
4. Ctrl + V 貼り付け（ペースト）。
5. 下の枠内に貼り付けたら『表示』ボタンをクリック。

※Macの場合はcommandキー

どうしてもうまくいかない人は、下のページを利用してください。
教材WEBページ

どうでしょうか、今のページと同じものが枠内に表示されたはずです。
ここで何よりも重要なのは、コーディングはコピペでも成立するという事です。

この発言は賛否ありますが、私はコピペで済むものはそれでいいと思います。
HTMLタグなどの覚えなければいけないものはたくさんありますが、それらはコーディング作業をこなしていくうちに、勝手に覚えていきます。
始めからガチガチに記憶しようとせず、手を動かし続ける癖をつけましょう。

ショートカットキー

キー操作	目的
Ctrl + A	ドキュメントまたはウィンドウのすべての項目を選択する
Ctrl + X	選択した項目を切り取る
Ctrl + C (または Ctrl + Ins)	選択した項目をコピーする
Ctrl + V (または Shift + Ins)	選択した項目を貼り付ける
Ctrl + Y	操作をやり直す
Ctrl + Z	操作を元に戻す
Ctrl + R (または F5)	作業中のウィンドウを最新の情報に更新する

先程使ったもののほかに、上記のようなショートカットキーが存在します。
とても重要なので、これらショートカットキーは自然と使えるようにしましょう。

Windows のキーボード ショートカット
Macにおける時短ショートカット | TIPS | BOEL Inc. ボエル

初級コース一回目という事で、WEB制作の過程や、プログラマなどの役割毎の仕事の割り当て、それからコーディングと紹介しました。

特に重要なのはコーディングです。
プログラミング全体でみると知らなくてもいい分類になりますが、WEBに関わるとなると、必須の知識です。

そして、パソコンの環境設定。
毎日触るからこそ設定をしっかり行い、作業しやすく整えておくと効率が上がります。

ショートカットキーについては、プログラミングとは無関係にパソコンを扱う上で必要な技術なので、普段から使うようにしましょう。

プログラミングを身に着けるうえで重要なのは、自主学習です。
自主的に学習サイトを開いて手を動かすことがなければ、何も残りません。

まずは、以下のページにある『HTMLとCSS』の項目にあるリンクを開いて、学習してみましょう。