diff --git a/src/components/tab/sp-tab.ts b/src/components/tab/sp-tab.ts
index d1cfc33..a19a05c 100644
--- a/src/components/tab/sp-tab.ts
+++ b/src/components/tab/sp-tab.ts
@@ -2,101 +2,85 @@
 import foundationStyle from "../foundation.css?inline" assert { type: "css" };
 // @ts-ignore
 import tabStyle from "./tab.css?inline" assert { type: "css" };
-import { SpeedaIconTypes } from "../icon/icons";
+// @ts-ignore
+import resetStyle from "@acab/reset.css?inline" assert { type: "css" };
 import { SpIcon } from "../icon/sp-icon";
 
-type TabType = "tabWhite" | "tabGray";
+type TabType = "fillWhite" | "fillGray";
 
 const styles = new CSSStyleSheet();
-styles.replaceSync(`${foundationStyle} ${tabStyle}`);
+styles.replaceSync(`${foundationStyle} ${tabStyle} ${resetStyle}`);
 
 export class SpTab extends HTMLElement {
-  #selected: boolean;
-  #disabled: boolean;
-  #type: TabType;
-  #createNewIcon: boolean;
-  #createNewIconElement = new SpIcon();
-  tabElement = document.createElement("button");
-  textElement = document.createElement("span");
+  #selected: boolean = false;
+  #disabled: boolean = false;
+  #type!: TabType;
+  #plusIconElement = new SpIcon();
+  #tabElement = document.createElement("button");
+  #textElement = document.createElement("span");
 
   set text(value: string) {
-    this.textElement.innerText = value;
-  }
-
-  get selected() {
-    return this.#selected;
-  }
-  set selected(value: boolean) {
-    this.#selected = value;
-    value ? this.#onSelectedAdd() : this.#onSelectedRemove();
+    this.#textElement.innerText = value;
   }
 
-  get disabled() {
-    return this.#disabled;
-  }
   set disabled(value: boolean) {
-    const tab = this.tabElement;
     this.#disabled = value;
+    const tab = this.#tabElement;
     value ? tab.classList.add("isDisable") : tab.classList.remove("isDisable");
-    this.#tabDisabledUpdate();
+    this.#tabElement.disabled = this.#disabled;
   }
 
-  get type() {
-    return this.#type;
+  set selected(value: boolean) {
+    this.#selected = value;
+    value ? this.#tabElement.classList.add("-selected") : this.#tabElement.classList.remove("-selected")
+    this.#tabElement.setAttribute("aria-selected", this.#selected+"");
   }
   set type(value: TabType) {
-    const tab = this.tabElement;
+    this.#type = value;
+    const tab = this.#tabElement;
     const typeClassList = {
-      tabWhite: "-white",
-      tabGray: "-gray",
+      fillWhite: "-fillWhite",
+      fillGray: "-fillGray",
     };
     tab.classList.remove(typeClassList[this.#type]);
-    tab.classList.add(typeClassList[value]);
-    this.#type = value;
-  }
-  get createNewIcon() {
-    return this.#createNewIcon;
+    tab.classList.add(typeClassList[this.#type]);
   }
-  set createNewIcon(value: boolean) {
-    this.#createNewIcon = value;
-    if (value === true) {
-      this.tabElement.insertBefore(
-        this.#createNewIconElement,
-        this.textElement,
+
+  set plusIcon(value: boolean) {
+    this.#tabElement.appendChild(this.#textElement);
+    if (value) {
+      this.#tabElement.insertBefore(
+        this.#plusIconElement,
+        this.#textElement,
       );
     } else {
-      this.#createNewIconElement.remove();
+      this.#plusIconElement.remove();
     }
   }
 
   static get observedAttributes() {
-    return ["text", "selected", "create-new-icon", "disabled", "type"];
+    return ["text", "selected", "plus-icon", "disabled", "type"];
   }
 
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
-    this.shadowRoot.adoptedStyleSheets = [
-      ...this.shadowRoot.adoptedStyleSheets,
+    this.shadowRoot!.adoptedStyleSheets = [
+      ...this.shadowRoot!.adoptedStyleSheets,
       styles,
     ];
-    this.tabElement.classList.add("spds__tab");
-    this.tabElement.setAttribute("role", "tab");
-    this.tabElement.setAttribute("aria-tabindex", "0");
-    this.textElement.classList.add("spds__tabText");
-    this.tabElement.appendChild(this.textElement);
   }
   connectedCallback() {
-    this.#createNewIconElement.classList.add("base__icon");
-    this.#createNewIconElement.size = "small";
-    this.#createNewIconElement.type = "plus";
-    if (typeof this.selected === "undefined") {
-      // this.selected = false;
-      this.tabElement.setAttribute("aria-selected", "false");
-    }
-    if (typeof this.type === "undefined") this.type = "tabWhite";
+    this.#tabElement.classList.add("spds__tab");
+    this.#tabElement.setAttribute("role", "tab");
+    this.#tabElement.setAttribute("aria-tabindex", "0");
+    this.#textElement.classList.add("spds__tabText");
+
+    this.#plusIconElement.classList.add("base__icon");
+    this.#plusIconElement.size = "small";
+    this.#plusIconElement.type = "plus";
     this.setAttribute("role", "tablist");
-    this.shadowRoot.appendChild(this.tabElement);
+    this.shadowRoot!.appendChild(this.#tabElement);
   }
   attributeChangedCallback(name: string, oldValue: string, newValue: string) {
     if (oldValue === newValue) return;
@@ -113,24 +97,12 @@ export class SpTab extends HTMLElement {
       case "type":
         this.type = newValue as TabType;
         break;
-      case "create-new-icon":
-        this.createNewIcon = newValue === "true" || newValue === "";
+      case "plus-icon":
+        this.plusIcon = newValue === "true" || newValue === "";
         break;
     }
   }
 
-  #onSelectedAdd() {
-    this.tabElement.classList.add("-selected");
-    this.tabElement.setAttribute("aria-selected", "true");
-  }
-  #onSelectedRemove() {
-    this.tabElement.classList.remove("-selected");
-    this.tabElement.setAttribute("aria-selected", "false");
-  }
-
-  #tabDisabledUpdate() {
-    this.tabElement.disabled = this.disabled;
-  }
 }
 
 customElements.get("sp-tab") || customElements.define("sp-tab", SpTab);
diff --git a/src/components/tab/tab.css b/src/components/tab/tab.css
index c4f35b0..7c4ac63 100644
--- a/src/components/tab/tab.css
+++ b/src/components/tab/tab.css
@@ -1,6 +1,4 @@
 :host {
-  --padding-inline: 16px;
-
   display: inline-block;
   min-width: 0;
   max-width: 100%;
@@ -17,80 +15,54 @@
   background: none;
   display: inline-flex;
   min-width: 80px;
-  padding: 2px 16px;
+  padding-block: 2px;
+  padding-inline: 16px;
   justify-content: center;
   align-items: center;
   color: var(--color-semantic-text-regular);
   font-size:14px;
-  border-radius: 14px;
+  border-radius: 1rem;
   min-height: 28px;
-
-  &:hover{
-    cursor:pointer;
-  }
-
-  &:disabled{
-    border: 1px solid var(--color-semantic-border-regular);
-    background-color: var(--color-semantic-surface-regular-2);
-    color: var(--color-semantic-text-disabled);
-    cursor: not-allowed;
-  }
-
-  &.-selected{
-    border: 1px solid var(--color-semantic-border-selected);
-    background-color: var(--color-semantic-surface-selected);
-    color: var(--color-semantic-text-inverse);
-    font-weight: bold;
+  column-gap: 4px;
 
     &:hover{
-      border: 1px solid var(--color-semantic-surface-selected-hover);
-      background-color: var(--color-semantic-surface-selected-hover);
+      cursor:pointer;
     }
-
-    &:disabled{
+    &.-fillGray{
       border: 1px solid var(--color-semantic-border-regular);
       background-color: var(--color-semantic-surface-regular-2);
-      color: var(--color-semantic-text-disabled);
-      cursor: not-allowed;
-      font-weight: normal;
-    }
-  }
-
-  &.-gray{
-    border: 1px solid var(--color-semantic-border-regular);
-    background-color: var(--color-semantic-surface-regular-2);
 
-    &:hover{
-      background-color: var(--color-semantic-surface-regular-4);
-    }
-
-    &.-selected {
-      border: 1px solid var(--color-semantic-border-selected);
-      background-color: var(--color-semantic-surface-selected);
-      color: var(--color-semantic-text-inverse);
+      &:hover{
+        background-color: var(--color-semantic-surface-regular-4);
+      }
 
-      &:hover {
-        border: 1px solid var(--color-semantic-surface-selected-hover);
-        background-color: var(--color-semantic-surface-selected-hover);
+      &.-selected {
+        border-color: var(--color-semantic-border-selected);
+        background-color: var(--color-semantic-surface-selected);
+        color: var(--color-semantic-text-inverse);
+
+        &:hover {
+          border-color: var(--color-semantic-surface-selected-hover);
+          background-color: var(--color-semantic-surface-selected-hover);
+        }
+
+        &:disabled{
+          border-color: var(--color-semantic-border-regular);
+          background-color: var(--color-semantic-surface-regular-2);
+          color: var(--color-semantic-text-disabled);
+          cursor: not-allowed;
+        }
       }
 
       &:disabled{
-        border: 1px solid var(--color-semantic-border-regular);
+        border-color: var(--color-semantic-border-regular);
         background-color: var(--color-semantic-surface-regular-2);
         color: var(--color-semantic-text-disabled);
         cursor: not-allowed;
       }
     }
 
-    &:disabled{
-      border: 1px solid var(--color-semantic-border-regular);
-      background-color: var(--color-semantic-surface-regular-2);
-      color: var(--color-semantic-text-disabled);
-      cursor: not-allowed;
-    }
-  }
-
-  &.-white{
+  &.-fillWhite{
     border: 1px solid var(--color-semantic-border-regular);
     background-color: var(--color-semantic-surface-regular-1);
 
@@ -99,25 +71,24 @@
     }
 
     &.-selected {
-      border: 1px solid var(--color-semantic-border-selected);
+      border-color: var(--color-semantic-border-selected);
       background-color: var(--color-semantic-surface-selected);
       color: var(--color-semantic-text-inverse);
 
-      &:hover {
-        border: 1px solid var(--color-semantic-surface-selected-hover);
-        background-color: var(--color-semantic-surface-selected-hover);
-      }
-
-      &:disabled{
-        border: 1px solid var(--color-semantic-border-regular);
-        background-color: var(--color-semantic-surface-regular-2);
-        color: var(--color-semantic-text-disabled);
-        cursor: not-allowed;
-      }
+    &:hover {
+      border-color: var(--color-semantic-surface-selected-hover);
+      background-color: var(--color-semantic-surface-selected-hover);
     }
+    &:disabled{
+      border-color: var(--color-semantic-border-regular);
+      background-color: var(--color-semantic-surface-regular-2);
+      color: var(--color-semantic-text-disabled);
+      cursor: not-allowed;
+    }
+  }
 
     &:disabled{
-      border: 1px solid var(--color-semantic-border-regular);
+      border-color: var(--color-semantic-border-regular);
       background-color: var(--color-semantic-surface-regular-2);
       color: var(--color-semantic-text-disabled);
       cursor: not-allowed;
diff --git a/stories/tab/sp-tab.story.ts b/stories/tab/sp-tab.story.ts
index 36da4e2..73ae60c 100644
--- a/stories/tab/sp-tab.story.ts
+++ b/stories/tab/sp-tab.story.ts
@@ -10,9 +10,9 @@ const meta: Meta = {
     text: { type: "string" },
     type: {
       control: { type: "select" },
-      options: ["tabWhite", "tabGray"],
+      options: ["fillWhite", "fillGray"],
     },
-    createNewIcon: { type: "boolean" },
+    plusIcon: { type: "boolean" },
     selected: { type: "boolean" },
     disabled: { type: "boolean" },
     onclick: {
@@ -21,8 +21,8 @@ const meta: Meta = {
   },
   args: {
     text: "sp-tab",
-    type: "tabGray",
-    createNewIcon: false,
+    type: "fillGray",
+    plusIcon: false,
     selected: false,
     disabled: false,
     onclick: action("onclick"),
@@ -34,32 +34,32 @@ type Story = StoryObj;
 
 export const Basic: Story = {
   args: {
-    type: undefined,
-    createNewIcon: undefined,
+    type: "fillGray",
+    plusIcon: undefined,
     selected: undefined,
     disabled: undefined,
   },
 };
 export const typeGray: Story = {
   args: {
-    type: "tabGray",
-    createNewIcon: undefined,
+    type: "fillGray",
+    plusIcon: undefined,
     selected: undefined,
     disabled: undefined,
   },
 };
 export const typeWhite: Story = {
   args: {
-    type: "tabWhite",
-    createNewIcon: undefined,
+    type: "fillWhite",
+    plusIcon: undefined,
     selected: undefined,
     disabled: undefined,
   },
 };
-export const createNewIcon: Story = {
+export const plusIcon: Story = {
   args: {
     type: undefined,
-    createNewIcon: true,
+    plusIcon: true,
     selected: undefined,
     disabled: undefined,
   },
@@ -71,21 +71,21 @@ export const list: Story = {
       <sp-tab
         text="タブのリストだよ"
         type=${args.type}
-        create-new-icon=${args.createNewIcon}
+        plus-icon=${args.plusIcon}
         selected=${args.selected}
         disabled=${args.disabled}
       ></sp-tab>
       <sp-tab
         text="タブのリストだよ"
         type=${args.type}
-        create-new-icon=${args.createNewIcon}
+        plus-icon=${args.plusIcon}
         selected=${args.selected}
         disabled=${args.disabled}
       ></sp-tab>
       <sp-tab
         text="タブのリストだよ"
         type=${args.type}
-        create-new-icon=${args.createNewIcon}
+        plus-icon=${args.plusIcon}
         selected=${args.selected}
         disabled=${args.disabled}
       ></sp-tab>
@@ -100,8 +100,8 @@ export const All: Story = {
         <div class="sampleAll__contents">
           <sp-tab
             text="Grayのタブだよ"
-            type="tabGray"
-            create-new-icon=${args.createNewIcon}
+            type="fillGray"
+            plus-icon=${args.plusIcon}
             selected=${args.selected}
             disabled=${args.disabled}
           ></sp-tab>
@@ -112,8 +112,8 @@ export const All: Story = {
         <div class="sampleAll__contents">
           <sp-tab
             text="Whiteのタブだよ"
-            type="tabWhite"
-            create-new-icon=${args.createNewIcon}
+            type="fillWhite"
+            plus-icon=${args.plusIcon}
             selected=${args.selected}
             disabled=${args.disabled}
           ></sp-tab>
@@ -125,7 +125,7 @@ export const All: Story = {
           <sp-tab
             text="新規作成アイコン付き"
             type=${args.type}
-            create-new-icon="true"
+            plus-icon="true"
             selected=${args.selected}
             disabled=${args.disabled}
           ></sp-tab>
@@ -138,21 +138,21 @@ export const All: Story = {
             <sp-tab
               text="タブのリストだよ"
               type=${args.type}
-              create-new-icon=${args.createNewIcon}
+              plus-icon=${args.plusIcon}
               selected=${args.selected}
               disabled=${args.disabled}
             ></sp-tab>
             <sp-tab
               text="タブのリストだよ"
               type=${args.type}
-              create-new-icon=${args.createNewIcon}
+              plus-icon=${args.plusIcon}
               selected=${args.selected}
               disabled=${args.disabled}
             ></sp-tab>
             <sp-tab
               text="タブのリストだよ"
               type=${args.type}
-              create-new-icon=${args.createNewIcon}
+              plus-icon=${args.plusIcon}
               selected=${args.selected}
               disabled=${args.disabled}
             ></sp-tab>
diff --git a/tsconfig.json b/tsconfig.json
index 1dc7660..0f2c585 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,11 +9,10 @@
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
     "outDir": "dist",
-    "skipLibCheck": true,
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "exclude": ["example", "dist"]
+  "exclude": ["dist"]
 }