実は昨日、右手が痛すぎて、ほとんど学習できませんでした。多分、腱鞘炎？？
早速、「プログラミング 手が痛い」とか、「コーディング 腱鞘炎」で検索してみると、やはりいますね。。腱鞘炎の方が。マウスを変えたり、机を変えたりしてしのぐしかないようです。
とりあえず、私はこちらの大正製薬さんから出ている「Counterpain（カウンターペイン）」を塗ってみました。筋肉痛などに効く薬で、いわゆる「バン○リン」みたいなやつかしら？
意外と効いたようで、今朝は昨日ほど痛くなかったです。ただ、臭いがすごいんですよねー・・。息子に「臭いからやめて！」って言われてしまいました。。。
「初級EX」でいきなりつまづいた事
昨日から、しょーごさんの課題「初級EX」に取り組み始めたのですが、まずはマガジンを読んで必要なところを勉強し、今日は早速コードを書くことに。
先日入れたChrome拡張機能のPerfect Pixelを使おうと思ったのですが、むむ？初級EXにはPerfect Pixel用のデータが提供されていない？？まぁ、本番だとその画像も自分で用意することになるとは思うのですが、カンプからどうやって画像を書き出すのか分からない・・・。
私はAdobe XDのソフトを持っていないので、とりあえずurl版のデザインカンプを使っているのですが、このurl版から、どうやってカンプの画像をダウンロードするのか分からないのです。
「XDカンプ 画像 書き出し」とかで調べても、出てくるのはカンプから画像データ（コーディングに使うためのパーツ）のダウンロードの仕方ばかりで、カンプそのものをダウンロードするやり方が見つかりませんでした・・・。
本当は、最初からカンプを当てて、Perfect Pixelを使いながらコーディングしてみたかったのですが、とりあえず諦めて先に進むことに。やり方は、最終チェックの時までに調べてみようと思います。
line-heightとletter-spacingをいい加減に書いていた
いままで、主に「Codestep」さんの課題を順番にこなしていたのですが、とりあえず見た目がなんとなくカンプ（もしくはデモサイト）と同じ感じになればいいか〜と、今思えばかなり適当に仕上げていました（汗）
カンプを正確に再現する、には程遠い出来上がりだったんですね。なので、文字の部分も、フォントサイズと、色、太字かどうかくらいしか確認しておらず、line-heightやletter-spacingなんて、確認もしていませんでした。
で、どうやって書くの？？と思い調べてみたところ、どうやら
line-height → 行間÷font-sizeで計算。数値で記述
letter-spacing →emで記述した方が良い。letter-spacing ÷ font-size = ◯em
letter-spacingも行間も、カンプの「スタイル」のところに書いてあります。例えばコレ↓だと、AVというやつがletter-spacingで、38と書いてあるのが行間ですね。
今まで適当にしか書いていなかった文字周りの数値を、全部細かく指定してちゃんと書きたいと思います。
そういうところを気をつけて書いていると、「同じ記述が何回も出てくるなぁ・・・」と感じるのですが、これは効率の良いコードの書き方を覚えれば、もう少し簡略化できていくのだと思います。そして、多分Sassとか勉強したら、もっと少ないコードで綺麗に書けるんだろうなーと思いました。
早くjQueryとSassの勉強に進みたいです。
コメント