コーディング

ピクセルパーフェクト!コーディングの基礎能力を鍛える

ピクセルパーフェクトとは

頂いたデザインを1pxもズラさずにHTML/CSSで表現する方法です。

動画で作業風景を垂れ流してます!どうそみてやってください。

Youtube動画

良いねとチャンネル登録お願いします!

必要性

実は需要はあまり無いのですが、必要性は確実にあります。ピクセルパーフェクトを目指してコーディングするか、しないかでは最終的な仕上がりが全然違います。

デザインスキルが低いエンジニアが勝手に決めたデザインなんかよりデザイナーさんが決めたデザインの方が良いに決まってるからです。

ただ人間誰でも”怠け“があり、それは自分も恥ずかしながらあります。

ここは10pxぐらいのマージンかな“や”さっき10pxだから10pxやろ”などです。

でもデザイナーさんは”ここはタイトルが少し大きいから少し大きめのマージンの15px”や”文章から離れてほしくないからここは1emで”など色々考えています。

っで、実際にコーディングが完了しサイトを見てみるとせっかく考えたアイデアが一人のエンジニアによって消されていたら、エンジニアでいう”せっかく書いたコードが無駄だった“ぐらいショックだと思うんですよ。

ですので、そういう悲しい事件が怒らない為にもピクセルパーフェクトコーディングしましょう!

デザイン料の削減

デザイナーさんによってはコーダーにキチンと作ってくれるようにメモを作成したり、マージンの数字を別レイヤーで書いてくれたりします。

行間、文字間、マージン全てがデザイン通りでないとピクセルパーフェクトは実現しないので、ピクセルパーフェクトコーディングを実現すると、デザイナーメモはほとんど必要なくなり、デザイナーさんの工数をへらし経費を削減することができます🎉

コーディングの大きな2つのポイント

ピクセルパーフェクトの最も重要なポイントは2つです

  • marginやleft,topなどの配置は後
  • 文字情報などはシッカリ入れる

適当さが大事

margin/paddingの値は”30pxぐらいかな?”みたいな感情も無くし、とにかく適当に入れます。後でピター!って直します。

逆に近い数字を入れてしまうと、ズレに気付かない可能性があるので、あえて絶対に違う数字を入れたりします。

フォントや丸み、色等はしっかり入れる

基本的に後で行うmargin/padding以外はシッカリここで入れましょう。ここを適当にすると逆にコーディングが遅くなります。

チェックする項目
  • font-size
  • font-wieght
  • line-height
  • color
  • letter-spacing
  • border-radius等

Chromeアドオン”PerfectPixel”を使う

これが無いと無理です。入れましょう。

Chromeアドオン”PerfectPixel”

Chromeのデベロッパーツールでピコピコ

キーボードの上下で少しずつ調整しましょう。

0と入れて上下ボタンでもpx入れてくれて便利です。

完成!!

Firefox, Edgeなどでも確認しましょう!

IEの確認が必要な場合は最後のPerfectPixel作業の前に調整するのがおすすめです

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ