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

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

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

スポンサードサーチ

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

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

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



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

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

分からなかったコーディング

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

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




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

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






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

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

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

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

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




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

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

ランチ

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

ごちそうさまでした!

スポンサードサーチ

お盆休み開始!

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

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



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

お盆休みにやること宣言

  • LP完成させる
  • CSS設計の本を買って、きれいなコードに書き直す
  • Sassでのcssも書く
  • Sassのフレームワークもあるらしいので調べる
  • twitterで教えていただいたcssアニメーションを調べる
  • ブログで使う会話風の吹き出しを作成する

振り返り

  • 三角形のcss作成ツールがあることが分かった
  • フッターのコピーライト文はsmallタグを使うということを覚えていた私◎
  • 1週間、座りすぎたせいか、痔になったかもしれない。お尻が痛い

 

コメント

タイトルとURLをコピーしました