【フロントエンド1000本ノック】0020_これまでの知識を総動員し、架空のプロフィールページのセマンティックなHTMLを作成せよ。（CSSは不要）

Posted at 2025-09-29

はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

作成したコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta property="og:title" content="赤神青空のプロフィール">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://example.com/images/profile.jpg">
    <meta property="og:url" content="https://example.com/blog/profile.html">

    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:site" content="@SoraAkagami0709">

    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <title>フロントエンド1000本ノック 0020</title>
</head>
<body>
    <header>
      <div>
        <a href="">
          <img src="img/logo.png" alt="フロントエンド1000本ノック">
        </a>
      </div>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h1>赤神青空</h1>

      <figure>
        <img src="img/profile.jpg" alt="赤神青空のプロフィール画像">
        <figcaption>赤神青空のプロフィール画像</figcaption>
      </figure>
      
      <section>
        <h2>SNS</h2>
        <ul>
          <li><a href="https://x.com/SoraAkagami0709" target="_blank" rel="noopener noreferrer">Twitter</a></li>
        </ul>
      </section>

      <section>
        <h2>スキル</h2>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>React</li>
        </ul>
      </section>

      <section>
        <h2>学歴</h2>
        <dl>
          <dt>大学</dt>
          <dd>高知大学 理工学部</dd>

          <dt>大学院（修士）</dt>
          <dd>高知大学大学院 総合人間自然科学研究科</dd>
        </dl>
      </section>

      <section>
        <h2>好きな名言</h2>
        <blockquote>
          <p>ここに好きな名言が入ります。</p>
          <footer>名言を言った人物の名前</footer>
        </blockquote>
      </section>
    </main>
    <footer>
      <p>Copyright 2025</p>
      <p>フロントエンド1000本ノック</p>
    </footer>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up