TOM CREATIVE(トム クリエイティブ)

MENU

ARTICLE

SCHOOL

コーディングあるある(私的)

こんにちは。Engineer のキムラです。

みなさまGWをいかがお過ごしでしょうか。
私はいまのところ、いつも通りの時間に起きて生活できております。

さて、今回は「コーディングあるある(私的)」と題して
コーディング時によく思うことを5つほど(絞りに絞ってw)、制作過程順に書かせていただきます。

このデザインデータ・・・キツイなぁ

まず、我々がコーディングを開始する前に、構成やデザインを経てデータがやってきます。
そこからhtmlの構造を考え、実際にスライス作業を行いながらコーディングを進めます。

そこでまず気になるのが単位と小数点です。

mm」や「.5px」と表示された時点で、席を立ち、タバコを吸いながら気持ちを落ち着けます。
あるある

web で一般的に使われるのは「px」です。
画像がピクセルに合わせて作られていないがためにスライスの際にボヤけることもあるし、そもそもサイト幅がわかりません。

こちらの記事(WEBデザイナーになるには(経験による独断と偏見))でも少し言ってますが、
どうやってサイトを組み上げるのかを少しでも知ってくれていれば・・・ぐぬぬ・・・
もちろん、こちらで調整できる範囲であればしますし、その前にデザイナーさんと話し合いをさせてもらいます。
他にも「乗算」とか「字詰め」とか色々ありますが、都度話し合って解決していきます。

ブレイクポイント

これは要件によって異なるのですが、

  • タブレットではPCスマホどちらのレイアウトで表示させるか?
  • フレキシブルなのか固定なのか?

などといった話がでてきます。
これを先に話し合わないで進めてしまうと、後々の修正が面倒になります。あるある
ブレイクポイントについては細かいことも多いので、別の記事に書かせていただきます。

クラス名どーしよう

デザインによっては思ったよりdiv で囲む事が多くなったりします。
そんな時に思うのが「クラス名どーしよう」
container block box wrap area ・・・どの要素が大きいか小さいかわからなくなってきます。あるある
これはある程度の決まり(フォーマット?)を持って作業をしていればそこそこ対応できると思うので、できるだけルールを決めておきましょう。

IE検証こわい・・・

一通り作業が終わったら(あるいは途中でも)様々なブラウザで検証します。
さすがにIE8 対応はなくなりましたが、それでもIE で見ると崩れることもしばしば。あるある

最近では、マイクロソフトが、旧式のウェブブラウザーInternet Explorer(IE)を使い続けるのは危険だとして、その使用をやめ、最新のブラウザーを使用するようもとめており、
また、Windows 10の標準ウェブブラウザであるEdge をChromium ベースのブラウザへと変更することを正式に発表しました。

このマイクロソフトの訴えがすこしでも多くの方に届くことを願います。

ちなみに、個人的に一番苦しめられた思い出のあるブラウザはIE6 death!!!

あ、キャッシュですかね

全てのコーディング作業・検証を終えてテストアップ!
その後、画像やテキストの差し替えが発生することは避けられません。
粛々と対応し、再度テストアップ!

「確認おねがいします〜〜〜」
「直ってないよ!!プンプン」
「あ、キャッシュですかね」

あるある
これ、クライアントさんならいいんですよ。ぜんぜん。
ただ、ディレクター等の身内確認で言われるとちょっと、、ね。ね!!!

まとめ

このようなことを経てweb サイトが公開されます。

スムーズにいったり大変だったり、
それぞれの役割の方がそれぞれに苦労をしながら公開されたサイト。

最終的にクライアントさんに喜んでいただけたり、公開後の反響がよかったりするとやっぱり嬉しいもので。
そのためにも、数多のあるあるを乗り越え、これからも制作に励んでまいります!

※ところどころ私的な愚痴みたくなってしまい、気分を害した方がいらっしゃいましたら申し訳ございません。

 

・TOMCREATIVE YouTube Channel
http://bit.ly/2UibJuL

・TOMCREATIVE instagram
https://www.instagram.com/tomcreative_106/