HTML エンジン

HTML エンジンは、履歴書のクリーンでウェブ対応の HTML バージョンを生成します。これはウェブサイトに履歴書を埋め込んだり、オンラインで共有したり、ウェブベースのポートフォリオを作成するのに特に便利です。

設定

HTML エンジンを使用するには、レイアウト設定で engine: html を指定してください。

layouts:
  - engine: html
    template: calm
    # ... その他のオプション

セクション

sections オプションにより、セクションタイトルとその順序をカスタマイズできます。詳細についてはセクション文書をご覧ください。

layouts:
  - engine: html
    sections:
      aliases:
        work: "Professional Experience"
        education: "Education"
        skills: "Skills"
      order:
        - basics
        - work
        - education

テンプレート

template オプションにより、様々なテンプレートから選択できます。各テンプレートには独特なデザインとレイアウトがあります。利用可能なテンプレートのリストはテンプレート文書で確認できます。

layouts:
  - engine: html
    template: calm

タイポグラフィ

typography オプションを使用すると、履歴書で使用されるフォントスタイルをカスタマイズできます。

フォントサイズ

fontSize オプションを使用すると、ドキュメントの基本フォントサイズを設定できます。 HTML エンジンは 14px から 20px までのフォントサイズをサポートしています。

フォントファミリー

fontFamily オプションを使用すると、フォントファミリー名や総称ファミリー名の優先順位付きリストを指定できます。これは CSS の font-family プロパティとまったく同じように動作します。

行間

lineSpacing オプションを使用すると、ドキュメントの行間を調整できます。 YAMLResume はエンジン固有の実装にマッピングされるセマンティック値を使用します：

値	説明
`tight`	より多くのコンテンツを収めるためのコンパクトな間隔
`snug`	tight よりわずかに多いスペース
`normal`	バランス取れた読みやすさ（デフォルト）
`relaxed`	行間に更多のスペース
`loose`	非常にゆったりとしたレイアウト

layouts:
  - engine: html
    typography:
      fontSize: 16px
      fontFamily: "Merriweather, serif"
      lineSpacing: relaxed

テーマ

theme オプションを使用すると、測定可能なレイアウトジオメトリ（ページサイズ、余白、フォントサイズ）やセクション構造に影響を与えることなく、履歴書の視覚的な外観をカスタマイズできます。現在はアクセントカラーをサポートしており、すべての HTML テンプレートがこれらを尊重します。

アクセントカラー

theme.colors.accent オプションは、見出し、セクションタイトル、リンク、ハイライトされたラベルに使用されるアクセントカラーを設定します。名前付きカラープリセットのいずれか、または任意の #RRGGBB 形式の16進カラーコード文字列を受け付けます：

色	プリセット	16進コード
	`black`	`#000000`
	`blue`	`#3873B3`
	`burgundy`	`#980000`
	`cerulean`	`#0081A7`
	`green`	`#59B24D`
	`grey`	`#737373`
	`orange`	`#F28C26`
	`purple`	`#8054CC`
	`red`	`#F23333`

layouts:
  - engine: html
    theme:
      colors:
        accent: burgundy # または "#1B365D" のような任意の16進カラー

以下は、4 つのアクセントカラーのプリセットでレンダリングした kami テンプレートです：

burgundy

cerulean

green

purple

アクセントカラーのプリセットは moderncv のカラースキームのパレットに従っています。アクセントカラーが設定されていない場合、各テンプレートは独自のデフォルトパレットにフォールバックします。

高度な設定

advanced オプションにより、HTML エンジンの高度な設定を行うことができます。

アンカーの表示

showAnchors オプションは、アンカーナビゲーションのためにセクションとエントリーにフラグメントの id 属性を付与するかどうかを制御します。デフォルトで有効になっており、アンカーを有効にすると、すべてのセクションに work のような ID、すべてのエントリーに work-2 のような ID が付与されるため、履歴書の特定の部分に直接リンクできます。

layouts:
  - engine: html
    advanced:
      # セクションとエントリーにフラグメントの `id` 属性を付与します。
      showAnchors: true
      showIcons: true
      # HTML ドキュメントのカスタムタイトル。
      title: "私のカスタム履歴書タイトル"
      # HTML ドキュメントのカスタムフッター。
      footer: "Generated by <a href=\"https://yamlresume.dev\">YAMLResume</a>"
      # HTML ドキュメントのメタ記述。
      description: "SEO 用の履歴書の短い説明。"
      # HTML ドキュメントのメタキーワード。
      keywords: "履歴書, CV, yamlresume"

On this page