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

プロフェッショナルな HTML および CSS 履歴書を作成する:ステップバイステップ ガイド

HTML と CSS を使用して職務経歴書を作成すると、デジタルで簡単に共有できる魅力的でカスタマイズ可能な文書を作成できます。適切に構成された履歴書は、さまざまなデバイスでプロフェッショナルな外観を維持しながら、スキルと経験を効果的に紹介します。

構文

/* Basic Resume Layout Structure */
.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>

A professional two-column resume layout appears with a purple gradient left sidebar containing contact info and skills with progress bars, and a white right section with experience and education details. The design is clean and modern with proper typography and spacing.

主要な設計原則

  • グリッド レイアウト:レスポンシブな 2 列構造には CSS グリッドを使用します
  • タイポグラフィの階層:見出しのさまざまなフォント サイズと太さ
  • 配色:コントラストの優れたプロフェッショナルなカラー
  • 視覚的要素:スキルの進行状況バー、一定の間隔
  • レスポンシブ デザイン:さまざまな画面サイズに適応

結論

HTML と CSS を使用して履歴書を作成すると、プロフェッショナルなプレゼンテーションを実現しながら、デザインとレイアウトを完全に制御できます。セマンティック HTML 構造と最新の CSS スタイルを組み合わせることで、デジタル形式で目立つ、魅力的でアクセスしやすい履歴書が作成されます。

プロフェッショナルな HTML および CSS 履歴書を作成する:ステップバイステップ ガイド


  1. CSS3マルチカラム列ギャッププロパティ

    複数列のcolumn-gapプロパティは、列間のギャップを決定するために使用されます。 例 次のコードを実行して、column-gapプロパティを実装してみてください <html>    <head>       <style>          .multi {             /* Column count property */        

  2. CSSのマージン短縮プロパティ

    CSSのmarginshorthandプロパティは、要素のマージン領域を定義するために使用されます。時計回りに値を設定します。つまり、margin-top、margin-right、margin-bottom、margin-leftの順に設定します。 構文 CSSマージンプロパティの構文は次のとおりです- Selector {    margin: /*value*/ } 次の例は、CSSマージンの短縮プロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> div {