CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

HTMLとCSSでプロフェッショナルな履歴書を作成する方法：ステップバイステップ完全ガイド

HTMLとCSSを使って履歴書を作成すると、魅力的でカスタマイズ性の高いドキュメントを構築でき、デジタルでの共有も簡単になります。適切に構造化された履歴書は、スキルや職務経験を効果的にアピールしながら、さまざまなデバイスでも一貫したプロフェッショナルな見た目を保つことができます。

本記事では、基本的なレイアウト構造から完成版のサンプルコードまで、実際に動作するコード例とともに履歴書作成の手順を詳しく解説します。

基本のレイアウト構文

まずは、CSS Gridを使用した基本的な2カラム（2列）レイアウトの構造から見ていきましょう。

/* 基本の履歴書レイアウト構造 */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  max-width: 1000px;
  margin: 0 auto;
}
.left-section {
  background-color: #333;
  color: white;
  padding: 20px;
}
.right-section {
  background-color: white;
  padding: 20px;
}

履歴書に必要な構成要素

プロフェッショナルな履歴書には、一般的に以下の重要なセクションが含まれます。

セクション目的主な内容
ヘッダー連絡先情報氏名、職種、電話番号、メールアドレス
概要プロフェッショナルな自己紹介スキルとキャリア目標の簡潔な説明
職歴勤務履歴役職、会社名、在籍期間、実績
学歴学業背景学位、学校名、卒業年月
スキル技術力プログラミング言語、ツール、習熟度
プロジェクトポートフォリオ代表的な作品とその説明

実践例：完成版の履歴書レイアウト

以下の例では、モダンな2カラムの履歴書レイアウトを作成します。左側にグラデーション背景のサイドバー（連絡先・スキル）、右側に経歴・学歴を配置する構成です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Professional Resume</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
    }
    body {
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      padding: 20px;
    }
    .resume-container {
      width: 100%;
      max-width: 900px;
      background: white;
      display: grid;
      grid-template-columns: 300px 1fr;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    .left-section {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 30px 20px;
    }
    .profile-img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background-color: #fff;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      color: #667eea;
      font-weight: bold;
    }
    .left-section h2 {
      text-align: center;
      margin-bottom: 10px;
      font-size: 1.5em;
    }
    .left-section .title {
      text-align: center;
      font-size: 0.9em;
      opacity: 0.9;
      margin-bottom: 30px;
    }
    .section-title {
      color: #fff;
      font-size: 1.1em;
      margin: 25px 0 15px 0;
      padding-bottom: 5px;
      border-bottom: 2px solid rgba(255,255,255,0.3);
    }
    .contact-info {
      list-style: none;
    }
    .contact-info li {
      margin: 10px 0;
      font-size: 0.9em;
    }
    .skills-list {
      list-style: none;
    }
    .skill-item {
      margin: 15px 0;
    }
    .skill-name {
      font-size: 0.9em;
      margin-bottom: 5px;
    }
    .skill-bar {
      background: rgba(255,255,255,0.3);
      height: 6px;
      border-radius: 3px;
      overflow: hidden;
    }
    .skill-progress {
      height: 100%;
      background: #fff;
      border-radius: 3px;
    }
    .right-section {
      padding: 30px;
    }
    .right-section h1 {
      color: #333;
      font-size: 2em;
      margin-bottom: 10px;
    }
    .right-section .job-title {
      color: #667eea;
      font-size: 1.2em;
      margin-bottom: 30px;
    }
    .right-section .section-title {
      color: #333;
      font-size: 1.3em;
      margin: 30px 0 15px 0;
      padding-bottom: 5px;
      border-bottom: 2px solid #667eea;
    }
    .experience-item {
      margin: 20px 0;
    }
    .experience-item h4 {
      color: #333;
      font-size: 1.1em;
    }
    .experience-item .company {
      color: #667eea;
      font-weight: bold;
    }
    .experience-item .date {
      color: #666;
      font-size: 0.9em;
      font-style: italic;
    }
    .experience-item ul {
      margin-top: 10px;
      padding-left: 20px;
    }
    .experience-item li {
      color: #555;
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="resume-container">
    <div class="left-section">
      <div class="profile-img">JS</div>
      <h2>John Smith</h2>
      <p class="title">Full Stack Developer</p>

      <h3 class="section-title">Contact</h3>
      <ul class="contact-info">
        <li>✉ john.smith@email.com</li>
        <li>☎ +1 (555) 123-4567</li>
        <li>🔗 linkedin.com/in/johnsmith</li>
        <li>📍 New York, NY</li>
      </ul>

      <h3 class="section-title">Skills</h3>
      <div class="skills-list">
        <div class="skill-item">
          <div class="skill-name">JavaScript</div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 90%"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-name">React</div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 85%"></div>
          </div>
        </div>
        <div class="skill-item">
          <div class="skill-name">Node.js</div>
          <div class="skill-bar">
            <div class="skill-progress" style="width: 80%"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="right-section">
      <h1>John Smith</h1>
      <p class="job-title">Full Stack Developer</p>

      <h3 class="section-title">Summary</h3>
      <p>Experienced Full Stack Developer with 5+ years of expertise in building scalable web applications using modern JavaScript frameworks and cloud technologies.</p>

      <h3 class="section-title">Experience</h3>
      <div class="experience-item">
        <h4>Senior Developer at <span class="company">Tech Solutions Inc.</span></h4>
        <p class="date">2021 - Present</p>
        <ul>
          <li>Led development of customer portal serving 10,000+ users</li>
          <li>Improved application performance by 40% through optimization</li>
          <li>Mentored junior developers and conducted code reviews</li>
        </ul>
      </div>
      <div class="experience-item">
        <h4>Junior Developer at <span class="company">StartUp Co.</span></h4>
        <p class="date">2019 - 2021</p>
        <ul>
          <li>Developed responsive web applications using React and Node.js</li>
          <li>Collaborated with design team to implement user interfaces</li>
        </ul>
      </div>

      <h3 class="section-title">Education</h3>
      <div class="experience-item">
        <h4>Bachelor of Computer Science</h4>
        <p class="company">University of Technology</p>
        <p class="date">2015 - 2019</p>
      </div>
    </div>
  </div>
</body>
</html>

表示結果：このコードを実行すると、紫のグラデーションがかかった左サイドバー（連絡先情報とプログレスバー付きスキル一覧）と、白背景の右側セクション（職歴・学歴の詳細）からなる、洗練された2カラムの履歴書が表示されます。タイポグラフィと余白が適切に設計された、クリーンでモダンな仕上がりです。

押さえておきたいデザインのポイント

  • グリッドレイアウト：CSS Gridを活用して、レスポンシブ対応の2カラム構造を実現する
  • タイポグラフィの階層化：見出しごとに異なるフォントサイズやウェイトを使い分け、情報の優先度を明確にする
  • カラースキーム：コントラストの高いプロフェッショナルな配色を選ぶ
  • ビジュアル要素：スキルの習熟度を示すプログレスバーや、統一感のある余白を取り入れる
  • レスポンシブデザイン：画面サイズに応じて柔軟にレイアウトが調整されるようにする

まとめ

HTMLとCSSで履歴書を作成すれば、デザインとレイアウトを完全にコントロールでき、プロフェッショナルな印象を与えるプレゼンテーションが可能になります。セマンティックなHTML構造とモダンなCSSスタイリングを組み合わせることで、デジタル形式の中でも際立つ、魅力的でアクセシブルな履歴書が完成します。ぜひ本記事のコード例をベースに、あなただけのオリジナル履歴書を作ってみてください。

  1. CSSのtext-transformプロパティでテキストを変換する方法

    CSSでテキストの大文字・小文字を変換するには、text-transformプロパティを使用します。このプロパティを使うと、HTML側で文字を書き換えることなく、表示上のテキストスタイルだけを簡単に変更できます。text-transformプロパティの構文text-transform: none | capitalize | uppercase | lowercase | initial | inherit;各値の意味none：変換を行いません（デフォルト値）capitalize：各単語の先頭文字を大文字にしますuppercase：すべての文字を大文字にしますlowercase：すべての文字を

  2. CSSのz-indexプロパティを使って要素をレイヤー状に重ねる方法

    CSSのz-indexプロパティを使用すると、開発者は複数の要素を互いに重ねて表示できます。z-indexには正の値も負の値も指定可能です。 z-indexの基本ルール 注意：重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。 それでは、z-indexプロパティの具体的な使用例を見ていきましょう。 例1：背景画像とボックスシャドウの重ね合わせ 以下の例では、段落要素に対して背景画像・パディング・ボックスシャドウを設定し、要素がどのように重なって表示されるかを確認できます。 <!DOCTYPE html> <