【続・続】ウェブページ制作珍道中…『少しずつコーディングにも慣れてきた！』

印刷媒体や動画の制作に慣れていると、ウェブ制作がいかに大変かがわかります。

というのも、印刷デザインや動画編集の場合は直感的に作業ができるのですが、ウェブの場合はHTMLやCSSなどのコードを書き込むことで組み立てていくという、間接的な行程が待ち受けているのです。

最近はワードプレスなどもあり、WordやExcel感覚で作ることもできて便利になりましたが、現在使っているAdobeのアプリに「Dreamweaver」というウェブ編集アプリケーションがあり、それを利用しています。

白い背景の部分はHTMLと呼ばれる「ウェブの骨格部分」。灰色の部分はCSSと呼ばれる「骨格に肉付けや色などを盛り付けていく部分」。

一つずつ数値などを当てはめていき、ダメだったらやり直す…の繰り返しです。

ところで、私の場合はウェブデザインの参考本のほかに、Adobeのサイトで視聴できる「ウェブ制作の手引き」動画を見ながらメモをしていました。

動画を見ながら実際に少しずつ組んでみて、コードをプリントアウトしてルーズリーフに貼り付けて、マーカーで線を引きメモをしていく…の繰り返し。そうしないと、すぐに忘れてしまう。

そのほかに気がついたことを逐一メモをしていきましたので、総ページ数が200を超えました。ルーズリーフの輪に収まらないほどにまで、膨れ上がっています。

でも、後々これが大いに役に立つのでした。

というわけで、架空の食堂をイメージして作り上げたウェブサイト。

ホームのページはもちろん、各ページもスマホとPCで表示が切り替わる「レスポンシブデザイン」を取り入れました。

ホームはイメージ写真を背景にドーンと載せる「フルスクリーン」。

グラフィックや動画と違い、数値やコードの入力で組み立てるウェブ制作。

まだまだいろいろなCSSのスタイルもありますし、JavascriptやJQueryなど、ブロック（パーツ）自体に動きを持たせるのもありますので、それも習得していきたいなと思っています。

以前はHTMLやCSSの文章を見るだけでトリハダが立っているほど苦手でしたが、Adobeの動画が順序立てて丁寧に解説してくれたのと、自家製の「トラの巻」を何度も読み返したのと、さまざまなサイトでもコードの解説があったりしたのと…で、今では少しずつ克服できているようです（←自覚がないw）。