PSDを見ながらcssを記述
PSDデータからmargin、paddingなどなど、間隔を測るときに楽チンな方法を今日は教わりました。(デザイナーさん、ありがとうございます‼︎)
私は今まで「シェイプツール」で長方形を作ってました。あまりいいやり方じゃないんだろな…とは思ってました(^^;;
教えて頂いたのは「長方形選択ツール」です！情報パネルでwidth、hightが確認できます。
ショートカットキー「M」で選択、測るだけです。
それと合わせて、右側のパネルも整理しておくべきだと学びました。コーダーは文字と情報を見やすく(上下移動させたりして)配置するのが良いかと思います。
文字パネルと合わせ、PSDデータからテキスト部分の「line-hight」を知る方法も書いていきます。確認するのは文字サイズと行間の部分のpx数。電卓機能(Macさんは「alt ＋ shift」で表示されるアルフレッドにそのままに割り算を記入)で
フォントサイズ ➗ 行間設定
ずばり答えがline-hightになります！
実は今まで見た目から判断してました…。今思うと甘々ですね（ーー；）
デザイナーさんの1pxのこだわりを汲み取って、100%同じものにする‼︎昨日のスクリーンショットと合わせてマストにしていこうと思います。
今日のところはここまでにします。
下にプチメモを記述です。
今日のコーディングで初めてのワードが出てきたのでメモします。
SP版のコーディングをしている時、headerのlink部分に
「rel="canonical"」
がありました。初見です。。
ググると出てきました！
下の方、
ウェブサイトが同一ファイルを複数の URL から提供している場合（コンテンツ配信ネットワークを使用している場合など）に、Google に対して優先する URL を通知したいといったケースが挙げられます。
とのことです。
ちゃんとGoogleの方に書いてありました。
まだほんのり分かったぐらい…です。。(^^;; ですがバシバシ登場してくるものなので、要確認ですね！
