diff --git a/src/ts/client/view/parts/GameModeRuleView.ts b/src/ts/client/view/parts/GameModeRuleView.ts
index a3cf5a9..2d1f91c 100644
--- a/src/ts/client/view/parts/GameModeRuleView.ts
+++ b/src/ts/client/view/parts/GameModeRuleView.ts
@@ -38,7 +38,7 @@ export class GameModeRuleView {
     setHeader({ title, description,ruleName, iconCSS }: { title: string; ruleName:string; description?: string; iconCSS: string; }) {
         this.headerSegment.innerHTML = "";
         const header = new TitleCupsuled(appendElement(this.headerSegment, "div"));
-        header.refresh(title, ruleName, { iconCSS,chara:"u-smallerChara" });
+        header.refresh(title, ruleName, { iconCSS,chara:"u-smallerChara",id:ruleName.replace(/\s/g,"_") });
         appendElement(this.headerSegment, "p", "u-smallerChara u-width90per").innerHTML = description || ""
     }
     setRule({ appliedClass }: { appliedClass: AppliedRuleClassResolved[]; }) {
diff --git a/src/ts/client/view/parts/RuleIndexPart.ts b/src/ts/client/view/parts/RuleIndexPart.ts
index 3214e9d..84c5f69 100644
--- a/src/ts/client/view/parts/RuleIndexPart.ts
+++ b/src/ts/client/view/parts/RuleIndexPart.ts
@@ -59,7 +59,8 @@ export class RuleIndexPart {
     }
     private generateRuleIndexHTML(ruleObj: RuleAttributeAndAppliedClassInfo, language: LanguageInApplication) {
         return `<div class="__item">
-                    <div><i class="${ruleObj.rule.iconCSS}"></i> ${ruleObj.rule.title}${(ruleObj.rule.note || 0) !== 0 ? ` <i class="u-redChara u-bolderChara">${choiceString(contents.annotated, language)}</i>` : ""}</div> <div class="__classItems">${this.generateClassDescriptionInRuleIndex(ruleObj.appliedClass, language)}</div>
+                    <div><a class="u-bolderChara u-underline" href="#${ruleObj.rule.ruleName.replace(/\s/g,"_")}"><i class="${ruleObj.rule.iconCSS}"></i> ${ruleObj.rule.title}</a>
+                    ${(ruleObj.rule.note || 0) !== 0 ? ` <i class="u-redChara u-bolderChara">${choiceString(contents.annotated, language)}</i>` : ""}</div> <div class="__classItems">${this.generateClassDescriptionInRuleIndex(ruleObj.appliedClass, language)}</div>
                 </div>`;
     }
     private generateClassDescriptionInRuleIndex(appliedClass: AppliedRuleClassResolved[], language: LanguageInApplication) {
diff --git a/src/ts/client/view/parts/TitleCupsuled.ts b/src/ts/client/view/parts/TitleCupsuled.ts
index b6b9c31..c4767f3 100644
--- a/src/ts/client/view/parts/TitleCupsuled.ts
+++ b/src/ts/client/view/parts/TitleCupsuled.ts
@@ -11,18 +11,20 @@ export class TitleCupsuled implements IView{
         chara = "",
         subChara = "",
         hr = "u-thin",
-        iconCSS
+        iconCSS,
+        id = ""
     }:{
         chara?:"u-biggerChara"|"u-smallerChara"|"",
         subChara?:"u-biggerChara"|"u-smallerChara"|"",
         hr?:"u-thin"|"u-bold"
         underline?:boolean,
-        iconCSS?:string
+        iconCSS?:string,
+        id?:string
     } = {}){
         this.container.innerHTML = "";
         const title = this.container.appendChild(elementWithoutEscaping`
         <div class="c-title u-margin05em">
-            <div class="c-title__main ${chara}">${(iconCSS) ? `<i class="${iconCSS}"></i> ` : "" }${main}</div>
+            <div class="c-title__main ${chara}" id="${id}">${(iconCSS) ? `<i class="${iconCSS}"></i> ` : "" }${main}</div>
         </div>
         `);
         if (sub !== undefined) title.appendChild(elementWithoutEscaping`<div class="c-title__sub ${subChara}">${sub}</div>`)