diff --git a/src/components/tabitems/template/CreateTemplateByCss.tsx b/src/components/tabitems/template/CreateTemplateByCss.tsx
index 6856979..fc0f3e8 100644
--- a/src/components/tabitems/template/CreateTemplateByCss.tsx
+++ b/src/components/tabitems/template/CreateTemplateByCss.tsx
@@ -1,12 +1,19 @@
 import styled from 'styled-components';
 import React, { useContext, useEffect, useState } from 'react';
-import { Button, Input, Modal, Select } from 'antd';
+import { Button, Input, List, Modal, Select, Typography, message } from 'antd';
+import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
+
 import Section from '../common/Section';
 import SubTitle from '../common/SubTitle';
-import { saveUserTemplates } from '../../../features/userTemplates';
+import {
+  deleteUserTemplates,
+  saveUserTemplates,
+  templateStyleToCssText,
+} from '../../../features/userTemplates';
 import { PropsContext } from '../../../contexts/PropsContext';
 import type { SelectProps } from 'antd';
 import t from '../../../features/translator';
+import { Template } from '../../../types/Template';
 export const CreateTemplateByCss = () => {
   const Description = styled.p`
     font-size: 10pt;
@@ -33,48 +40,135 @@ export const CreateTemplateByCss = () => {
     { value: 'h3', label: 'h3' },
   ];
 
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState<boolean>(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
+
+  // テンプレートの作成
+  const onCreateOk = async () => {
+    if (css === '') {
+      alert('CSSを入力してください');
+      return;
+    }
+    if (templateName === '') {
+      alert('テンプレート名を入力してください');
+      return;
+    }
+    const templates = prop.userTemplates;
+    if (templates.findIndex((t) => t.name === templateName) > -1) {
+      const ok = confirm(
+        '同じ名前のテンプレートが存在します。上書きしますか？',
+      );
+      if (!ok) {
+        return;
+      }
+    }
+    if (templateName) {
+      try {
+        await saveUserTemplates(css, templateName, tags, prop);
+        setIsCreateModalOpen(false);
+        messageApi.open({
+          type: 'success',
+          content: 'テンプレートを作成しました',
+          duration: 5,
+        });
+      } catch (e) {
+        alert(e);
+      }
+    }
+  };
+
+  // テンプレートの編集
+  const edit = (template: Template) => {
+    setTemplateName(template.name);
+    setTags(template.tags);
+    setCss(templateStyleToCssText(template.styles));
+    setIsEditModalOpen(true);
+  };
+
+  const onEditOk = async () => {
+    try {
+      await saveUserTemplates(css, templateName, tags, prop);
+      setIsEditModalOpen(false);
+      messageApi.open({
+        type: 'success',
+        content: 'テンプレートを作成しました',
+        duration: 5,
+      });
+    } catch (e) {
+      alert(e);
+    }
+  };
+
+  // テンプレートの削除
+  const deleteTemplate = async (template: Template) => {
+    const ok = confirm('テンプレートを削除しますか？');
+    if (ok) {
+      await deleteUserTemplates(template.name, prop);
+    }
+  };
+
+  const onCancel = () => {
+    setTemplateName('');
+    setCss('');
+    setTags([]);
+    setIsCreateModalOpen(false);
+    setIsEditModalOpen(false);
+  };
 
   useEffect(() => {
     setCss('');
     setTemplateName('');
     setTags([]);
-  }, [isModalOpen]);
+  }, [isCreateModalOpen]);
 
   return (
-    <Section>
-      <SubTitle text={'テンプレートの作成'} />
-      <Description>{'CSSを入力してテンプレートを作成します'}</Description>
-      <Button
-        block
-        type="default"
-        onClick={async () => {
-          setIsModalOpen(true);
-        }}
-      >
-        開く
-      </Button>
+    <>
+      {contextHolder}
+      <Section>
+        <SubTitle text="テンプレートの作成" />
+        <Description>CSSを入力してテンプレートを作成します</Description>
+        <Button
+          block
+          type="default"
+          onClick={() => {
+            setIsCreateModalOpen(true);
+          }}
+        >
+          テンプレートを作成
+        </Button>
+      </Section>
+      <Section>
+        <SubTitle text="作成したテンプレート一覧" />
+        <List
+          dataSource={prop.userTemplates}
+          renderItem={(item) => (
+            <List.Item>
+              <Typography.Text>{item.name}</Typography.Text>
+              <div>
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<EditOutlined />}
+                  onClick={() => edit(item)}
+                />
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<DeleteOutlined />}
+                  onClick={() => deleteTemplate(item)}
+                />
+              </div>
+            </List.Item>
+          )}
+        />
+      </Section>
       <Modal
         title="テンプレートの作成"
-        open={isModalOpen}
-        onOk={() => {
-          if (css === '') {
-            alert('CSSを入力してください');
-            return;
-          }
-          if (templateName === '') {
-            alert('テンプレート名を入力してください');
-            return;
-          }
-          saveUserTemplates(css, templateName, tags, prop)
-            .then(() => {
-              setIsModalOpen(false);
-            })
-            .catch((e) => {
-              alert(e);
-            });
-        }}
-        onCancel={() => setIsModalOpen(false)}
+        open={isCreateModalOpen}
+        onOk={onCreateOk}
+        onCancel={onCancel}
         zIndex={99999}
       >
         <Section>
@@ -87,7 +181,7 @@ export const CreateTemplateByCss = () => {
           />
         </Section>
         <Section>
-          対象とする要素のタグ名(入力しない場合は全ての要素に適用されます)
+          対象とする要素のタグ名（入力しない場合は全ての要素に適用されます）
           <Select
             mode="tags"
             style={{ width: '100%' }}
@@ -109,6 +203,28 @@ export const CreateTemplateByCss = () => {
           />
         </Section>
       </Modal>
-    </Section>
+      <Modal
+        title="テンプレートの編集"
+        open={isEditModalOpen}
+        onOk={onEditOk}
+        onCancel={onCancel}
+        zIndex={99999}
+      >
+        <Section>
+          テンプレート名：
+          {templateName}
+        </Section>
+        <Section>
+          CSS
+          <TextArea
+            defaultValue={css}
+            value={css}
+            onChange={(e) => setCss(e.target.value)}
+            contentEditable={true}
+            autoSize={{ minRows: 5, maxRows: 20 }}
+          />
+        </Section>
+      </Modal>
+    </>
   );
 };
diff --git a/src/components/tabitems/template/TemplateCard.tsx b/src/components/tabitems/template/TemplateCard.tsx
index c47c803..40ac253 100644
--- a/src/components/tabitems/template/TemplateCard.tsx
+++ b/src/components/tabitems/template/TemplateCard.tsx
@@ -1,5 +1,5 @@
 import { Template } from '../../../types/Template';
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   getAbsoluteCSSSelector,
   getCssSelector,
@@ -22,6 +22,7 @@ const TemplateCard = (
   const ref = useRef<any>(null);
   const elementSelection = useContext(ElementSelectionContext);
   const props = useContext(PropsContext);
+  const [indices, setIndices] = useState<number[]>([]);
 
   const onUseClick = () => {
     if (elementSelection.selectedElement) {
@@ -43,24 +44,36 @@ const TemplateCard = (
     }
   };
 
-  const insertCSS = () => {
-    template.styles.forEach((style) => {
-      getStyleSheet()?.insertRule(
-        `${getAbsoluteCSSSelector(ref.current!)}[id='${template.name}']${
-          style.pseudoClass ? `:${style.pseudoClass}` : ''
-        } {\n` +
-          `${Object.entries(style.css)
-            .map(([key, value]) => `${key}: ${value}`)
-            .join(';\n')};\n` +
-          'width: 100%;' +
+  const resetCss = () => {
+    const styleSheet = getStyleSheet();
+    // 既存のスタイルを削除
+    for (const index of indices) {
+      styleSheet.deleteRule(index);
+    }
+
+    const newIndices = [];
+    for (const style of template.styles) {
+      const selector = `${getAbsoluteCSSSelector(ref.current!)}[id='${
+        template.name
+      }']${style.pseudoClass ? `:${style.pseudoClass}` : ''}`;
+      const css = { ...style.css };
+      css.width = '100%';
+
+      const newIndex = styleSheet.insertRule(
+        `${selector} {\n` +
+          `${Object.entries(css)
+            .map(([key, value]) => `${key}: ${value};`)
+            .join('\n')}\n` +
           '}',
       );
-    });
+      newIndices.push(newIndex);
+    }
+    setIndices(newIndices);
   };
 
-  useEffect(() => insertCSS(), []);
+  useEffect(() => resetCss(), [template]);
 
-  let card;
+  let card: JSX.Element;
 
   if (userTemplate && template.name) {
     card = (
diff --git a/src/components/tabitems/template/TemplateList.tsx b/src/components/tabitems/template/TemplateList.tsx
index e4d3f43..52e6f5c 100644
--- a/src/components/tabitems/template/TemplateList.tsx
+++ b/src/components/tabitems/template/TemplateList.tsx
@@ -32,6 +32,7 @@ const CardsWrapper = styled.div`
   background-color: rgba(255, 255, 255, 0.5);
   border: lightgray solid 1px;
   border-radius: 24px;
+  box-sizing: border-box;
 `;
 
 interface CardsProps {
diff --git a/src/features/style_layer.ts b/src/features/style_layer.ts
index 49a3868..11ffa04 100644
--- a/src/features/style_layer.ts
+++ b/src/features/style_layer.ts
@@ -1,6 +1,7 @@
 import { IPropsContext } from '../contexts/PropsContext';
 import { StyleLayer, StyleLayerValue } from '../types/StyleLayer';
 import * as resta_console from './resta_console';
+import { matchCSSSelector } from '../utils/CSSUtils';
 export const getStyleLayer = (
   cssSelector: string,
   prop: IPropsContext,
@@ -11,7 +12,7 @@ export const getStyleLayer = (
   const styleLayerValue: StyleLayerValue[] = [];
   for (const format of prop.formatsArray.reverse()) {
     const formatChange = format.formats.find((format) => {
-      return format.cssSelector === cssSelector;
+      return matchCSSSelector(format.cssSelector, cssSelector);
     });
     if (!formatChange) continue;
     resta_console.log('formatChange:', formatChange);
diff --git a/src/features/style_sheet.ts b/src/features/style_sheet.ts
index df5c1ec..b7742f4 100644
--- a/src/features/style_sheet.ts
+++ b/src/features/style_sheet.ts
@@ -8,12 +8,12 @@ let styleSheet: CSSStyleSheet | null = null;
  * シングルトンのような構造になっている
  */
 export const getStyleSheet = () => {
-  if (styleSheet == null) {
+  if (styleSheet === null) {
     const styleSheetElement = document.createElement('style');
     document.head.appendChild(styleSheetElement);
-    styleSheet = styleSheetElement.sheet;
+    styleSheet = styleSheetElement.sheet as CSSStyleSheet;
   }
-  return styleSheet as CSSStyleSheet;
+  return styleSheet;
 };
 
 /**
diff --git a/src/features/userTemplates.ts b/src/features/userTemplates.ts
index a5db81d..4862623 100644
--- a/src/features/userTemplates.ts
+++ b/src/features/userTemplates.ts
@@ -5,7 +5,7 @@ import { log } from './resta_console';
 import t from './translator';
 
 export const loadUserTemplatesFromStorage = async (prop: IPropsContext) => {
-  await chrome.storage.local.get(['userTemplates'], (result) => {
+  chrome.storage.local.get(['userTemplates'], (result) => {
     if (!result.userTemplates) {
       prop.setUserTemplates([]);
     } else {
@@ -27,7 +27,7 @@ export const saveUserTemplates = async (
   prop: IPropsContext,
 ) => {
   const template = createTemplateStyle(cssText, name, tags);
-  const templates: Template[] = prop.userTemplates;
+  const templates: Template[] = [...prop.userTemplates];
   const index = templates.findIndex((e) => e.name === name);
   // 既に同じ名前のテンプレートが存在する場合は、上書きする。
   if (index === -1) {
@@ -35,7 +35,7 @@ export const saveUserTemplates = async (
   } else {
     templates[index] = template;
   }
-  await saveUserTemplatesLocal(prop);
+  await saveUserTemplatesLocal(templates, prop);
 };
 
 /**
@@ -47,17 +47,16 @@ export const deleteUserTemplates = async (
   name: string,
   prop: IPropsContext,
 ) => {
-  const templates: Template[] = prop.userTemplates;
+  const templates: Template[] = [...prop.userTemplates];
   const index = templates.findIndex((e) => e.name === name);
   if (index !== -1) {
     templates.splice(index, 1);
   }
-  await saveUserTemplatesLocal(prop);
+  await saveUserTemplatesLocal(templates, prop);
 };
 
 export const deleteAllUserTemplates = async (prop: IPropsContext) => {
-  prop.setUserTemplates([]);
-  await saveUserTemplatesLocal(prop);
+  await saveUserTemplatesLocal([], prop);
   // ページをリロード
   window.location.reload();
 };
@@ -66,8 +65,12 @@ export const deleteAllUserTemplates = async (prop: IPropsContext) => {
  * 現在のuserTemplatesの状態をlocal storageに保存する。
  * @param templates
  */
-const saveUserTemplatesLocal = async (prop: IPropsContext) => {
-  chrome.storage.local.set({ userTemplates: prop.userTemplates });
+const saveUserTemplatesLocal = async (
+  newTemplates: Template[],
+  prop: IPropsContext,
+) => {
+  prop.setUserTemplates(newTemplates);
+  chrome.storage.local.set({ userTemplates: newTemplates });
 };
 
 /**
@@ -101,7 +104,7 @@ const createTemplateStyle = (
 
       for (const c of css) {
         const [key, value] = c.split(':');
-        cssMap[key] = value;
+        cssMap[key.trim()] = value.trim();
       }
 
       const TemplateStyle: TemplateStyle = {
@@ -120,7 +123,7 @@ const createTemplateStyle = (
 
     for (const c of css) {
       const [key, value] = c.split(':');
-      cssMap[key] = value;
+      cssMap[key.trim()] = value.trim();
     }
 
     const TemplateStyle: TemplateStyle = {
@@ -139,6 +142,33 @@ const createTemplateStyle = (
   return template;
 };
 
+/**
+ * TemplateからcssTextを作成する。
+ * @param styles
+ * @returns
+ */
+export const templateStyleToCssText = (styles: TemplateStyle[]): string => {
+  // pseudoClassを持たないブロックのみが存在する場合、波括弧で囲わない
+  const noBlock = styles.length === 1 && !styles[0].pseudoClass;
+  const blocks: string[] = [];
+
+  for (const style of styles) {
+    const properties = Object.entries(style.css)
+      .map(([key, value]) => `${key}: ${value};`)
+      .join('\n');
+    if (noBlock) {
+      blocks.push(properties);
+    } else {
+      const selector = style.pseudoClass ? `:${style.pseudoClass}` : '';
+      blocks.push(`${selector} {
+  ${properties}
+}`);
+    }
+  }
+
+  return blocks.join('\n\n');
+};
+
 /**
  * 文字列の改行コード等を削除する。
  * @param str
diff --git a/src/hooks/useStyleApplier.ts b/src/hooks/useStyleApplier.ts
index 75d0622..df7fdb0 100644
--- a/src/hooks/useStyleApplier.ts
+++ b/src/hooks/useStyleApplier.ts
@@ -3,7 +3,7 @@ import { PropsContext } from '../contexts/PropsContext';
 import { setFormatsAndPushToAry } from '../features/formatter';
 import { StyleRule } from '../features/style_sheet';
 import { ElementSelectionContext } from '../contexts/ElementSelectionContext';
-import { getAbsoluteCSSSelector } from '../utils/CSSUtils';
+import { getCssSelector } from '../utils/CSSUtils';
 
 type ReturnType = {
   /**
@@ -11,8 +11,11 @@ type ReturnType = {
    * @param keyOrArray CSSキーまたはCSSキーと値の配列
    * @param value （第一引数にCSSキーを指定した場合）CSSキーに対応する値
    */
-  applyStyle: (keyOrArray: string | [key: string, value: string | number][], value?: string | number) => void;
-}
+  applyStyle: (
+    keyOrArray: string | [key: string, value: string | number][],
+    value?: string | number,
+  ) => void;
+};
 
 export default function useStyleApplier(): ReturnType {
   const propsContext = useContext(PropsContext);
@@ -33,54 +36,79 @@ export default function useStyleApplier(): ReturnType {
     };
   };
 
-  const applyStyle = useCallback((keyOrArray: string | [key: string, value: string | number][], value: string | number | undefined) => {
-    debounce(() => {
-      if (elementContext.selectedElement == null) {
-        return;
-      }
+  const applyStyle = useCallback(
+    (
+      keyOrArray: string | [key: string, value: string | number][],
+      value: string | number | undefined,
+    ) => {
+      debounce(() => {
+        if (elementContext.selectedElement == null) {
+          return;
+        }
 
-      const keyString = Array.isArray(keyOrArray) ? keyOrArray.map(([key, _]) => `${key}`).join(';') : keyOrArray;
-      const id = previousCssKey.current === keyString ? previousId.current : Math.floor(Math.random() * 10000);
+        const keyString = Array.isArray(keyOrArray)
+          ? keyOrArray.map(([key, _]) => `${key}`).join(';')
+          : keyOrArray;
+        const id =
+          previousCssKey.current === keyString
+            ? previousId.current
+            : Math.floor(Math.random() * 10000);
 
-      let rules: StyleRule[];
-      if (Array.isArray(keyOrArray)) {
-        rules = keyOrArray.map(([key, value]) => {
-          return {
-            id,
-            cssSelector: getAbsoluteCSSSelector(elementContext.selectedElement!),
-            values: [{
-              key,
-              value: `${value}`
-            }]
-          };
-        });
-      } else {
-        rules = [{
-          id,
-          cssSelector: getAbsoluteCSSSelector(elementContext.selectedElement),
-          values: [{
-            key: keyOrArray,
-            value: value != null ? `${value}` : 'unset',
-          }]
-        }];
-      }
+        let rules: StyleRule[];
+        if (Array.isArray(keyOrArray)) {
+          rules = keyOrArray.map(([key, value]) => {
+            return {
+              id,
+              cssSelector:
+                getCssSelector(
+                  elementContext.selectElementBy,
+                  elementContext.selectedElement,
+                ) + elementContext.selectedPseudoClass,
+              values: [
+                {
+                  key,
+                  value: `${value}`,
+                },
+              ],
+            };
+          });
+        } else {
+          rules = [
+            {
+              id,
+              cssSelector:
+                getCssSelector(
+                  elementContext.selectElementBy,
+                  elementContext.selectedElement,
+                ) + elementContext.selectedPseudoClass,
+              values: [
+                {
+                  key: keyOrArray,
+                  value: value != null ? `${value}` : 'unset',
+                },
+              ],
+            },
+          ];
+        }
 
-      setFormatsAndPushToAry(rules, propsContext);
+        setFormatsAndPushToAry(rules, propsContext);
 
-      previousCssKey.current = keyString;
-      previousId.current = id;
+        previousCssKey.current = keyString;
+        previousId.current = id;
 
-      elementContext.overlayElements.forEach((overlay) => {
-        const rect = overlay.element.getBoundingClientRect();
-        overlay.overlayElement.style.top = `${rect.top}px`;
-        overlay.overlayElement.style.left = `${rect.left}px`;
-        overlay.overlayElement.style.width = `${rect.width}px`;
-        overlay.overlayElement.style.height = `${rect.height}px`;
-      });
-    }, 500)();
-  }, [elementContext.selectedElement, propsContext]);
+        elementContext.overlayElements.forEach((overlay) => {
+          const rect = overlay.element.getBoundingClientRect();
+          overlay.overlayElement.style.top = `${rect.top}px`;
+          overlay.overlayElement.style.left = `${rect.left}px`;
+          overlay.overlayElement.style.width = `${rect.width}px`;
+          overlay.overlayElement.style.height = `${rect.height}px`;
+        });
+      }, 500)();
+    },
+    [elementContext.selectedElement, propsContext],
+  );
 
   return {
-    applyStyle
+    applyStyle,
   };
-}
\ No newline at end of file
+}
diff --git a/src/utils/CSSUtils.ts b/src/utils/CSSUtils.ts
index 9ac7707..8b01411 100644
--- a/src/utils/CSSUtils.ts
+++ b/src/utils/CSSUtils.ts
@@ -107,4 +107,8 @@ export const getDecimalFromCSSValue = (value: string | undefined): number | unde
     return 0;
   }
   return parseFloat(match[0]);
+}
+
+export const matchCSSSelector = (selector1: string, selector2: string): boolean => {
+  return selector1.replace(/:not\(#resta-root \*\)$/, '') === selector2.replace(/:not\(#resta-root \*\)$/, '');
 }
\ No newline at end of file