エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

【DAY3】PerfectPixelを使ってチェックと修正【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【DAY3課題】PerfectPixelを使ってチェックと修正

DAY3の課題は「PerfectPixelを使ってチェックと修正」です。

 

今日はあまり語れる内容がないですが、記事書きますw

Perfect PixelをGoogle Chromeで使ってみた

Perfect Pixel(パーフェクトピクセル)をGoogle Chromeで使ってみました。

 

やってみると細々とずれていましたw

XDを見ながら数値を指定したはずなのにずれていました。

paddingとかmarginとか、ボックス自体の設定(box-sizing)が違ったりとか色々と原因はありそうです。

※この辺りのミス、何か根本的な原因がありそうですが、いまいち理解できていません

 

Perfect Pixelの個人的な使い方

ズレが生じている時に、どっちが自分のかわからなくなるので、

  • 一時的に自分のソースコードの背景色や文字色を変えるなどをして、判別する
  • 別タブで自分の作ったページをもう一つ開く→「タブを移動」で目視で確認する

という方法で、どちらが自分のか判断しました。

前者のやり方だと文字色を赤色にしたり、背景色を黒色にすると、判別が付きやすかったのでオススメです

 

Google Chromeのデベロッパーツールの使い方を勉強

今回は、Google Chromeのデベロッパーツールの使い方を勉強しました。

これをうまく使いこなせると、コーディングの修正が早そうです

 

デベロッパーツールの基本的な操作

デベロッパーツールの基本的な操作です。

  • ショートカットキーで起動する(WinはF12、Macは⌘ + Opt + I)
  • デベロッパーツールの「閉じるアイコン」隣の「・・・」を押すと、表示位置を変更できる(「画面下配置」が便利)
  • スマートフォンアイコンを押すと、モバイルエミュレーション(レスポンシブデザインで確認)できる

 

ちなみにモバイルエミュレーションで、画面横幅を選ぶ時のやり方は3通りあります

  1. Device選択
  2. 横幅を直接数字で指定する
  3. 画面左右に表示されている3本線アイコンをドラッグする

意外と見落としがちなのが3番目のドラッグする方法です。

これを使うのが直感的で一番早かったです。

 

あと、要素を選択する「矢印アイコン」のショートカットキーも覚えておくと作業効率上がります。

※WindowsだとCtrl+Shift+C、MacはCmd+Shift+C(多分)

 

デベロッパーツールで知っておくべきこと

デベロッパーツールで知っておくべきこと(私が初めて使った時に気づかなかった所)です。

  • Style(CSS)の取り消し線は、他の優先度が高いCSSが適用されているという意味
  • 要素のCSSを見たい時は、Styleの隣の「Computed」の方が便利なこともある
  • デベロッパーツールのCSSを編集すると、動的に変更が見える
  • 自分で変更した内容は、コピペも出来る(改めて元のソースコードに打ち直す必要がない)

あとComputedの図形の色(下図)と、要素を選択すると出てくる色は、対応していることも気づきませんでした。

  • 青色:要素(中身)
  • 緑色:padding
  • 黄色:border
  • 橙色:margin

Chromeのデベロッパーツールの図形

 

【余談】Save asでセーブはできるけど

ちなみにデベロッパーツールで変更した内容を、GoogleChrome上で保存することも出来るようです。

  1. タブから「Sources」を選ぶ
  2. Pageの中から、保存したいファイルを右クリックする
  3. 「Save as」でセーブする

こんな感じです。

変更量が多い場合は、こちらから保存したほうが、作業ミスが減るかもしれません。

 

 

以上「PerfectPixelを使ってチェックと修正」というお話でした。

 

www.engineer-step.com