HTML・コーディング・スライス

授業・コーディング・スライス

今日は授業で存在するサイトを写真に撮り、その画像をフォトショップでスライスしてコーディングし直す授業をやった。サンプルになったサイトは「loft」。

フォトショップは昔から多少なり触っているので基本操作は問題ないが、私にはスライスはあまり馴染みのないツールだった。しかしwebサイト構築の現場では頻繁に使われているようだ。

そういえばweb制作のアルバイトで画像のスライス募集とかをよく見る。

フォトショップやイラストレーターは触っているだけで楽しい。最近はペンツールの扱い方も慣れてきた。スライスとは関係ないがペンツールは慣れでしかないと思う。

「loft」はグリッドデザインを使用していてスライスの書き出しの際に画像のサイズさえ間違わなければ問題なくコーディングできる。

スライスは定規からガイドを引くとスナップを効かせれば非常に楽になる。

1pxのずれが命取りになるので限界まで拡大してpx単位でずれてないか確認するようにした。

スライスからコーディングまで2時間位。

コーディングしていて少しづつ出来上がっていく姿を見るのは常に楽しい。

しかしパッと見てdivブロックをイメージするのにまだ時間がかかる。

私はコーディングをタイピングによる手打ちをするのでスペルミスをすることが多いようだ。スペルミスによりCSSが効かないと自分ではミスをした覚えがないためどこを間違えたか悩むことが多い、そういう時はとりあえずbackground-colorをいれてCSSが効いているかどうか確かめるようにしている。効いていなければスペルミスの確率が高い。

 下らないミスは時間を消費する、せっかくドリームウィーバーに補助機能があるのでこれを使おうと思う。