新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！

多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、印刷時に異なる画面サイズで見栄えの良いレイアウトを作成しましょう。そうすれば、履歴書をオンラインとオフラインで使用できます。

まず、履歴書コンテナと履歴書セクションを作成します。

グリッドの使用を開始するには、外側の履歴書要素に表示：グリッドを追加します。次に、グリッドに物事をどのように配置するかを説明します。この場合、2つの列と4行を指定します。

CSSグリッドのFRユニットを使用して、利用可能なスペースにある分数の数を指定しています。行に等しいスペース（それぞれ1FR）を与え、最初の列を2倍の列（2FR）の2倍にします。

 。再開する {
  ディスプレイ：グリッド;
  Grid-Template-Columns：2FR 1FR;
  グリッドテンプレート列：1fr 1fr 1fr 1fr;
}

次に、Grid-Template-Areaプロパティを使用して、これらの要素をグリッド上に配置する方法について説明します。まず、各セクションの名前付きグリッドエリアを定義する必要があります。任意の名前を使用できますが、ここではセクションと同じ名前を使用します。

 。名前 {
  グリッドエリア：名前;
}

。写真 {
  グリッドエリア：写真;
}

/ *すべてのセクションのグリッドエリアを定義する */

今では楽しい部分と、デザインの変化を簡単にするものがあります。グリッドテンプレートエリアのプロパティにグリッド領域を配置してください。たとえば、グリッドテンプレートエリアの左上にある名前のセクションを追加して、履歴書の左上に名前を配置します。私たちの作業セクションには多くのコンテンツがあるので、2回追加します。つまり、2つのグリッドセル上に伸びることを意味します。

 。再開する {
  Grid-Template-Areas：
    「名前の写真」
    「仕事」
    「労働教育」
    「コミュニティスキル」;
}

これが私たちがこれまでに持っているものです：

CSSグリッド仕様は、グリッドやいくつかの速記のプロパティのサイジングとレイアウトのための多くの有用なプロパティを提供します。この例では、1つの可能な方法を表示することにより、物事をシンプルに保ちます。プロジェクトにCSSグリッドを組み込む最善の方法を学ぶために、そこにある素晴らしいリソースのいくつかをチェックしてください。

レイアウトの調整

Grid-Template-Areasにより、レイアウトを簡単に変更できます。たとえば、雇用主が教育よりもスキルセクションに興味を持っていると思われる場合は、グリッドテンプレートエリアの名前を切り替えることができ、他の変更は必要ありません。

 。再開する {
  Grid-Template-Areas：
    「名前の写真」
    「仕事」
    「ワークスキル」 / *スキルは教育上に移動しました * /
    「コミュニティ教育」;
} 

最小限のCSSの変更で、薄い列が左側にある人気のある履歴書設計を実現できます。これは、グリッドの素晴らしいことの1つです。名前付きグリッド領域を再配置して、ソースオーダーを正確に置いたままにしている間、物事を移動できます。

 。再開する {
  Grid-Template-Columns：1fr 2fr;
  Grid-Template-Areas：
    「写真教育」
    「名前の仕事」
    「仕事について」
    「スキルコミュニティ」;
} 

分割列

おそらく、ミックスに個人的な参照を追加したいのです。グリッドテンプレートに3番目の列を追加して、それらを一番下の列にスリップできます。また、列ユニットを等しい分数に変更し、テンプレート領域を更新して、特定の要素がレイアウトを所定の位置に保つために2つの列に及ぶようにする必要があることに注意してください。

 。再開する {
  Grid-Template-Columns：1fr 1fr 1fr;
  Grid-Template-Areas：
    「名前の写真」
    「仕事の仕事」
    「労働教育教育」
    「コミュニティ参照スキル」;
} 

セクション間のギャップは、グリッドギャッププロパティで制御できます。

それを応答します

モバイルデバイスなどの小さな画面の場合、履歴書セクションを1つの全幅列に表示できます。

 Grid-Template-Columns：1fr;
Grid-Template-Areas：
  "写真"
  "名前"
  "について"
  "仕事"
  "教育"
  「スキル」
  "コミュニティ"
  「参照」
}

その後、メディアクエリを使用して、より広い画面のレイアウトを変更できます。

 @media（min-width：1200px）{
  。再開する {
    Grid-Template-Areas：
      「名前の写真」
      「仕事」
      「労働教育」
      「コミュニティスキル」;
  }
}

その間に追加のブレークポイントを追加できます。たとえば、タブレットのような中画面では、1つの列にすべてを必要とするかもしれませんが、個人と画像のセクションは上部に並んで座っています。

 @media（min-width：900px）{
  。再開する {
      Grid-Template-Columns：2FR 1FR;
      Grid-Template-Areas：
        「名前の写真」
        「について」
        「仕事の仕事」
        「教育教育」
        「スキル」
        「コミュニティコミュニティ」
        「参照参照」
  }
}

シングルページ印刷の計画

履歴書を物理的な紙にうまく印刷したい場合は、留意すべきことがいくつかあります。最も難しい課題は、多くの場合、単語の数を減らして1ページに収まるようにすることです。

フォントサイズを縮小して、読みにくい場合があるため、より多くの情報を絞ることは避けてください。 1つのトリックは、開発中に履歴書要素に一時的なサイズの制約を追加することです。

 。再開する {
  / *開発のみ */
  幅：210mm;
  高さ：297mm;
  ボーダー：1pxソリッドブラック。
}

このA4紙サイズの境界線を作成することにより、サイズが小さすぎるか、コンテンツが境界からこぼれ、2番目のページに印刷されることを示すのがより明確になります。

ブラウザが挿入できる日付やページ番号など、物事を非表示にするためのCSSの印刷を提供できます。

 @media print {
  / *画面のみのスタイルを削除します。たとえば、アンダーラインをリンクします */
}

@Page {
  パディング：0;
  マージン：0cm;
  サイズ：A4ポートレート。
}

注意すべきことの1つは、異なるブラウザがサイズがわずかに異なる可能性のあるさまざまなフォントで履歴書をレンダリングする可能性があることです。非常に正確な印刷履歴書が必要な場合は、別のオプションがPDFとして保存し、サイトにダウンロードリンクを提供することです。

ブラウザのサポート

CSSグリッドは、最新のブラウザで優れたサポートがあります。

Internet Explorer（IE）は、プレフィックスを使用してCSSグリッド仕様の古いバージョンをサポートしています。たとえば、Grid-Template-Columnsは-ms-grid-columnsとして記述されています。コードをオートプレフィキサーを介して実行すると、これらのプレフィックスの追加に役立ちますが、古い仕様では動作が異なり、一部は存在しないため、手動の変更と徹底的なテストが必要になります。 Autoprefixerをどのように構成できるかについてのDaniel Tononの記事をチェックする価値があります。

Autoprefixerへの別のアプローチは、たとえばフロートレイアウトを使用するなど、フォールバックを提供することです。 CSSグリッドプロパティを認識しないブラウザは、このフォールバックを使用して表示されます。 IEをサポートする必要があるかどうかにかかわらず、フォールバックは、CSSグリッドをサポートしていないブラウザを保証するために賢明です。

オンライン履歴書をホストする準備ができていなくても、CSSグリッドで遊んだり、異なるレイアウトを探索したり、見栄えの良いPDFを生成したり、同時にCSSの素晴らしい部分を学ぶのは楽しいです。

幸せな就職活動！

以上が新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。