[0100-html-css] Add hover animation

0100-html-css/README.md

@@ -58,20 +58,11 @@ npm install
 npm run compile // sassの変更を検知してコンパイルするnodeサーバを起動
 ```
 
-※ node のバージョンは 21 以上であることを推奨しています。
+※ node のバージョンは 20 以上であることを推奨しています。
 
 nodeサーバが起動している間は、sassの変更が自動で反映されるようになっています。
 
 いきなり全てをやろうとすると処理が難しくなるので、自分で理解できる範囲まで作業を分割してコーディングを進めてください。
-
-1. サイドバーのコーディング
-2. ヘッダーのコーディング
-3. コンテンツ部分のコーディング
-4. フッター部分のコーディング
-
-と順番を決めたら、
-次はサイドバーの**「ロゴの部分をコーディングする」**という様に可能な限り作業を分割して実装を進められると効率よく実装が進められるかと思います。
-
 作業を分割してどうしても実装できない、長時間詰まってしまう部分は後回しにしてできるところからやるようにしてください。
 
 ### 5. github pagesにてサイトを公開

0100-html-css/stylesheets/sass/blocks/button.sass

@@ -1,9 +1,16 @@
 @use '../shared/_variable' as v
+@use '../shared/_global' as g
+
 .button
+  cursor: pointer
   border: 0
   padding: 12px 16px
   border-radius: 8px
   width: 100%
+  transition: 0.3s
+
+  &:hover
+    @extend %hover-default
 
 .button--primary
   background: v.$primary-color

0100-html-css/stylesheets/sass/blocks/features.sass

@@ -43,10 +43,15 @@
       width: 100%
 
   &__feature-image
+    cursor: pointer
     border-radius: 8px
     width: 768px
     height: 480px
     box-shadow: 1px 1px 8px 4px v.$shadow-color
+    transition: 0.3s
+
+    &:hover
+      @extend %hover-default
 
     @include m.sm
       width: 100%

0100-html-css/stylesheets/sass/blocks/price.sass

@@ -38,6 +38,7 @@
       min-width: 100%
 
   &__plan
+    cursor: pointer
     box-sizing: border-box
     width: 360px
     padding: 32px
@@ -46,6 +47,10 @@
     border: 1px solid v.$border-color-light
     background: v.$background-color
     box-shadow: 1px 1px 8px 4px v.$shadow-color-light
+    transition: 0.3s
+
+    &:hover
+      @extend %hover-default
 
     @include m.sm
       width: 100%

0100-html-css/stylesheets/sass/shared/_global.sass

@@ -7,5 +7,9 @@
   font-weight: normal
   font-style: normal
 
+%hover-default
+  transform: scale(1.02)
+  opacity: 0.8
+