タグを正しく使う

piny940 · Sep 27, 2023 · 8868b65 · 8868b65
1 parent 1e4af16
commit 8868b65
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 23 deletions.
diff --git a/src/components/Portfolio/ProjectItem.tsx b/src/components/Portfolio/ProjectItem.tsx
@@ -44,23 +44,27 @@ export const ProjectItem: React.FC<ProjectItemProps> = ({
       ) : (
         renderTitle()
       )}
-      <p className="mt-2 mb-1 d-flex align-items-center">
+      <ul className="list-unstyled mt-2 mb-1 d-flex align-items-center">
         {githubLink && (
-          <Link target="_blank" href={githubLink} className="mx-1">
-            <Image
-              src={theme === 'light' ? githubIcon : githubWhiteIcon}
-              width={31}
-              height={31}
-              alt="github-icon"
-            />
-          </Link>
+          <li>
+            <Link target="_blank" href={githubLink} className="mx-1">
+              <Image
+                src={theme === 'light' ? githubIcon : githubWhiteIcon}
+                width={31}
+                height={31}
+                alt="github-icon"
+              />
+            </Link>
+          </li>
         )}
         {projectLink && (
-          <Link href={projectLink} target="_blank" className="mx-1 text-body">
-            <MaterialIcon name="share" />
-          </Link>
+          <li>
+            <Link href={projectLink} target="_blank" className="mx-1 text-body">
+              <MaterialIcon name="share" />
+            </Link>
+          </li>
         )}
-      </p>
+      </ul>
       <p className="my-1">{project.getDescription()}</p>
     </ProjectItemDiv>
   )

diff --git a/src/containers/Projects.tsx b/src/containers/Projects.tsx
@@ -9,11 +9,11 @@ export const ProjectsIndex: React.FC<ProjectsIndexProps> = ({
   className = '',
 }) => {
   return (
-    <div
+    <section
       id="projects"
       className={'d-flex flex-column align-items-center py-5 ' + className}
     >
-      <h1 className="text-center title-underline">Projects</h1>
+      <h2 className="h1 text-center title-underline">Projects</h2>
       <p className="mt-4">それぞれQiita記事へのリンクになっています</p>
       <div className="row row-cols-md-2 row-cols-xl-3 w-75">
         {projectsData.map((project) => (
@@ -22,6 +22,6 @@ export const ProjectsIndex: React.FC<ProjectsIndexProps> = ({
           </div>
         ))}
       </div>
-    </div>
+    </section>
   )
 }
diff --git a/src/containers/Skills.tsx b/src/containers/Skills.tsx
@@ -7,18 +7,18 @@ export type SkillsProps = {
 
 export const Skills: React.FC<SkillsProps> = ({ className = '' }) => {
   return (
-    <div
+    <section
       id="skills"
       className={'d-flex flex-column align-items-center p-5 ' + className}
     >
-      <h1 className="text-center title-underline">Skills</h1>
-      <div className="row row-cols-md-2 w-75 mt-4">
+      <h2 className="h1 text-center title-underline">Skills</h2>
+      <ul className="list-unstyled row row-cols-md-2 w-75 mt-4">
         {skillsData.map((skill) => (
-          <div className="col p-3 my-3" key={skill.name}>
+          <li className="col p-3 my-3" key={skill.name}>
             <SkillItem skill={skill} />
-          </div>
+          </li>
         ))}
-      </div>
-    </div>
+      </ul>
+    </section>
   )
 }