Slide

【飯の食えるコーディング入門】
2013/04/09

自己紹介
山本卓也
1981年8月生まれ
2004年4月株式会社リクルート
2006年9月株式会社イノセントグリーン
■WEBディレクター
■マークアップエンジニア（コーダー）
千葉県幕張出身 (妻1人子2人)
これまで約300サイト
5000ページくらい
作りました。

今日の目的
HTMLがまったくわからないというところから
WEB制作企業の戦力になるようになる。
最短距離で。
のWEB制作スクールで教える順序とは違って、実践に即したものになります。
戦力になる＝制作の現場で役に立つ＝お金がもらえる
新人が入ったときに、なるべく早く戦力になってもらうために教えている手順です。

必要スキル
★ タイピング（普通くらいに）
まだの人はこの２つを身につけてからにしましょう。
・僕はタイピングはゾンビを倒していくやつで身につけました。
・検索は、普段からネットで調べ物していれば自然と身につきます。
★ 検索スキル（知りたいことをググれる程度）

コーディングの位置づけ
WEBサイト制作の流れ
お客さんの
ヒアリング
ワイヤーフ
レームを作る
デザイン
つくる
コーディング
する
チェックして
納品・お金も
らう
WEBディレクターデザイナーコーダー
マークアップエンジニア
それぞれ向き不向きがあるから、自分にあった仕事をするのがイチバン

HTMLを見てみよう
AEONさんのソースコードを見てみよう。
ソースコード
WEBサイトを作っている文字たちのことをソースコード（ソース）と呼びます。
ページを開いて、右クリック→ソースを表示で見ることができます。

コーダーに向いている人
・ひとりでもくもくと作業しているの
が嫌いじゃない
・パズルゲームが嫌いじゃない
・手仕事が好き

この順序で覚えれば◎
LV1 HTMLの基本タグを5,6個覚える。
LV2 デザインの切出し（スライス）
を覚える
LV3 cssの基本の7,8個覚える。
今日はココまで
時給800円くらい稼げる
・
・

LV10 ★★★
弊社ではこのような順序で教えています。
最速で即戦力になってもらうための順序です。
LV4 細かな実例を覚える。
という順序で覚えていけば、戦力になりながら、
スキルアップしていけます。

準備
先日メールでお送りしたファイルの
index.htmlを、ブラウザとメモ帳の両方で
開いてください。
ダウンロードしていない方はUSBメモリをお渡しします。
・右クリック → メモ帳で開く
・index.htmlをブラウザにドロップ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>ここにタイトルを入れます。</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
ここにHTMLタグを書いていく
</body>
</html>
全
無
視
で
OK

「ここにHTMLを書いていく」を消して、
以下を記入して上書き保存。
僕の名前は山本です。
31才です！
ブラウザを更新して変わったか確認
F5がブラウザ更新です。
macの場合はcommand + R
ctrl + s で上書き保存です。覚えておくと作業がスピードアップ！

WEBサイトの構成とは
画像と文字とリンクでできている
それだけ
なので、まずはそれだけ覚えれば作れます。

<br>
<img>
<a>
<p>
<table>
HTMLの基本タグを5,6個おぼえる。
今日はこれだけ覚えます。
1つ3分程度で覚えていきます。

< br> 改行タグ
僕の名前は山本です。<br>
31才です！

< img> 画像タグ
31才です！<br>
<img src=”inu.jpg”>
<img src=”画像ファイル名”>
<img src=”photo.jpg”>

< img> 画像タグ
画像ファイルがフォルダに入ってるとき
<img src=”img/photo.jpg”>
フォルダ名＋ / ＋ファイル名

<a> リンクタグ
31才です！<br>
<img src=”inu.jpg”><br>
<a href=”page.html”>ねこのページはこちら</a>
<a href=”ページファイル名”>こちら</a>
<a href=”page.html”>続きはこちら</a>
<a href=”http://yahoo.co.jp”>Yahoo!</a>
こちら閉じタグ
という

<table> 表
<table>
<tr>
<td>身長</td><td>153cm</td>
</tr>
<tr>
<td>体重</td><td>52kg</td>
</tr>
</table>
本日最難関！
身長 153cm
体重 52lg
身長 153cm
体重 52lg
最初は混乱しますが、
5つくらい書けば慣れます。

<table> 表
31才です！<br>
<img src=”inu.jpg”><br>
<a href=”page.html”>ねこのページはこちら</a>
<table border=”1”>
<tr>
</tr>
<tr>
<td>体重</td><td>52kg</td>
</tr>
</table>

これを作って
ください
課題
制限時間：15分

ここまででも仕事ができる
「流しこみ」
技術を持ったコーダーが作ったページをもと
に、似たようなページを量産するお仕事。

実際にお願いした流しこみ例
流しこみ、できます
時給800円

キャリア
Lv1
Lv3
Lv4
流しこみできます
下層ページは
つくれます
コーディング
できます
HTML5アプリ
つくれます
Lv10
稼げる
スライス
できます
Lv2

サーバーへのアップ
作っただけでは誰も見られない。
サーバーを借りて、ページをアップしよう。
サーバー
index.html
inu.jpg
http://nekoneko.com

おすすめ
おすすめサーバー
ロリポップ
FTPソフト
ファイルジラ
エディター
Cotediror TeraPad
Mac用 Windows用

最後に
HTMLは比較的簡単な言語なので、何度か作ってみればすぐに覚えられます。
（繰り返しが大事）
基本を覚えれば、あとは問題にあたるたびに検索すれば解決していけるようになり
ますので、ぜひ、これから制作を進めていってください。
制作で使っているHTMLテンプレートをプレゼント（いらないか・・？）
http://tacshock.com/20120912/template.zip
今月いっぱいくらいで削除します。

ありがとうございました

改行 <br>
画像 <img src= photo.jpg >
リンク <a href= page.html >こちら</a>
表
<table>
<tr>
</tr>
<tr>
<td>体重</td>52kg</td>
</tr>
</table>
HTML表

解答<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ねこ</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<h2>ねこ</h2>
<img src="img/neko.jpg">
<table border="1" width="260">
<tr>
<td>名前</td>
<td>のりお</td>
</tr>
<tr>
<td>性別</td>
<td>オス</td>
</tr>
<tr>
<td>年齢</td>
<td>15才</td>
</tr>
</table>
ねこってとてもかわいいです。<br>
落ち込んでる時はそっと近づいてきて<br>
横に座ってくれたりしますよね！<br>
<br>
<a href="detail.html">さらにくわしいねこの情報はこちら！</a><br>
</body>
</html>

おすすめサーバー
ロリポップ
FTPソフト
ファイルジラ
エディター Cotediror
Mac用 Windows用
制作で使っているHTMLテンプレートをプレゼント（いらないか・・？）
http://tacshock.com/20120912/template.zip
今月いっぱいくらいで削除します。
おすすめ

Slide

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (18)

Similar to Slide

Similar to Slide (20)

Slide