ひしもち 
初めての面接の結果、採用を前提とした研修で「お勉強」をさせて頂くこととなりました。
「お勉強」一週目あ終わったところです！ 毎日集中してたっぷり勉強させて貰えるのは嬉しいですね:)
今週は、まったく触ったことのなかったFireworksとDreamweaverに慣れるため、会社でよく使う簡単なテンプレートの編集をしました。
この記事は、Webデザイナーを目指して勉強を始めてから実際にWebデザイナーとして働き出すまでの間に書いたものです。記事の内容は、2015年5月24日に書かれています。
今となっては、簡単なHTMLくらいならスラスラ読めるようにはなりましたし、「読みやすいコード（編集しやすいコード）」を書くにはどうすればいいのか、というところにも知恵を絞れるようになってきました。
使ったことのないソフトを使うのも戸惑うことの連続でしたが、テンプレートを編集すること自体始めてだったので、その点でも学ぶことが多かったです。
ひとが書いたコードだから属性名をどういうルールでつけているのかも分からないし、どの要素でレイアウトを調整しているのかも分からない、という状態なので、まずは「コードを読む」という作業が必要になるんですね。
「コードを読む」と言っても、もちろん頭から順に読んでいくって意味じゃありません（そりゃそうですよね；）。
まず、調整したいスタイルがどの要素で指定されているのかを探さなきゃいけないってこと。
たとえば、テキストの左側に空いている空白をもう少し狭めたいな、と思ったときに、それがどこで指定されているmarginなのか、あるいはpaddingなのか、もしかしてtext-indentなのか……ってのを、見つけ出さないことには編集のしようがないワケです。
テキストが入ってるボックスのmarginやpaddingで指定されていることもあるし、親要素のpaddingである場合もありますよね。
さらに、編集したいスタイルが別のところに干渉していないかもチェックしなきゃいけません。
同じクラス名を別のところにも使って、一括でスタイルを適用していることもあります。画像の大きさが変わったりして、一箇所だけ調節したつもりだったのに、いつの間にか別のところのレイアウトが崩れている……みたいなことが起きるわけです。
気づかずにいじってたから元のプロパティや値がどうなっていたのかもう分からない； なんてことになったりします。
要らないdivを減らしたけど、ここのclassに適用されていたcssは要るのか、要らないのか？
そもそもbodyに{ text-align:center }が指定されているのはなぜなのか？
みたいなことを確認しながら作業を進めないといけないんですね。
Chromeのデベロッパーツールは、marginやpaddingのチェックもしやすいですし、親要素から継承してるスタイルも見やすくて助かります。