
久々のWEBのコーディングでググって調べた基礎の基礎のまとめ
只今、久々のWEBのコーディングを悪戦苦闘しながら進めています。サバイブログでWEBのことについても書いているので、バリバリのWEBデザイナーだと思っている方も多いかもしれませんが、ずっとグラフィックデザイナーで、WEBもデザインのみを行ってきたので、コーディングの実務は…今やっているものが初ですね。
退職後のWEBのスクールで課題や卒制のコーディングはしていますが、それ以降はこのブログのテーマのカスタマイズでCSSをいじったのと、ブログを書くときにたまにテキストモードで触ることがあるかなという感じでした。ですから何ヶ月振りかのコーディングで、見事に基礎から忘れまくっていました…。
しかし、そこはGoogle先生で調べれば大抵のことがわかる時代。ググりつつ、本も見つつ、思い出しながらなんとか進められています。そこで、ググって調べたWEBコーディングの基礎の基礎のをまとめておきます。多分、これからも、毎回わからなくなるのは同じようなことかもしれませんからね。
1.Fireworksでのスライス
今回はデザインは出来ていたので、本当にコーディングのみの仕事です。そして、いきなりの難関が全く使ったことのないFireworksでのスライスの作業です。Fireworksの基礎的な使い方、透明のパーツの切り出し方などをググりました。
2.ディレクトリやファイルの整理の仕方
スクールの課題などしかやっていないので、あまりページ数の多いサイトは作ったことがありません。紙のデザインなら多少ファイル管理がぐちゃぐちゃでも、入稿データがまともに印刷できるものなら問題ありませんが、WEBはそういうわけにもいかないので、最初にそのあたりの整理の仕方をググりました。
3.HTMLのマークアップ
HTML5はタグが一杯あるので、何を使えば良いのやらとよくググります。そして、パンくず、よく考えたら作ったことありませんでした…。
4.CSSのコーディング
あれ!?なんで思うように表示してくれないの!と思いながらとにかくググりました…。ボックスレイアウトから、floatの解除方法、CSS3の表現など、とにかくググりましたよ。
まとめ
フリーランスになってからの仕事は、バナーやスマホのランディングページのデザイン、ロゴやチラシ、企画書のデザインなどで、コーディングは全くやっていませんでした。スクールに通ってコーディングの理屈はわかったので、バリバリ自分でコーディングが出来なくてもWEBデザインをするときに活かせることは多くあります。しかし、今は紙媒体の案件は明らかに減っているし、サバイブログを書いているように自分でもコーディングのスキルは必要です。
日頃からドットインストールなどで復習しようとも思っていましたが、やはり仕事では無い時になかなかコツコツ、コーディングの復習をするのも続きません。ですから今回の案件は、とても良いタイミングで頂いた仕事だと感じています。このまま1年以上もコーディングをしなかったら、もう完全にデザインだけをやるようになっていたと思います。
フリーランスなのでわからないことがあっても、すぐに隣の席の人に聞くようなことは出来ませんが、ググったり本を読んだり、場合によってはネットで画面共有などをして、思い出しながら改めてしっかり理解して自分のスキルにしていくつもりで取り組んでいます。
こういう状況、理由からも「CSS Nite in TOSA vol.2に初参加のため高知へ行ってきた」で書いた、愛媛でもWEBの勉強会が盛んになって欲しい!という話につながってくるわけですが…。ひとまず、GW終わり頃まではこのコーディング案件をがんばります!