<5c start>
<5c ->
最先端の仕事がしたいと考えていたトムは、インターネットにはいろいろなWEBサービスがあることに気がつき興味を持った。そして、あるWEBサイト制作会社のインターンをすることにした。
<5c end>
インターネット上には多くのWEBサイトがある。
それらは見た目や動きがそれぞれ違うが、一つ共通していることがある。みんなが見ている画面の裏側では言葉によって記述されているということだ。文字の大きさや色もどの画像を表示するかもリンクをクリックするとどのページに移動するのかも、全て言葉によって表現されている。
WEBデザインをすると言うことは、サイトの見た目をイメージすることはもちろん、言葉でどのように表現するかも含めて考えることである。
<2c start>
<2c ->
Shinonomeのホームページには画像やいろいろな文字に装飾が施されている。これら文字の大きさと色も言葉によって表現されている。
<2c end>
<2c start>
<2c ->
このコースで作成する、ある画像投稿サイトのコピーサイトは画像が増減しても綺麗に並び続ける。このサイトの画像の大きさと位置も言葉によって表現されている。
<2c end>
この学習コースはそんなWEBデザインに興味を持ったトムと一緒に学習を進めていく。
トムはWEBサイト制作会社"ミニマムズコーポレーション"でインターンを始めた。
初めての出社で張りきって出勤すると、なんだか社員たちがたくさん集まって騒々しい様子……
どうやら近々納品のプロダクトのプログラマーが風邪をひいてしまったようだ。このままだと期日に間に合わないと騒いでいる。
プロダクトオーナーはしばらく考えるそぶりを見せると思いついたように辺りを見回した。 そして、トムと目が合うとニッコリと笑った。
あまり良くないタイミングで来てしまったみたいだ。初日から忙しくなりそうだ。
プログラマーのアレンがトムのメンター（師匠のこと）になってくれた。彼はトムを席に着かせると開口一番、さっそく書いてみようと言った。
早速Programing[プログラミング]を始めよう。
<2c start>
<2c ->
Programingとは何だろうか
普段書く文字に加えて文字や画像の大きさを装飾する言葉が含まれている文章をCode[コード]と呼び、Codeを書くことをProgramingと呼ぶ。
<2c end>
Programingは**と同じだ。成り立ちや理論を勉強しているだけではできるようにならない。自分で試行錯誤をしてはじめて書けるようになる。
この学習コースはトムと一緒に実際に書くことで試行錯誤する形式になっている。冗長にならないように、最低限の技術の成り立ちと理論しか説明しない。詳細は他のWEBサイトや本を読んでほしい。そのために、ページの最後には参考にしてほしい文献と検索フレーズ（自分で調べる力をつけよう）を記載する。
学習はCodeSandbox[コードサンドボックス]というWEBサービスを使って行う。CodeSandboxは自分の書いたコードを同じ画面で確認することができるウェブサービスだ。アレンが基本となるCodeを書いてくれた（Template[テンプレート]と呼んでいる）。これに自分で書き加えながら進めていくことで変更をすぐに確認しながら学習を進めていくことができる。
まずはCodeSandboxにアクセスしてGitHubアカウントでサインインしよう。
サインインができたら続けよう。
<codesandbox 01-01-01-znks3 split>
上のような枠がページの途中で表示されたら、枠の右下の「Open Sandbox」 をクリックして新しいタブでCodeSandboxを開こう。
下の動画でCodeSandboxの使い方を説明している。左の黒い画面がコードを書く画面であり、右の白い画面が実際の表示を確認する画面になっている。真ん中の文章がコードである。コードを変更した後は画面左上のFileからSaveをクリックする。（この操作はmacの場合はキーボードのcommand+sでもできる。windowsの場合はキーボードのctrl+sでできる）右側の白い画面で表示が変更されたことがわかる。
学習は「学習コースでコードの見本を見る」→「CodeSandboxで基本コードに変更を書き加える」→「変わっていることを確かめる」の繰り返しで進んでいく。サイクルの一周に時間をかけるのではなく何周もすることを心がけ、慣れることに努める方が早く書けるようになる。
それでは、トムと一緒にWEBデザインを始めよう。