XDからコーディング01 | クリ★スタさん初級編
Twitterで見つけたのでやってみました。XDカンプなんて実務に就くか有料記事買わないと無いもんだと思っていたので、無料とかほんと感無量です。無駄に韻を踏みました。ありがとうございます。
自己紹介記事でもお話ししましたが、私はこれまでデザイナーメイン（しかもDTP）でやってきたので、コーディングの知識は素人に産毛が生えてきた程度です。実務に耐えうるようなコーディング知識を身に付けたいと思って今回の課題に取り組みました。では以下所感まとめです。
JSかけるようにならねば
解説記事見てショックを受けたのはこれ。また別記事で解説が上がるようなのですが、そうか時代はもうjQueryとかじゃないのね…。が、がんばります。自サイトも左タイトル右ハンバーガーでいこうと思っていたので、そのまま解答例を移植しようと思います。ありがてぇ。
レスポンシブはPC後SP？ SP後PC？？
時代はモバイルファーストでレスポンシブだー、という噂を聞いていたのですが、解説記事ではPC後SP化するCSSで書かれていました。どっちが主流なんだろう。案件にもよるのかな。XDデータがPC、SPの順で並んでいたので、何も考えずこの順でコーディングすればよかった。ま、いっか。
ちなみにブレイクポイントをどのくらいにしようか悩んだのですが、nav部分が1200pxだったのでここにしました。
文字周りは注意！
最初トラップかと思ったんですが、フォントが3種類使われてて。規則性見分けるのが難しかったです。解説記事では特に言及されていなかったようなのですが、この辺きちんとやろうと思うとXDのテキストタイルの見方をしっかりやらないといけないなぁと感じました。
特にletter-spacingやline-heightの計算はややこしかったです。今回私は文字は単位emで、特に変数準備せず挑んだんですが、計算がややこしかったー。もっと楽にする設定がないのか探してみようと思います。
勉強になったので覚書。
letter-spacing: 文字の間隔値 / 1000 em;
デザインでXD使うときには、トラッキングもよく利用していたのですが、これコーディングするときに細かい数値が入っていると気づかない場合もありますよねきっと…うん…。気をつけよう。
line-height: 行間値 / フォントサイズ;
これはググりました。以下のnoteにお世話になりました。ありがとうございました。で、やっぱりletter-spacingでも迷われていたようですね。デザイナー視点で見るとトラッキングやカーニング値が1000で１文字分なのは常識だと思うのですが、コーダー目線で見たとき計算方法が不明で。いい勉強になりました。
問い合わせ欄のlabelとかforとか。
今までずっとWPのプラグイン、ContactForm7を使うことを考えてデザインとか考えてたんで、いざ組め！ってなったときに全然わかりませんでした。labelタグとかあったよねぇーうんうん！って感じだったので、この辺ちゃんと復習しようと心に誓いました。あと私の弱点はtableタグ周りです。
要素間の距離を測るのはoptionキー
これもデザインでXDを使うときにはさほど必要としていなかったのですが、XDの基本的な使い方の一つですよね。デザインメインで使うときにも、確認用で覚えておくと便利そうなショートカットキーだったのでメモです。
まとめ
XDってほんと素敵なアプリケーションですよね。あと勉強用の無料配布データのありがたいこと。しかも解答解説まであるとか神か…。解説記事は無理だけど、私もXDデータ勉強用にフリー配布してみようかなぁ。それもまた勉強になりそう。
今回も最後までお読みいただきありがとうございました。ではまた。
ポチる前にそのお金であったかい飲み物買いましょう。