📖

【初心者向け/ITスクール 71日】個人プロジェクトスタート6日目

2023/10/30に公開

CSS 3

HTML 5

tech

はじめに

今日は、6日目!　UML、ERDは諦めず、まずViewから作成しました！
今日は、完全でデザインの日でした！
shopping mallなので、welcome pageに全力を入れました！

Welcome page

こちらのサイトから、ロゴを作成しました。無料ではありませんが、様々なテンプレートがあり、スクリーンショットを取って、ロゴを作成しました。

今日は、WELCOME PAGEを作成中です！
久しぶりに、gridを使いましたが、イメージなどのサイズ調節に失敗し、後で、canvaで最適のサイズをアレンジしました。
相当、デザインに時間を使ってしまったのですが、難しいスキルではなく、今まで学んだ整列、flexbox,gridを活用することにも集中しました。

codingだけでは、写真の割合などをデザイン的に良い形で調節することが難しいかったので大変で、HPのコンセプトやイメージのコンセプトを決めることが結構難しかったです！

Appleのgrid designを参考にしました。

明日からは本格に管理者ログイン機能、商品登録、商品ページまで作成してみたいと思います！

久しぶりのcssで結構感を失って時間がたくさんかかりました。

z-index

 .header__menus__insta {
    position: absolute;
    top: 1rem;
    right: 6rem;
    z-index: 1;
  }
  .header__menus__user {
    position: absolute;
    gap: 1rem;
    top: 1rem;
    right: 2rem;
  }

position relativeを基準にして、absoluteが二つある場合、z-indexで解決ができます。
最初,instaのみhover効果が適用されなかったので、異なるlayerにあるのかなと考えて、z-indexを使ってみると解決することができました。

はじめに

Welcome page

z-index

Discussion