CSSの整理

ics-creative · Oct 24, 2024 · 6684d70 · 6684d70
1 parent 3d1b4c8
commit 6684d70
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 10 deletions.
diff --git a/src/assets/styles/common.css b/src/assets/styles/common.css
@@ -1,4 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap");
+@import url("./values.css");
+@import url("./centerHole.css");
+@import url("./geometricMask.css");
+@import url("./maskAnimation.css");
 
 * {
   box-sizing: border-box;

diff --git a/src/assets/styles/values.css b/src/assets/styles/values.css
@@ -64,11 +64,11 @@
     mask-composite: add, subtract;
   }
 
-  &.subtractIntersection {
+  &.subtractIntersect {
     mask-composite: subtract, intersect;
   }
 
-  &.intersectionExclude {
+  &.intersectExclude {
     mask-composite: intersect, exclude;
   }
 

diff --git a/src/center_hole/index.html b/src/center_hole/index.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=640, initial-scale=1.0" />
     <title>真ん中を丸抜きするマスク</title>
     <link rel="stylesheet" href="/assets/styles/common.css" />
-    <link rel="stylesheet" href="/assets/styles/centerHole.css" />
   </head>
   <body>
     <div class="mainContents">

diff --git a/src/geometric_mask/index.html b/src/geometric_mask/index.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=640, initial-scale=1.0" />
     <title>幾何学模様なマスク</title>
     <link rel="stylesheet" href="/assets/styles/common.css" />
-    <link rel="stylesheet" href="/assets/styles/geometricMask.css" />
   </head>
   <body>
     <div class="mainContents">

diff --git a/src/mask_animation/index.html b/src/mask_animation/index.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=640, initial-scale=1.0" />
     <title>マスクアニメーション</title>
     <link rel="stylesheet" href="/assets/styles/common.css" />
-    <link rel="stylesheet" href="/assets/styles/maskAnimation.css" />
   </head>
   <body>
     <div class="mainContents">

diff --git a/src/values/index.html b/src/values/index.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=640, initial-scale=1.0" />
     <title>mask-compositeの値</title>
     <link rel="stylesheet" href="/assets/styles/common.css" />
-    <link rel="stylesheet" href="/assets/styles/values.css" />
   </head>
   <body>
     <div class="mainContents">
@@ -73,26 +72,26 @@ <h2>3つ（add, subtract）</h2>
         </div>
       </section>
       <section class="valueSection">
-        <h2>3つ（subtract, intersection）</h2>
+        <h2>3つ（subtract, intersect）</h2>
         <div class="valueWrapper">
           <div class="valueImages">
             <img src="/assets/images/mask_triple.png" alt="" width="240" height="160" />
           </div>
           <div>→</div>
           <div class="maskWrapper">
-            <div class="mask subtractIntersection triple"></div>
+            <div class="mask subtractIntersect triple"></div>
           </div>
         </div>
       </section>
       <section class="valueSection">
-        <h2>3つ（intersection, exclude）</h2>
+        <h2>3つ（intersect, exclude）</h2>
         <div class="valueWrapper">
           <div class="valueImages">
             <img src="/assets/images/mask_triple.png" alt="" width="240" height="160" />
           </div>
           <div>→</div>
           <div class="maskWrapper">
-            <div class="mask intersectionExclude triple"></div>
+            <div class="mask intersectExclude triple"></div>
           </div>
         </div>
       </section>