久々のWEBのコーディングでググって調べた基礎の基礎のまとめ
只今、久々のWEBのコーディングを悪戦苦闘しながら進めています。サバイブログでWEBのことについても書いているので、バリバリのWEBデザイナーだと思っている方も多いかもしれませんが、ずっとグラフィックデザイナーで、WEBもデザインのみを行ってきたので、コーディングの実務は…今やっているものが初ですね。
退職後のWEBのスクールで課題や卒制のコーディングはしていますが、それ以降はこのブログのテーマのカスタマイズでCSSをいじったのと、ブログを書くときにたまにテキストモードで触ることがあるかなという感じでした。ですから何ヶ月振りかのコーディングで、見事に基礎から忘れまくっていました…。
しかし、そこはGoogle先生で調べれば大抵のことがわかる時代。ググりつつ、本も見つつ、思い出しながらなんとか進められています。そこで、ググって調べたWEBコーディングの基礎の基礎のをまとめておきます。多分、これからも、毎回わからなくなるのは同じようなことかもしれませんからね。
1.Fireworksでのスライス
今回はデザインは出来ていたので、本当にコーディングのみの仕事です。そして、いきなりの難関が全く使ったことのないFireworksでのスライスの作業です。Fireworksの基礎的な使い方、透明のパーツの切り出し方などをググりました。
第6回 Fireworksの便利な機能を活用してコーディングの効率を上げよう! | ADC – Adobe Developer ConnectionFireworksで画像を透過gif(透過png)として書き出す際のチュートリアル | FireWorks.20
2.ディレクトリやファイルの整理の仕方
スクールの課題などしかやっていないので、あまりページ数の多いサイトは作ったことがありません。紙のデザインなら多少ファイル管理がぐちゃぐちゃでも、入稿データがまともに印刷できるものなら問題ありませんが、WEBはそういうわけにもいかないので、最初にそのあたりの整理の仕方をググりました。
Webサイト制作でよく出てくるコンテンツとそれによく使うディレクトリ・ファイル名の一覧 | btmup Blog初めてWEBサイトを作る時にしがちな6つの失敗-初心者のためのWEBデザイン教室
CSSファイルは複数ファイルに分けたほうがよいのか | Info Architecture
3.HTMLのマークアップ
HTML5はタグが一杯あるので、何を使えば良いのやらとよくググります。そして、パンくず、よく考えたら作ったことありませんでした…。
はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろパンくずリスト(breadcrumb navigation)の作り方
4.CSSのコーディング
あれ!?なんで思うように表示してくれないの!と思いながらとにかくググりました…。ボックスレイアウトから、floatの解除方法、CSS3の表現など、とにかくググりましたよ。
CSSの「セレクタ」の書き方 再入門(CSS3対応版) [ホームページ作成] All About基礎編2 ボックスモデルとDOCTYPEスイッチ
CSS背景2つ(複数)backgroundとbackground-image間違いそうな所 | WEBスキルアップ君
background-position
縦の並びを極めるには、Vertical Alignを理解しなけば始まらない | CSSPRO
CSS3 角丸を表現する border-radius | CSS Lecture
CSS3 要素を透明に出来る Opacity と RGBa の使い方 | CSS Lecture
:nth-childの使い方 | CSSPRO
-float(フロート)を解除する3つの方法-Whisper | Diary
まとめ
フリーランスになってからの仕事は、バナーやスマホのランディングページのデザイン、ロゴやチラシ、企画書のデザインなどで、コーディングは全くやっていませんでした。スクールに通ってコーディングの理屈はわかったので、バリバリ自分でコーディングが出来なくてもWEBデザインをするときに活かせることは多くあります。しかし、今は紙媒体の案件は明らかに減っているし、サバイブログを書いているように自分でもコーディングのスキルは必要です。
日頃からドットインストールなどで復習しようとも思っていましたが、やはり仕事では無い時になかなかコツコツ、コーディングの復習をするのも続きません。ですから今回の案件は、とても良いタイミングで頂いた仕事だと感じています。このまま1年以上もコーディングをしなかったら、もう完全にデザインだけをやるようになっていたと思います。
フリーランスなのでわからないことがあっても、すぐに隣の席の人に聞くようなことは出来ませんが、ググったり本を読んだり、場合によってはネットで画面共有などをして、思い出しながら改めてしっかり理解して自分のスキルにしていくつもりで取り組んでいます。
こういう状況、理由からも「CSS Nite in TOSA vol.2に初参加のため高知へ行ってきた」で書いた、愛媛でもWEBの勉強会が盛んになって欲しい!という話につながってくるわけですが…。ひとまず、GW終わり頃まではこのコーディング案件をがんばります!