こんにちは山形のWEBデザイナー菅野です。
コーディングだけの仕事依頼の場合、
コーディングが得意なパートナー企業に頼むことが多いです
いつも頼むところは決まっていて
上がってきたWEBデザインをほぼ完璧にコーディングしてくれるA社さんにお願いしています
10月中旬すぎに、そのA社さんから連絡が入りました
WEB案件が、かなり入ってきているらしく
コーディング案件を1つ私にお願いしたいとのことでした
いつもとは依頼する流れが逆の形で、今回が初のケースでした
今まで 無茶なお願いや短納期の案件などで
何度もピンチを救っていただいているA社さんからの頼み
これは断るわけにはいきません
内容も1ページだけで完結するサイトでそれほどボリュームもありません
納期も1週間ほどあり、これならなんとか対応できそうです👍
いざ作業開始してみて気づいたのですが
そういえば…
自分で、一からのコーディングって 最近やってないじゃん💦
BootstrapやWordpressテンプレートなど
ある程度出来上がっているものをベースに、コーディングで修正を加え、
カスタマイズする案件は結構こなしているのですが
支給されたデザインデータを元に、一からのコーディングは本当に久しぶりです
A社さんのおかげもあって、1〜2年はやっていないような気がします😓
また、今まで私が一からコーディングをする場合は、基本的には自分でWEBデザインしたものをコーディングすることがほとんどでした。
自分でデザインしたものであれば、内容も把握していますし、後工程も考えながらデザインしますので
当たり前ですが効率よくコーディングを進めることができます
しかし、今回はA社さんがデザインしたデータを元にコーディングなので注意が必要です
画像サイズや余白、フォントの種類・サイズなど、デザインに関わる情報をしっかりと拾っていき
HTMLやCSSなどでWEBページとして、デザインを忠実に再現していきます
今回、A社さんからいただいたデザインはほとんど問題なかったのですが
PC表示において１箇所だけコーディングしにくい部分が…
「私ならここはこんなデザインにしないのにな〜」などと
コーダー側の勝手な言い分を心の中でぼやきながらも
なんとか、ここのコーディングをクリア
9割方は出来上がり、あとちょっとで完成のところで1つ気になる点が…
なんか画面の両サイドに余白があるな??
該当するコンテンツ部分の余白を0に設定すれば消えるでしょ
あれ直らない💦
色々試してみるも… 直らない💦
この余白なんやね〜ん💢
原因かなり初歩的なやつでした😓
ブラウザが固有で持つデフォルトスタイルシートが原因で
初期のままだと必ず余白ができてしまいますので
リセットcssを読み込み、余白を消してやる必要があったのでした
◆デフォルトスタイルシートとリセットCSS
https://www.kenschool.jp/blog/?p=3709
BootstrapやWordpressテンプレートは
最初からリセットcssが設定されていますので、ここ最近は自分で設定することもなかったため完全に抜けてました😓
その後、A社さんには無事コーディングしたWEBデータを納品しました
たまには 一からコーディングして
腕がなまらないようにしておく必要があるなと感じました
