ホームページ作成講座はつづく（実習でコーディングの流れを知る）

予定されていた4ヶ月（全15回各2時間）の講座は無事終了…
在宅ワーカーとして働きたい人たちが集まり、コーディングの技術を学びました。

デザイナーさんのデザインと同じものがパソコン上で表現できるようになるのが目標です。

企業さんも、
社内で仕事をしてくれる社員さんのほかに、
在宅ワーカー人材は欲しいところだと思います。

講座を修了した私たち、さぁどうでしょう？

どうって…
これで仕事が一人でできるとは到底思えません…。

どうするの？

ホント、どうするのって感じです。
勉強を続けます。
スマホ対応、ワードプレスなどの講座を引き続き受講させていただけることになりました。

（ありがとうございます！m(__)m）

しかし、
とても厳しい道のりということには変わりないでしょうね…^^;

------------
（※注　ここからダラダラ書きますヽ(^。^)ノﾔｯﾎｰ）←すでに壊れている

4ヶ月のうちの講座の中で、大変だったのは修了制作でした。

え？もうそんなことやるの？
何にもわかっちゃいないですよぉ～

と言っている間に…
修了制作ーー！！
「デザインデータを基に、パソコン上で同じ表現になるようにコーディングする」

・私たち生徒で一つのサイトを作り上げます
（私がベースになるページとトップページを担当、他の方は下層ページを担当）

キホンは自分で検索してコーディングしていく、
という感じです。
わからないところは、先生がヒントをくれたり参考サイトを紹介してくれたりします。

それがね…
これが、さっぱり進まないのです。

ちょっとコーディングの流れと苦労・反省を書いておきますか。

①
まず、ディレクターさんがサイトの説明をしてくれるところから始まります。
この時PSDデータをもらいます。
指示書はなく口頭で承ります。

「サイトの幅は980pxになります」
「ヘッダーは固定になります」
「ロゴはh1タグで、次の見出しはh2タグで」
「ここの画像をマウスオンした時に透明度の付いた白い枠の画像が重なります・・・」
というようなことでした。

言われたことを絶対にもらさないように、必死でメモしました。

（その他のことは、デザインされたPSDデータから全てを読み解く、ということなのですね）

②
baseページをコーディングします。
（最大6日間）
（このbaseを基に、topページ下層ページの作成に入ります）

③
topページ下層ページの作成に入ります。

------------
まず①と②
さあ、始めようとなった時…PSDデータから読み解く時に、

まったくわからない！！

ページデザインは1480pxで来ているのに980pxのサイト幅？？

ここですでにつまずきます。
「ブラウザ幅に100%表示」すること、というのはその後教えてもらいましたが、これを解決するのに5日もかかってしまいました。

そして、
ディレクターさんの説明時にはわからなかったのですが、後でPSDデータを確認してみると、それはそれは複雑なデザインで…。

PSDのデザインを読み解くのにも、とても苦労しました。
・ヘッダー部分とメニュー部分とメイン画像にそれぞれ透明度を設定してある
・スクロールして下まで行くと、ヘッダーメニューと全く同じデザインのフッターメニューが上下に並ぶけどいいのかな？
・トップへ戻るのボタンの位置が上過ぎるけど？
・普通ならセンター揃えになると思うけど、5項目のうち一つが左に寄ってるけど、これはそういうデザイン？
・背景ではなく、メインでも幅の980px超えているけど？

生徒の身でディレクターさんに問い合わせも出来ず…(T_T)

そして③
トップページのコーディングにとりかかります。

まず、最初のスライダー（メイン画像が変わっていく）設置ができないです。
jQueryを使うのだということは教えてもらいましたが、
jQuery自体がわかっていません。

スライダー設置のサイトを検索すると、
簡単だ簡単だって書いてありますが、どこが簡単？
その通りにコピペしてみても、まぁ動かないわね。

わからないということはホントにわからないのです。

何日もかかって、いくつかのスライダー設置のサイトを読み、
ファイルをダウンロードしなければ始まらない、ということにやっと気付くのです。（とほほ）

最初からこんな感じですよ。

ページはふんだんにデコレーション（イメージ画像）があり、
見出し・ボタン・内容それぞれが思いのままに配置されている（規則正しい配列ではない）ので、
全部位置の指定をしなければならなくて大変です。

大変なのはいいとして（よくないが）、
こういう整然としていないデザインで本当にいいのだろうか？？
という疑問が結局抜けないままでした。
（ペーパーのデザインならいいのかもしれませんが）

下層ページは他の皆さんが担当です。

しかしここにきて（baseとtopページができてから）、
「reboot.css」にリンクする指示がきて、
（リンクすることにより、余白などが変わってしまうので）苦労しました。

「reboot.css」も意味不明だったしね。

------------
全体的にはですね…
こんなちっぽけなことに悩んでいたのか、と愕然とすることが多々ありました。

コーディングって時間がかかるものなのですね。

とにかく時間がないので、形になることが優先になってしまい、必ずしも理解していないことがたくさん出てきてしまいました。
検索したサイトに載っているコードをコピペ。
形にならないと、また次のサイトからコピペ。
あとで振り返っても、まったく理解できていなくて愕然としますね…。当たり前ですが。

質問はメールになるので、意味が通じるように、また失礼がないように、時間をかけて質問文を作っているのですが…
うまく伝えることは難しいなと感じました。

私がそうなのですが、
噛み合ってないと感じて読み直してみると、違う意味で解釈していたり、読んでウンウンと頷いたはずなのに抜け落ちていたり…。

修了課題を提出して、さあ終わりだー、となった時、
苦労して出来上がったにもかかわらず、
充実感が感じられませんでした。

さぞ開放感にあふれるのかと思ったんですけどね。

自分の力のなさに愕然としたと言うか、思い知ったという感じです。

でも、なんとかモノにしたいですね！
講座を開催してくれた企業さんと講師の先生、いっしょに勉強できた皆さんには感謝です！

------------
講座が終わって…
（修了制作の間できなかった）通信教育の勉強を再開しようと、
後期の真新しい教科書をドンと机に置き、授業を見ようとパソコンを開けました。

そうしたらナント授業の視聴そっちのけで、
コーディングのギモンを調べ始めていましたわ。

もう離れられなくなったかも。