Webデザイナー日記 Day 5『コーディングスキルを高めよ』

Webデザイナーじゃない日記

2019.08.09

この記事は約2分で読めます。

Webデザイナー日記 Day 5『コーディングスキルを高めよ』

Contents

鬼のLPコーディング、一通り終わり！

6時間睡眠で絶不調の中、もくもくとLPコーディングを進めました。

そんな事もあって、退勤時間までに、とりあえずフッターまで一通りコーディングすることができました。

あとは細かい所、JS実装、レスポンシブ化すれば完成です。

しかし実は、2点ほど、分からなくて誤魔化して進めた所がありました。

1つ目は、三角形のドロップシャドウの実装です。（画像のようなもの）

twitterで助けを請い、意見をいただきましたが、結局うまくいかず、画像で実装しました。

ちなみに三角形のCSSを簡単に自動で作成してくれるサイトを見つけました。

これで時間短縮しました。

2つ目は、四角形をずらしてドロップシャドウもつける実装です。

分かりにくいので画像を参照ください。（上が実際のもの、下は図で表しました）

ボックスの右下に同じ背景色のボックスをズラして、さらにそこにボックスシャドウをつける実装です。

フォトショップならチョチョイのチョイなのにcssだと悩んでしまいます…。

疑似要素::afterでpositon:absolute、z-indexでレイヤーっぽくしようとしましたが、うまく行きませんでした…。

もし、よい実装方法がありましたら教えていただければと思います。

多分twitterの方でも改めてつぶやきます。

社員が少ないので、出前館で社長におごっていただきました。

ごちそうさまでした！

今日の今日まで、来週もガッツリ出勤するつもりだったのですが、15日までお盆休みでした。

夏休みなどないと思っていたので、悲しいかな、特に予定がありません…。

この間にLPを完成させたいと思います。