diff --git a/app/components/Footer.css.ts b/app/components/Footer.css.ts
index 416dc85..4abed2f 100644
--- a/app/components/Footer.css.ts
+++ b/app/components/Footer.css.ts
@@ -1,11 +1,11 @@
 import { css } from "hono/css";
 
-const Layout = css`
+const footerLayout = css`
   margin-top: 80px;
 `;
 
-const Content = css`
+const footerContent = css`
   padding: 20px 0;
 `;
 
-export { Layout, Content };
+export { footerLayout, footerContent };
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 310aa60..828415a 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -1,9 +1,9 @@
-import { Content, Layout } from "./Footer.css";
+import { footerContent, footerLayout } from "./Footer.css";
 
 const Footer = () => {
   return (
-    <footer class={Layout}>
-      <div class={Content}>
+    <footer class={footerLayout}>
+      <div class={footerContent}>
         <small>&copy; 2024 taga3s</small>
       </div>
     </footer>
diff --git a/app/components/Header.css.ts b/app/components/Header.css.ts
index 20b79b8..d9f3222 100644
--- a/app/components/Header.css.ts
+++ b/app/components/Header.css.ts
@@ -1,14 +1,14 @@
 import { css } from "hono/css";
 
-const Layout = css`
+const headerContent = css`
   padding: 32px 20px;
   display: flex;
   justify-content: end;
 `;
 
-const Links = css`
+const headerNav = css`
   display: flex;
   gap: 24px;
 `;
 
-export { Layout, Links };
+export { headerContent, headerNav };
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 8e892c4..6fc6ee4 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,19 +1,15 @@
-import { Layout, Links } from "./Header.css";
+import { headerContent, headerNav } from "./Header.css";
 
 const Header = () => {
   return (
-    <header class={Layout}>
-      <ul class={Links}>
-        <li>
+    <header>
+      <div class={headerContent}>
+        <nav class={headerNav}>
           <a href="/">about me</a>
-        </li>
-        <li>
           <a href="/history">history</a>
-        </li>
-        <li>
           <a href="/works">works</a>
-        </li>
-      </ul>
+        </nav>
+      </div>
     </header>
   );
 };
diff --git a/app/components/layout/Section.css.ts b/app/components/Section.css.ts
similarity index 52%
rename from app/components/layout/Section.css.ts
rename to app/components/Section.css.ts
index 08ad1f6..159b765 100644
--- a/app/components/layout/Section.css.ts
+++ b/app/components/Section.css.ts
@@ -1,10 +1,8 @@
 import { css } from "hono/css";
 
-const Layout = css``;
-
-const Header = css`
+const sectionHeader = css`
   font-size: 24px;
   font-weight: bold;
 `;
 
-export { Layout, Header };
+export { sectionHeader };
diff --git a/app/components/layout/Section.tsx b/app/components/Section.tsx
similarity index 69%
rename from app/components/layout/Section.tsx
rename to app/components/Section.tsx
index a2c588f..69d7033 100644
--- a/app/components/layout/Section.tsx
+++ b/app/components/Section.tsx
@@ -1,5 +1,5 @@
 import type { FC, JSX } from "hono/jsx";
-import { Header, Layout } from "./Section.css";
+import { sectionHeader } from "./Section.css";
 
 type Props = {
   title: string;
@@ -10,8 +10,8 @@ const Section: FC<Props> = (props) => {
   const { title, children } = props;
 
   return (
-    <section class={Layout}>
-      <h2 class={Header}>{title}</h2>
+    <section>
+      <h2 class={sectionHeader}>{title}</h2>
       {children}
     </section>
   );
diff --git a/app/components/history/HistoryEducationalBackground.css.ts b/app/components/history/HistoryEducationalBackground.css.ts
index 1a9da9a..94feaa4 100644
--- a/app/components/history/HistoryEducationalBackground.css.ts
+++ b/app/components/history/HistoryEducationalBackground.css.ts
@@ -1,15 +1,15 @@
 import { css } from "hono/css";
 
-const list = css`
+const educationalBackgroundList = css`
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 32px;
 `;
 
-const listItem = css`
+const educationalBackgroundListItem = css`
   display: flex;
   gap: 16px;
 `;
 
-export { list, listItem };
+export { educationalBackgroundList, educationalBackgroundListItem };
diff --git a/app/components/history/HistoryEducationalBackground.tsx b/app/components/history/HistoryEducationalBackground.tsx
index db43fdf..9f9314b 100644
--- a/app/components/history/HistoryEducationalBackground.tsx
+++ b/app/components/history/HistoryEducationalBackground.tsx
@@ -1,11 +1,11 @@
-import { Section } from "../layout/Section";
-import { list, listItem } from "./HistoryEducationalBackground.css";
+import { Section } from "../Section";
+import { educationalBackgroundList, educationalBackgroundListItem } from "./HistoryEducationalBackground.css";
 
 const HistoryEducationalBackground = () => {
   return (
     <Section title="Educational background">
-      <ul class={list}>
-        <li class={listItem}>
+      <ul class={educationalBackgroundList}>
+        <li class={educationalBackgroundListItem}>
           <span>2022年4月 - 現在</span>
           <span>早稲田大学法学部在学中</span>
         </li>
diff --git a/app/components/history/HistoryPresenter.css.ts b/app/components/history/HistoryPresenter.css.ts
index e588253..3c4082b 100644
--- a/app/components/history/HistoryPresenter.css.ts
+++ b/app/components/history/HistoryPresenter.css.ts
@@ -1,9 +1,9 @@
 import { css } from "hono/css";
 
-const layout = css`
+const presenterLayout = css`
   display: flex;
   flex-direction: column;
   gap: 48px;
 `;
 
-export { layout };
+export { presenterLayout };
diff --git a/app/components/history/HistoryPresenter.tsx b/app/components/history/HistoryPresenter.tsx
index 338d1b7..e587c3d 100644
--- a/app/components/history/HistoryPresenter.tsx
+++ b/app/components/history/HistoryPresenter.tsx
@@ -1,7 +1,7 @@
 import type { FC } from "hono/jsx";
 import type { WorkExperience } from "../../api/workExperience";
 import { HistoryEducationalBackground } from "./HistoryEducationalBackground";
-import { layout } from "./HistoryPresenter.css";
+import { presenterLayout } from "./HistoryPresenter.css";
 import { HistoryWorkExperience } from "./HistoryWorkExperience";
 
 type Props = {
@@ -12,7 +12,7 @@ const HistoryPresenter: FC<Props> = (props) => {
   const { workExperience } = props;
 
   return (
-    <div class={layout}>
+    <div class={presenterLayout}>
       <HistoryWorkExperience workExperience={workExperience} />
       <HistoryEducationalBackground />
     </div>
diff --git a/app/components/history/HistoryWorkExperience.css.ts b/app/components/history/HistoryWorkExperience.css.ts
index bd291ab..d5181e1 100644
--- a/app/components/history/HistoryWorkExperience.css.ts
+++ b/app/components/history/HistoryWorkExperience.css.ts
@@ -1,17 +1,17 @@
 import { css } from "hono/css";
 
-const list = css`
+const workExperienceList = css`
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 32px;
 `;
 
-const description = css`
+const workExperienceDescription = css`
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 8px;
 `;
 
-export { list, description };
+export { workExperienceList, workExperienceDescription };
diff --git a/app/components/history/HistoryWorkExperience.tsx b/app/components/history/HistoryWorkExperience.tsx
index 66a026f..16fc76c 100644
--- a/app/components/history/HistoryWorkExperience.tsx
+++ b/app/components/history/HistoryWorkExperience.tsx
@@ -1,8 +1,7 @@
 import type { FC } from "hono/jsx";
 import type { WorkExperience } from "../../api/workExperience";
-import { Section } from "../layout/Section";
-import { list } from "./HistoryEducationalBackground.css";
-import { description } from "./HistoryWorkExperience.css";
+import { Section } from "../Section";
+import { workExperienceDescription, workExperienceList } from "./HistoryWorkExperience.css";
 
 type Props = {
   workExperience: WorkExperience[];
@@ -13,7 +12,7 @@ const HistoryWorkExperience: FC<Props> = (props) => {
 
   return (
     <Section title="Work experience">
-      <ul class={list}>
+      <ul class={workExperienceList}>
         {workExperience
           .toSorted((a, b) => a.order - b.order)
           .map((item) => (
@@ -22,7 +21,7 @@ const HistoryWorkExperience: FC<Props> = (props) => {
                 <summary>
                   {item.span}: {item.company}
                 </summary>
-                <p class={description}>
+                <p class={workExperienceDescription}>
                   <span>{item.description}</span>
                   <span>使用技術: {item.techStack}</span>
                 </p>
diff --git a/app/components/profile/ProfileLinks.css.ts b/app/components/profile/ProfileLinks.css.ts
index 9213270..718a768 100644
--- a/app/components/profile/ProfileLinks.css.ts
+++ b/app/components/profile/ProfileLinks.css.ts
@@ -1,6 +1,6 @@
 import { css } from "hono/css";
 
-const LinkCard_Container = css`
+const linkCardContainer = css`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
@@ -11,7 +11,7 @@ const LinkCard_Container = css`
   }
 `;
 
-const LinkCard = css`
+const linkCard = css`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -19,22 +19,22 @@ const LinkCard = css`
   border-radius: 8px;
 `;
 
-const GitHub = css`
-  ${LinkCard}
+const github = css`
+  ${linkCard}
   background: rgb(205,188,255);
   background: linear-gradient(90deg, rgba(205,188,255,0.4515931372549019) -27%, rgba(92,80,118,1) 0%, rgba(116,84,205,1) 0%, rgba(118,83,196,1) 0%, rgba(129,92,200,1) 0%, rgba(46,47,62,0.9137780112044818) 0%, rgba(198,195,209,0.8521533613445378) 100%, rgba(230,14,221,1) 100%, rgba(237,235,246,1) 100%, rgba(0,0,82,1) 100%, rgba(3,1,9,0.4515931372549019) 100%);
 `;
 
-const Qiita = css`
-  ${LinkCard}
+const qiita = css`
+  ${linkCard}
   background: rgb(205,188,255);
   background: linear-gradient(90deg, rgba(205,188,255,0.4515931372549019) -27%, rgba(92,80,118,1) 0%, rgba(116,84,205,1) 0%, rgba(118,83,196,1) 0%, rgba(92,200,121,1) 0%, rgba(25,230,34,0.4515931372549019) 100%, rgba(106,217,191,0.9249824929971989) 100%, rgba(198,195,209,0.8521533613445378) 100%, rgba(230,14,221,1) 100%, rgba(237,235,246,1) 100%, rgba(0,0,82,1) 100%);
 `;
 
-const Cosense = css`
-  ${LinkCard}
+const cosense = css`
+  ${linkCard}
   background: rgb(2,0,36);
 background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(208,108,7,1) 0%, rgba(194,156,24,1) 0%, rgba(187,180,32,1) 40%, rgba(0,212,255,1) 100%);
 `;
 
-export { LinkCard_Container, LinkCard, GitHub, Qiita, Cosense };
+export { linkCardContainer, linkCard, github, qiita, cosense };
diff --git a/app/components/profile/ProfileLinks.tsx b/app/components/profile/ProfileLinks.tsx
index a2cb3d2..cefb0fc 100644
--- a/app/components/profile/ProfileLinks.tsx
+++ b/app/components/profile/ProfileLinks.tsx
@@ -1,24 +1,24 @@
 import { CosenseIcon, GitHubIcon, QiitaIcon } from "../icons";
-import { Section } from "../layout/Section";
-import { Cosense, GitHub, LinkCard_Container, Qiita } from "./ProfileLinks.css";
+import { Section } from "../Section";
+import { cosense, github, linkCardContainer, qiita } from "./ProfileLinks.css";
 
 const links = [
   {
     title: "GitHub",
     url: "https://github.com/taga3s",
-    style: GitHub,
+    style: github,
     icon: <GitHubIcon />,
   },
   {
     title: "Cosense",
     url: "https://scrapbox.io/t33s-dev/",
-    style: Cosense,
+    style: cosense,
     icon: <CosenseIcon />,
   },
   {
     title: "Qiita",
     url: "https://qiita.com/t33s_dev",
-    style: Qiita,
+    style: qiita,
     icon: <QiitaIcon />,
   },
 ];
@@ -26,7 +26,7 @@ const links = [
 const ProfileLinks = () => {
   return (
     <Section title="Links">
-      <div class={LinkCard_Container}>
+      <div class={linkCardContainer}>
         {links.map((link) => (
           <a href={link.url} class={link.style} key={link.title}>
             <div>{link.icon}</div>
diff --git a/app/components/profile/ProfileMain.css.ts b/app/components/profile/ProfileMain.css.ts
index daecb8e..b29f6ab 100644
--- a/app/components/profile/ProfileMain.css.ts
+++ b/app/components/profile/ProfileMain.css.ts
@@ -1,18 +1,18 @@
 import { css } from "hono/css";
 
-const Main = css`
+const main = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `;
 
-const Main_Box = css`
+const mainBox = css`
   display: flex;
   flex-direction: column;
   gap: 12px;
 `;
 
-const Main_Image = css`
+const mainImage = css`
   width: 100px;
   height: 100px;
   border-radius: 12px;
@@ -23,19 +23,19 @@ const Main_Image = css`
   }
 `;
 
-const Main_Name = css`
+const mainName = css`
   font-size: 28px;
   font-weight: bold;
 `;
 
-const Main_Belonging = css`
+const mainBelonging = css`
   display: flex;
   flex-direction: column;
   gap: 8px;
   font-size: 16px;
 `;
 
-const Introduction = css`
+const mainIntroduction = css`
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -43,4 +43,4 @@ const Introduction = css`
   font-size: 16px;
 `;
 
-export { Main, Main_Box, Main_Image, Main_Name, Main_Belonging, Introduction };
+export { main, mainBox, mainImage, mainName, mainBelonging, mainIntroduction };
diff --git a/app/components/profile/ProfileMain.tsx b/app/components/profile/ProfileMain.tsx
index 4746a3c..4edc461 100644
--- a/app/components/profile/ProfileMain.tsx
+++ b/app/components/profile/ProfileMain.tsx
@@ -1,20 +1,20 @@
-import { Main, Main_Belonging, Main_Box, Main_Image, Main_Name, Introduction } from "./ProfileMain.css";
+import { main, mainBelonging, mainBox, mainImage, mainIntroduction, mainName } from "./ProfileMain.css";
 
 const ProfileMain = () => {
   return (
     <section>
-      <div class={Main}>
-        <div class={Main_Box}>
-          <span class={Main_Name}>Seiya Tagami / taga3s</span>
-          <ul class={Main_Belonging}>
+      <div class={main}>
+        <div class={mainBox}>
+          <span class={mainName}>Seiya Tagami / taga3s</span>
+          <ul class={mainBelonging}>
             <li>Web Developer (working as an intern)</li>
           </ul>
         </div>
         <div>
-          <img class={Main_Image} src="https://github.com/taga3s.png" alt="me" />
+          <img class={mainImage} src="https://github.com/taga3s.png" alt="me" />
         </div>
       </div>
-      <ul class={Introduction}>
+      <ul class={mainIntroduction}>
         <li>🛠️ 趣味やインターンでコードを書いています。</li>
         <li>🐳 Web、法律、ラーメンと...</li>
         <li>🤖 アニメ/漫画やゲームが好きです。</li>
diff --git a/app/components/profile/ProfilePhotos.css.ts b/app/components/profile/ProfilePhotos.css.ts
index 0ac4db7..b5b8826 100644
--- a/app/components/profile/ProfilePhotos.css.ts
+++ b/app/components/profile/ProfilePhotos.css.ts
@@ -1,15 +1,15 @@
 import { css } from "hono/css";
 
-const Photo_Container = css`
+const photoList = css`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-top: 16px;
 `;
 
-const Photo_Image = css`
+const photoImage = css`
   max-width: 100%;
   border-radius: 8px;
 `;
 
-export { Photo_Container, Photo_Image };
+export { photoList, photoImage };
diff --git a/app/components/profile/ProfilePhotos.tsx b/app/components/profile/ProfilePhotos.tsx
index 29d3aaa..2507eeb 100644
--- a/app/components/profile/ProfilePhotos.tsx
+++ b/app/components/profile/ProfilePhotos.tsx
@@ -1,8 +1,8 @@
 import type { FC } from "hono/jsx";
 import type { Photo } from "../../api/photos";
-import { Photo_Container, Photo_Image } from "./ProfilePhotos.css";
+import { photoList, photoImage } from "./ProfilePhotos.css";
 import PhotoClickWrapper from "../../islands/PhotoClickWrapper";
-import { Section } from "../layout/Section";
+import { Section } from "../Section";
 
 type Props = {
   photos: Photo[];
@@ -11,11 +11,11 @@ type Props = {
 const ProfilePhotos: FC<Props> = (props) => {
   return (
     <Section title="Favorites">
-      <ul class={Photo_Container}>
+      <ul class={photoList}>
         {props.photos.map((image) => (
           <li key={image.title}>
             <PhotoClickWrapper imageUrl={image.url} imageAlt={image.title}>
-              <img src={image.url} alt={image.title} class={Photo_Image} />
+              <img src={image.url} alt={image.title} class={photoImage} />
             </PhotoClickWrapper>
           </li>
         ))}
diff --git a/app/components/profile/ProfilePresenter.css.ts b/app/components/profile/ProfilePresenter.css.ts
index eafb5dd..3c4082b 100644
--- a/app/components/profile/ProfilePresenter.css.ts
+++ b/app/components/profile/ProfilePresenter.css.ts
@@ -1,9 +1,9 @@
 import { css } from "hono/css";
 
-const Layout = css`
+const presenterLayout = css`
   display: flex;
   flex-direction: column;
   gap: 48px;
 `;
 
-export { Layout };
+export { presenterLayout };
diff --git a/app/components/profile/ProfilePresenter.tsx b/app/components/profile/ProfilePresenter.tsx
index fd03503..d2319c8 100644
--- a/app/components/profile/ProfilePresenter.tsx
+++ b/app/components/profile/ProfilePresenter.tsx
@@ -3,14 +3,14 @@ import { ProfileLinks } from "./ProfileLinks";
 import { ProfileMain } from "./ProfileMain";
 import type { Photo } from "../../api/photos/model";
 import { ProfilePhotos } from "./ProfilePhotos";
-import { Layout } from "./ProfilePresenter.css";
+import { presenterLayout } from "./ProfilePresenter.css";
 
 type Props = {
   photos: Photo[];
 };
 
 const ProfilePresenter: FC<Props> = (props) => (
-  <div class={Layout}>
+  <div class={presenterLayout}>
     <ProfileMain />
     <ProfileLinks />
     <ProfilePhotos photos={props.photos} />
diff --git a/app/islands/PhotoClickWrapper.css.ts b/app/islands/PhotoClickWrapper.css.ts
index 2a8cce3..1c4cdfe 100644
--- a/app/islands/PhotoClickWrapper.css.ts
+++ b/app/islands/PhotoClickWrapper.css.ts
@@ -1,10 +1,10 @@
 import { css } from "hono/css";
 
-const Wrapper = css`
+const photoClickWrapperImage = css`
   cursor: pointer;
 `;
 
-const Mask = css`
+const photoClickWrapperMask = css`
   position: fixed;
   top: 0;
   left: 0;
@@ -13,20 +13,20 @@ const Mask = css`
   background-color: rgba(0, 0, 0, 0.9);
 `;
 
-const Close_Button = css`
+const photoClickWrapperMaskCloseButton = css`
   position: absolute;
   top: 16px;
   right: 16px;
 `;
 
-const Image_Container = css`
+const photoClickWrapperExpandedImageContainer = css`
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 `;
 
-const Image = css`
+const photoClickWrapperExpandedImage = css`
   max-width: 440px;
   width: 100%;
   height: auto;
@@ -38,4 +38,10 @@ const Image = css`
   }
 `;
 
-export { Wrapper, Mask, Close_Button, Image, Image_Container };
+export {
+  photoClickWrapperImage,
+  photoClickWrapperMask,
+  photoClickWrapperMaskCloseButton,
+  photoClickWrapperExpandedImage,
+  photoClickWrapperExpandedImageContainer,
+};
diff --git a/app/islands/PhotoClickWrapper.tsx b/app/islands/PhotoClickWrapper.tsx
index 8087324..54605ad 100644
--- a/app/islands/PhotoClickWrapper.tsx
+++ b/app/islands/PhotoClickWrapper.tsx
@@ -1,5 +1,11 @@
 import { type FC, type JSX, useState } from "hono/jsx";
-import { Close_Button, Image, Image_Container, Mask, Wrapper } from "./PhotoClickWrapper.css";
+import {
+  photoClickWrapperImage,
+  photoClickWrapperExpandedImage,
+  photoClickWrapperExpandedImageContainer,
+  photoClickWrapperMask,
+  photoClickWrapperMaskCloseButton,
+} from "./PhotoClickWrapper.css";
 import { CloseIcon } from "../components/icons/Close";
 
 type Props = {
@@ -17,16 +23,16 @@ const PhotoClickWrapper: FC<Props> = ({ children, imageUrl, imageAlt }) => {
 
   return (
     <>
-      <button type="button" onClick={() => handleClick()} class={Wrapper}>
+      <button type="button" onClick={() => handleClick()} class={photoClickWrapperImage}>
         {children}
       </button>
       {isClicked && (
-        <div class={Mask} id="photo-with-mask">
-          <button type="button" onClick={handleClick} class={Close_Button}>
+        <div class={photoClickWrapperMask} id="photo-with-mask">
+          <button type="button" onClick={handleClick} class={photoClickWrapperMaskCloseButton}>
             <CloseIcon />
           </button>
-          <div class={Image_Container}>
-            <img src={imageUrl} alt={imageAlt} class={Image} />
+          <div class={photoClickWrapperExpandedImageContainer}>
+            <img src={imageUrl} alt={imageAlt} class={photoClickWrapperExpandedImage} />
           </div>
         </div>
       )}