どーもこんにちは、okamotoです。
インターンシップ2週目に突入いたしました。
世間では、2017年度新卒の就職活動が解禁になったとか。
そういう私も転職活動を始め、今度面接でポートフォリオを持っていくことになりました。
ところで、皆さんはポートフォリオサイトは作っていますか?
デザインやら、コーディングやら、色々悩みますよね。
「見た目のデザインをとにかく頑張って、とりあえずコーディングは、Webサイト上の見た目が良い感じであれば大丈夫」と思っている方・・・に、“待った!”です。
採用担当者は、ポートフォリオサイトのどこを見ているのでしょうか?
デザインでしょうか?実績でしょうか?
それらはもちろんのこと、コーディングの中身も見ているようなのです。
そこで今日は「コーディング整理」についてお話したいと思います。
キレイなコーディングをする人と一緒に働きたい
結論から言いますと、ほとんどの人はコーディングがキレイで整理された人と一緒に働きたいものです。またコーディングが整理されていると「きっちり仕事してくれそうな人だな」というイメージを持ってもらえることでしょう。
なので、採用担当者もそれをチェックするのは当然といえば当然なのです。
整理されたコーディングとは
そこで、コーディングの整理方法をご紹介しましょう。
1.インデントを整える
2.わかりやすいコメントをこまめに記載する
3.CSSプロパティの記述順序を揃える
1.インデントを整える
これは、言わずもがな!でしょうか。
まずこれが出来ていないと、タグがどこで閉じているかが分かり辛く、いざ自分以外の人がWebサイトを修正しようとした場合、困ってしまいますよね。
ヘタすると、自分でもわからなくなって、どうやって修正したらいいの!!!という状態に陥ってしまうかもしれません。
ですので、インデントは必ず整えるようにしましょう。
Dreamweaverを使ってコーディングをしている方は、便利な機能があるのでご紹介します。
Dreamweaverを開いて、「メニューバー>コマンド>ソースフォーマットの適用」で、Dreamweaverがインデントを整えてくれます。
私も実は今日知りましたが、本当に便利な機能ですね。
他に、Sublime Textなどフリーのテキストエディタソフトでも、インデントを分かりやすく表示してくれるものもあります。
2.わかりやすいコメントをこまめに記載する
HTMLもCSSも大まかなエリア分けをコメントして、誰もがわかるようにしましょう。
3.CSSプロパティの記述順序を揃える
CSSプロパティの記述順序については、厳密に定義されたルールは存在しません。
しかし、会社ごとにルール化されていることが多く、記述に統一感がないと、やはりまた分かりにくいスタイルシートということになってしまいますよね。だいたいの記述ルールを決めておくと、業務の効率化にもなりますし、大変便利です。
例えば、下記のような順番で記述します。
displayやfloatなどの
視覚整形モデルに関するプロパティ
↓
marginやpadding、borderなどの
ボックスモデルに関するプロパティ
↓
background-colorなどの
背景に関するプロパティ
↓
colorやfont-size、text-alignなどの
フォントに関するプロパティ
↓
tableなどの
表に関するプロパティ
以上、コーディング整理の仕方についてでした。
誰にもにわかってもらえるような、キレイなコーディングを書きましよう!!
それではまた。
by okamoto