灰根です。
ついこの間Twitterで職業訓練について教えてくださいというDMが来ました。
このブログの記事を見てくれて僕にたどりついたのかはよくわかりませんが、やっぱり職業訓練についての情報って少ないみたい。お役に立てたら嬉しいぞ！
そう考えるとちょっとはこの記事が参考になる人もいるかもな〜。
見てくれる人がいるかもよ！
ってことでモチベーションも上がったところで！
さあ、Webクリエイター科の体験記その２です！
前回の記事はこちら！
HTMLやPhotoshopを教わり、より本格的にWebページ作りを学んでいきます。
Dreamweaver実習（11日〜12日）
Webページを作るために、テキストエディタでHTMLの記述をカタカタ地道に手打ちで行ってきたわけだが！
Adobe社のDreamweaverがあればそんなやり方とはもうおさらば！
「どりーむうぃーばー？聞いたことないけどどんなソフト？」
って人もいるかもしれない。
というか僕がそう。
Dreamweaverとは！
Adobe Dreamweaver（アドビ ドリームウィーバー）は、アドビシステムズが販売しているWebオーサリングツール。
まあよくわかんないよね。
僕の教わってる範囲での解釈だと、Dreamweaverはwebページ制作ツールで、HTML,CSS,Javascriptでのコーディングやデザインを色々な機能で補助してくれて、手打ちで作るより簡単にWebページが作れるソフトという感じ。
略称はDW、ドリ、ディーダブらしい。
けど、なんか恥ずかしくてドリームウィーバーって呼んでる。
DreamweaverもAdobe Creative Cloudのコンプリートプランに入っているので、イラレやフォトショ目当てで入っていれば追加料金なく使用できます。
講師が”Adobe税”と皮肉るくらいに月額料金が高いので、プラン内で使えるソフトはどんどん使って元を取っていこう。
Dreamweverが手打ちと比べてどう違うのかを理解するために、Dreamweverで簡単なページを作らされた。
まず、HTMLで新規作成をすると下記の赤い線で囲ったコードが記述された状態で出てくる。
内容に関わらず常に必要なHTMLの宣言や、文字コードの指定やなんかが最初から記述された状態にしてくれることで、手間を省いてくれてるんだね！
確かに楽。
そして、「挿入」や「プロパティ」の機能によって、タグの付け替えや画像を入れたりするのがとても簡単にできる。
赤枠の中で用意されたボタンを押すだけで、h2にしてくれたり、リストを作ってくれたり、画像を挿入できちゃう。
手打ちするのは実際にページ表示する内容くらいで、タグの記述はソフトがやってくれるので非常に作業量が減る。
また、コードと実際のページデザインをリアルタイムで見られるので、記述したHTMLを確認しながら作業を進めることができる。
こいつは便利だ！確かにこれやるとTerapadで手打ちには戻れないかも…。
手打ちであんなに苦労したテーブルだって一瞬だからね！
出てきたウィンドウに、どんなテーブルにしたいか入力するだけ！
これが手打ちだとまず<table>タグ作って<tr>タグで行を作って<th>タグや<td>タグ作ってそれからcolspanやrowspanでセルを結合したりしてboderで線つけたりしてそれからそれかr……こんなんやってられるかああああああ
Dreamweaver万歳！
こんな感じで、初週に苦労してやってきた手打ちというやり方をいとも容易く無に帰すようなツールのやり方を2週目で教わったのである。
でも、別に意地悪で手打ちをやらされたわけじゃないんだよね。
やっぱり手打ちでやることによって基本が身につく部分があると思う。
Dreamweverは便利なだけに、開始タグと終了タグの位置や、属性の使い方など、あまり意識しないでもできてしまうので、DreamweverでしかやってないとどうしてもHTMLの構造を覚えられないし、応用が利かなくなってしまう。
それにDreamweverの機能も完璧ではなく、どうしても直接コードビューに手打ちで記述しないとやりづらい箇所もあるので、やはりあくまでHTMLを手打ちでも記述できるスキルを要した上で補助ツールとして使用するのが望ましいと言えそうだ。
講師によれば、企業によってはDreamweaverの費用が高いなどの理由で、手打ちでHTMLを記述しているところもあるそうで、Dreamweaverでしかできませんとなると大変みたい。
手打ちできれば、テキストさえ打てれば開発環境問わずどこでもHTML書けるしね！
メモアプリだろうがメールだろうがHTML書けちゃう！
だから、Dreamweaverの機能に甘えすぎるのは避けなれば…！
そんなことを思いつつも結局Dreamweaver無しではとてもページなんて作れないと感じるようになってしまうのは少し先の話…。
Photoshop/Dreamweaver連携実習（13日〜15日）
PhotoshopもDreamweaverも教わったということで、実際に両方使ってページを作ってみることに。
と、その前に。
ロールオーバー練習
作成するページの仕様でメニューのボタンを、ロールオーバー（スワップ）させるの必要があるとのことで、実装の仕方を先に教わります。
ロールオーバーとは、画像などにカーソルを乗っけると画像が切り替わるような機能。
こういう動きのあるものは基本JavaScriptでやることが多いらしいのだが、JavaScriptがわかっていなくても、Dreamweaverのビヘイビアー機能で簡単にロールオーバーを実装できるから大丈夫！
サンキュードリー！ゆとりな俺にはありがたいよね！
実際に練習で作ってみたロールオーバーがこれ↓
数字にカーソルを乗せると画像が変わります。
これがロールオーバー。
色々なWebページで当たり前のように見かけていると思います。
コードに書いてある<script>タグの範囲がいわゆるJavaScriptで、Dreamweaaverを使えばロールオーバーする画像を選択するだけでJavaScriptがわからなくてもこうやって記述してくれる！
おかげでね！もう僕はDreamweaverないとロールオーバーできなくなっちゃったからね！
便利さと引き換えにブラックボックス化して仕組みが理解できないままということはよくあること。
いつかちゃんとJavaScript覚えよう…。
ちなみにこのロールオーバー練習用の画像はこれまで訓練で教わったPhotoShopの技を駆使して自作したものになります。
絵心０の割には頑張りました、3にカーソル乗っけたときの夜空が自分にしては良くできたとお気に入り。
シェイプツールのテンプレとか使ってますが。
途中までできてたサイトを完成させる課題
ロールオーバーを教わったところで、より実践的な練習。
Dreamweverで最初からコーディングはハードルが高いと思ったのか、画像やリンクがまだ記述されていないHTMLファイルとPhotoshopで作られたデザインカンプが与えられ、自力でページを完成させる課題。（CSSは初めから用意されている）
また、要望に沿ったバナーを作ったり、テーブルに直す等の条件もあった。
3時間与えられて、独力で完成させるという実習。
デザインカンプからサイト制作に必要な画像の書き出し、バナー作成、Dreamweaverでデザインカンプ通りにHTMLの修正、画像やリンクやロールオーバーを設定していくんだけど、慣れていないとこれがなかなか時間内に終えるのが難しい。
けど、今まで教わってきた事の総合的な課題だったので、とてもいい復習になりましたね！
CSS実習（16日〜19日）
PhotoshopとDreamweaverの操作にも慣れたところで、いよいよCSS。
DreamweaverにはCSSを記述する機能もあるので、実際に使いながらCSS覚えていきます。
Cascading Style Sheetsの略で、HTMLの記述部分を文書構造のみとして、デザイン部分の記述を分離することを目的として開発されたスタイルシート言語。
せっかくなので僕なりに噛みくだいて表現してみます。
HTMLは、文章や画像やリンクを記述したり、ここがメインの部分ですよーこっちはナビゲーションの部分ですよーそしてここはフッダー部分ですよーと定義付けたりするのに使う言語。
それに対して、CSSは、ここの文章の文字サイズは大きくしよう、ここの背景の色は黄色にしよう、ここの画像の配置は真ん中におこう、など見た目（デザイン）に関することを記述する言語。
上の「HTMLの記述部分を文書構造のみとして、デザイン部分の記述を分離することを目的として開発された」というのは、実はHTMLでも見た目が全くいじれないわけじゃなくて、文字サイズや色も指定できるのですが、文書構造とデザインは分離したほうが良いという理由で、CSSができたそう。
なぜ分離した方がいいかは僕もちゃんと理解していないので今は触れませんね…。
見た目なんてどうでもよければHTMLだけでもWebページは作れてしまいますが、僕たちが良く知っているようなWebページにするには現状CSSは避けて通れない道です！
例えば！
みんなご存知Yahoo Japan！
もしCSSが無くなりHTMLだけになってしまうと？
こんなように、画像と文字がただ縦に並んだだけのような感じになってしまうんですね。
見やすくて情報正しく伝えるためにもCSSは大事！
基礎を教わる
じゃあどうやってHTMLで記述したものをCSSでデザインしていくのか、CSSの基礎を教わる
どこの範囲内の（セレクタ）何を（プロパティ）どのようにするか（値）。
例えばHTMLで <p>〜テキスト〜</p> と記述したとして、
pタグ内の（セレクタ）文字の色を（プロパティ）赤くする（値）と言ったことがCSSでできちゃう！
「灰根/ハイネ」というテキストの文字色を赤に変え、フォントサイズを30pxにして、背景を黄色くするとしたら。
上みたいなコードを書くと、見事にHTMLで記述したものが装飾されるわけですな。
すげえぜCSS。
どうやって指定するのとか、具体的な記述方法は僕が解説してもしょうがないので、割愛します。
サルワカさんとかわかりやすいサイトたくさんありますので…。
この記事はあくまで職業訓練で素人がどんなことを教わってどこまでできるようになるのかをお伝えします。
「ああ職業訓練でWeb制作学べばこんなのできるんだなー」くらい思ってもらえればよし。
最初こそ、まるでクレヨンと画用紙を手に入れた子どものような気分で、装飾できるようになったことを喜んでいた僕ですが。
素人が思い通りに装飾・デザインするのは一筋縄ではいかない。
擬似要素、ブロック要素とインライン要素の違い、詳細度、paddingとmarginの使い分け、float、絶対配置と相対配置など、ややこしい内容がたくさん出てきて、まあそれはそれは混乱した。
僕だけじゃなくてクラス中がポカーンとしてたのを見て、
「CSSはよくわかんなくても、毎日毎日やってるとあるとき急にストンの自分の中に落ちてくるから！今はそんな顔になってもしょうがないｗ 大丈夫大丈夫ｗ」
講師の先生も心配するくらい最初は混乱してた。
そして、「この上ない難関だと感じたこのCSS乗り越えるため、これからの授業は気合いを入れなければ！」と決心した矢先。
約40度の熱を出す。
その日は朝から少し体調が悪かったのだが、職業訓練は欠席してしまうと補習は無いし、その日の給付金の支給も無くなるってことが頭にあって、「ここで早退したらCSSに負ける！」と意地を張り授業を受けていた。
そのうち体調があきらかに悪くなってくるのを自覚しながらも、授業受け続け、最後らへんはもはや意識が朦朧としていた。
当然、授業の内容など全く頭に入っていない。
今にも倒れこみそうな中、帰りの電車で誰も席を譲ってくれないことに絶望しながら帰宅すると、なんと熱が40度。
こんなに高熱が出たのは初めてのことであり、もともと平熱が35.5度と低い方なこともあって、本当に死ぬんじゃないかって思った。
たかだか熱でって思うかもしれないが、マジで。
今週熱が40度近く出てわかったけど、体調悪くなりかけたらできるだけ早く休んだ方がいいわ！(いまさら)
踏ん張って結局3日も家で寝込むことになったりして効率悪い！
40度あると作業どころか、LINE返すのもツイッターやるのも無理
悪くなりかけなら1日で治るとこともあるから！休もう！— 灰根/ハイネ (@ash_root_haine) June 29, 2018
まじで、これだけ熱あると人間何もできないのね…。
結局そのあと3日間も訓練を休むことになり、無理したせいで余計CSSを身につける機会を失う始末。
僕が休んでいる間にはナビゲーションの作り方や、ボックススタイルについて学んでいたらしいです。
学校に復帰した後は、CSSにみんな苦戦していたせいかあんまり進んでなかったおかげで、人に聞いたりテキストを見たりして、なんとか遅れていた部分を取り戻すことができた。
遅れを取り戻したといっても微妙な理解度のままCSSの授業を終え、次からはデザインも含めたWebページ制作実習へ！
こんな状態で作れるようになるのか！果たして！
みんなも体調が悪くなり始めたらそれは体からのサインだから！無理しちゃダメ！休んでな！
