Webデザイナー日記 Day 8『プラグインの良さ悪さ八海山』
LPの課題を解決しました
今日も出社と同時にLPをもくもく。
昼休みにはTwitterでヘルプを出し、良いサイトを紹介していただきました。
しかし、結局分からず…。
ただ、進歩はありまして、slickスライダーの下の隙間（margin）を埋めることができました！
slickスライダー謎の隙間撃退法
解決できたのは毎度お世話になっているChromeデベロッパーツールさんのおかげでした。
私の場合、基本は矢印モード（画像参照）
でページ上で要素にカーソルを合わせてプロパティを見るのですが、コードの方（画像参照）を選択してもプロパティが見れます。
今回、矢印モードでその隙間を指しても、その後ろのwrapのdivしか指せませんでした。
そこで、コードから原因を探してみる事にしました。
すると、原因が判明。
slickをダウンロードした時のslick-theme.cssの中にあるプロパティでした。
そのクラスは、私が自分でhtmlでクラス付けしたものではなく、slickのCDNのjsファイルによってクラス付けされたものだと思われます。
そうです、思わぬ所で勝手にクラス付され、それをtheme-cssでマージンされていたのです。
一方、ドロワーの隙間は結局、原因が分かりませんでした…。
プラグインの良し悪し
今回のLPコーディングでは、
slick
Drawer
の２つのプラグインを使って実装しました。
説明どおりに書けば簡単に実装できますが、カスタマイズしたいとなると、どこをいじればいいか理解しなければなりません。
そこはプラグインの良し悪しだなと感じました。
同時に、プラグインなしでも自分でスライダーやドロワーのコードを考えて作れるレベル、またはプラグインのデフォルトのテーマcssやjsファイルを見てすぐにどういう仕組になっているか理解できるレベルになりたいと思いました。
Javascriptも勉強しなきゃね
LP提出！
ついにLPを提出します。自分の中で完成度は8割くらいでした。
アウトプット大全を通して、とりあえず完成させてから、修正に時間をかけた方がよいという事を学んだので、とりあえず提出することにしました。
ちなみに今回のLPトレースでの課題は、以下3点
- レスポンシブした時の隙間（overflow-x:hiddenするとハンバーガーメニューが見えなくなってしまうのでそれは無効）
- レスポンシブの表は時間がなくて画像で処理してしまった
- フォントは似たようなもので適当に仕上げてしまった
とくに１に関しては先輩に何かアドバイスいただけないかなという淡い期待を持っての提出です^^;
甘えるな
先輩にLPのファイルを提出したのは良いのですが、時間を見たら退勤時間10分前。
残業を嫌う先輩、さーせん！
先輩からのお言葉
いよいよ先輩にファイルを提出。
ファイルをドロップボックスにあげるやいなや、早速チェックする先輩。
…。（カチッ）
…。（カチッ）
どきどき…。
ドキドキ…。
Doki Doki…。
土器土器…。
１週間でよくぞここまで仕上げてくれましたって感じですね。素晴らしい
うおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお
紅だああああああああああああああああああああああああああああああああああ
落ち着け
先輩からのアドバイス
この前も言ったんですが、デザインを他からもらってきた場合に一番重視して欲しいのは、『いかにデザイン通りに仕上げるか』です。
今回でしたら、このフォントの種類をイラレ通りにしたり、文字の装飾を付けたり…。
あとは、これ（レスポンシブのあの隙間）とかも…ですね(笑)
でも、そういう細かい所以外は、ほぼほぼオッケーですね
嬉しいいいいいいいいいいいいいいいいいいいいいい
紅だああああああああああああああああああああああ
天丼ね
その後、上手くできなかった所を畳み掛けるように質問。丁寧に答えてくださいました。
３つくらい質問した所で、
ま、もう退勤時間なので続きは明日にしましょう！
と。
いつ何時も冷静かつ、残業を嫌う先輩。
あざーっす！
振り返り
LP提出はできたものの、フォルダ管理、CSSのクラス管理がめちゃくちゃだったので、勉強が必要。今回LPだから良かったものの、サイトとなると更に管理が必要となる。がんばる。
コメント