それがスタイリングとレイアウトのより細かい詳細を制御することになるとき、標準的なWordプロセッサーはHTMLとCSSにろうそくを持ちません.私はワープロで私の履歴書を微調整したので、代わりに私の履歴書を作成して、維持するために、HTMLとCSSを使い始めました.私はそれがより良い全体的に動作するように発見したが、遷移を開始する前に知っているいくつかの有用なものがあります.

始める

まず、免責事項:このガイドでは、テンプレートやスタイリングのアドバイスを再開を提供するためのものではありません.むしろ、私はHTML/CSSで再開印刷レイアウトを処理するためのプロセスを詳述しています.これはセットアップ、印刷スタイリング、および最終PDFエクスポートが含まれています.

ワイヤーフレーム

モックアップまたはワイヤーフレームから働くとき、HTMLとCSSを書くのは、より簡単です.私は私のベースラインとして単語から古い履歴書を使用したが、同じように簡単に自由なツールで何かをモックAdobe XD or Figma ( Figmaもデフォルトで印刷サイズをサポートします).
あなたが既に過去のレジュメから準備ができている(私がしたように)から内容をすでに持っているならば、あなたはセクションにあなたのデザインを壊して、後で詳細を加えることができます:

Figmaに組み込まれた再開のワイヤーフレーム
我々は、テンプレートやモックアップの正確なスタイリングに付着する必要はありませんが、それは全体的なレイアウトを整理するために有用であることができます.

キャンバスの設定

あなたがコードとしてあなたの履歴書をよりよく視覚化するために、私は「キャンバス」を作成することを勧めます.このコンテナを空っぽのページに配置することで、典型的なワープロと非常に似たビューを得ることができます.

私たちは実際にCSSで物理的な測定単位を使用することができますmapping to pixels anyway ), それで、このキャンバスを設定するのはとても簡単でした.

.canvas-container {
  margin: 0 auto; /* for centering, feel free to use flexbox or some other method*/
  box-sizing: border-box;
  padding: 0.5in; /* controls margins */
  width: 8.5in;
  height: 11in;
  background-color: white;
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.7);
}

ここでは、裸体のページ(最高の効果のために0.5 xまたは0.25 xズームを使用してください)のように見えるかもしれません.
あなたの全体のページのデフォルトのスタイルを設定するには、キャンバスのコンテナを使用して、ワードプロセッサのデフォルトに似ています.その他の良いプロパティをここで追加を検討するline-height フォントプロパティfont-size and font-family .

レイアウトと内容

参照のためのあなたのワイヤーフレームを使用して、どのようにコンテンツのセクションにあなたのキャンバスのスペースを分割する方法をマップします.これはツールのような場所ですFlexbox and Grid あなたのレイアウトがより複雑であるならば、便利になります.
私のセットアップはかなり簡単だった:私の履歴書の各領域はsection 要素.2つの列にまたがる内容があったときはいつでも、グリッドを使って分割しました.

.multicolumn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

以下に、実際にどのように動作するかを示します.
私の履歴書では、2つのセクション、経験と証明書/スキルのためのマルチコラムレイアウトが必要でした.私はコンテンツを隠しました、しかし、ここでは、それらのグリッドが私の現在のレイアウトに位置する方法です:

ボーナスを加えたものgrid 保守性私は非常に簡単に作業経験の別のインスタンスを追加することができますグリッドを自動的に私のレイアウトの残りの部分を破壊せずに調整することができます

使用以外grid これらの2つのインスタンスでは、他のすべてがうまくセクションnormal flow . 何でもあなたのために最高の作品を使用して自由に感じる.

エクスポート

ほとんどの企業やリクルーターは、有効な履歴書としてHTMLページを受け付けません.したがって、PDFとしてページをエクスポートします.ブラウザーは印刷コマンドによって容易にこれをすることができます、しかし、我々はあらかじめ我々のCSSに若干の調整をする必要があります.

印刷スタイル

我々は、利用しているでしょうprint media query 私たちのエクスポートページをスタイルします.ブラウザが印刷しようとするとき、特にスタイルを適用することができます.
あなたがコンテナの中ですべてを構築する私のアドバイスに従ったならば、これは簡単なプロセスでなければなりません.シンプルにして全体を作ったhtml 要素の幅と高さは、私のコンテナの印刷サイズに合っています.任意の余白を削除する必要があります.の間の要素body そして、あなたのコンテナー、そうでなければ、追加されたスペースは余分なページをレンダリングするかもしれません:

@media print {
  html {
    height: 11in;
    width: 8.5in;
    overflow: hidden;
  }

  body {
    margin: 0;
  }

  .canvas-container {
    width: 100%;
    box-shadow: none;
  }
}

PDFの生成

ブラウザのスタイルを適当にすると、ブラウザの印刷ダイアログを使用してページをPDFとして保存できます.
Firefoxが大好きですが、Blinkの印刷機能はページを正確にエクスポートするより良い仕事をする傾向があります.私は最終的な輸出のためにクロムを使いました-以下の指示で詳述して.
印刷ダイアログを開くと、目的地を“PDFとして保存”に設定します.また、最終的な結果を保存する前にいくつかの設定を調整する必要があります.「その他の設定」オプションを展開し、次のようにチェックします.

あなたが灰色の色合い以外の何かを使っているならば、色は可能になります

紙のサイズはあなたの好みのサイズに設定されます(私はこのガイドを通して文字を使用)

余白を設定します

スケールは100に設定する必要があります

バックグラウンドグラフィックス

PDFエクスポートのための適当なセッティングによるChromeの印刷ダイアログの例
先に行くと、ページを保存します.これにより、簡単にメンテナンス可能なHTMLレジュメと実際のアプリケーションに使用するPDFエクスポートを持つ必要があります.

結論

私は、このガイドは、HTMLとCSSで履歴書を作成する方法に役立つ出発点であったことを願っています.
あなたが私の最終結果が何であったかについて興味があるならば、私の現在の実現のためのソースコードは利用できますhere .
あなたがこのプロセスを経験したならば、またはHTML/CSSで印刷レイアウトを扱うためのどんな追加ヒントも持っているならば、下記のコメントで私に知らせてください.
このポストはmy personal blog , 簡潔さのためにここでいくつかの修正.