CSSを使用してWebサイトに履歴書または雇用履歴セクションを追加する方法（セクション4）

投稿日: 2022-04-20 2022-04-20
タグ: css, Spin Up

序章

このチュートリアルでは、HTMLテーブルとCSSクラスを使用して、デモンストレーションWebサイトの「雇用」セクション（または4番目のセクション）を再作成します。サイズをパーソナライズしたい場合は、サミーの情報を自分の情報に自由に切り替えてください。ここで使用するメソッドは、他のCSS /HTMLWebサイトプロジェクトに適用できます。

Employment section of demonstration website

このセクションを作成するには、セクション見出しを追加してスタイルを設定し、幅の広い列を追加してスタイルを設定し、列内にHTMLテーブルを追加してスタイルを設定します。

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。

セクション区切りとセクションタイトルの作成

開始するには、前の「プロジェクト」セクションのコンテンツとこの「雇用」セクションのコンテンツの間にスペースを追加するクラスを作成します。次のCSSコメントとCSSルールセットをstyles.cssファイルの下部に追加します。

styles.css

. . .

/* Section 4 */

/* Add space between sections */
.section-break {
  margin:50px;
  height:500px;
}

このコードスニペットには、「セクション4」のCSSルールセットにラベルを付けるCSSコメントと、section-breakクラスの目的を説明するCSSコメントを追加しました。このクラスをindex.htmlファイルの空の<div>に割り当てます。これにより、高さが500ピクセル、マージンが50ピクセルになります。 <div>は非表示になりますが、その高さは、後続のコンテンツをページの500ピクセル下にプッシュすることにより、セクションブレークとして機能します。

index.htmlファイルに戻り、次のコードスニペットを追加します。

index.html

. . .

<!--Section 4: Employment—>
  
<div class="section-break"> </div>
<h2 class="section-heading">Experience</h2>

このコードスニペットは、Webサイトの4番目のセクションで使用されるHTMLコードにラベルを付けるHTMLコメントを追加し、作成したsection-breakクラスが割り当てられた<div>コンテナーを追加します。コードスニペットは、「エクスペリエンス」セクションの見出しを追加し、前のチュートリアル[CSSでタイルレイアウトを作成する方法]（ https：//www。 digitalocean.com/community/tutorials/how-to-build-a-tiled-layout-with-css-section-3 ）。

注：このチュートリアルシリーズをフォローしていない場合は、次を追加してsection-headingクラスをstyles.cssファイルに追加できます。ファイルの下部にあるコードスニペット：

styles.css

. . .
.section-heading {
  text-align:center;
  color:#102C4E;
  margin-top: 150px;
  margin-bottom:70px;
  font-size: 35px;
}

index.htmlファイルを保存して、ブラウザにロードします。これで、セクション区切りの後に「Experience」という名前のセクション見出しが表示されます。

Screenshot of “Experience" heading on demonstration website

幅の広い列とテーブルのスタイリング

次に、幅の広い白い列とその中に配置するテーブルのスタイルを設定できるクラスを作成します。 styles.cssファイルの下部に次のコードスニペットを追加します。

styles.css

. . .

/* Wide column */
.column-1 {
  width: 90%;
  height: auto;
  padding-top:70px;
  padding-left:70px;
  padding-bottom:70px;
  margin:auto;
  margin-bottom:50px;
  margin-top: 75px;
  background-color:white;
}

/* Table formatting */
.table-style {
  width:100%;
  border-spacing: 24px;
}

最初のルールセットでは、クラスcolumn-1のいくつかのスタイルルールを宣言しました。ビューポートの幅に応じて列のサイズが変わるように、widthをパーセンテージで指定していることに注意してください。 heightからautoを指定しました。これにより、テーブルは、内部に配置するHTMLコンテンツの高さのニーズに応じて高さを調整できます。また、このクラスwhiteに割り当てられた<div>の背景色を作成するルールを作成しました。

このルールセットの他の宣言について詳しく知りたい場合は、コンテンツ、パディング、およびマージン[のサイズの設定に関するこのチュートリアルシリーズの前のセクションを確認してください。 X207X]。

2番目のルールセットでは、クラスtable-styleを定義し、いくつかのルールを宣言しました。 width:100%宣言により、テーブルの幅は、テーブルが配置されているコンテナーの幅全体を占めるようになります。これは、作成する幅の広い列になります。 border-spacing:24px;宣言は、テーブルのセル間に24ピクセルのスペースを配置し、テーブルのコンテンツが列の幅を占めるようにします。このルールを含めなかった場合、各テーブルセルは非常に近くなります。

列とテーブルの追加

次に、列とテーブルをHTMLファイルに追加します。 styles.cssファイルを保存し、index.htmlファイルに戻って、コード<h2 class="section-heading">Experience</h2>のHTML行のすぐ下に次のコードスニペットを追加します。

index.html

. . .

<div class="column-1">
  <h2>Employment</h2>
  <table class="table-style"> 
    <tr>
      <td>Freelance designer</td>
      <td>Seven Seas</td>
      <td>2015-present</td>
   </tr>
    <tr>
      <td>Associate Sea Creature</td>
      <td>Small Pond Productions</td>
      <td>2019-2020</td>
   </tr>
   <tr>
      <td>Associate Surfer</td>
      <td>Open Watery Web</td>
      <td>2018-2019</td>
   </tr>
   <tr>
      <td>Open Web Advocate</td>
      <td>Kiddie Pool Kubernetes</td>
      <td>2017-2018</td>
   </tr>
   <tr>
      <td>Assistant Shark</td>
      <td>Small Pond Pictures</td>
      <td>2016-2017</td>
   </tr>
  </table>
 </div>
</div>

このコードスニペットでは、column-1クラスに従ってスタイル設定された<div>コンテナーを追加し、table-styleクラスでスタイル設定されたHTMLテーブルを内部に配置しました。テーブル内に、雇用履歴コンテンツを配置しました。 <tr>タグは、テーブル row を開き、次の3セットのテーブル data （<td>タグでマークアップ）が挿入されます。 HTMLテーブルの仕組みの詳細については、チュートリアルHTMLを使用してテーブルを作成する方法をご覧ください。

両方のファイルを保存し、ブラウザでWebページをリロードします。これで、このチュートリアルの冒頭に示したように、Webページに4行3列のテーブルを含む1つの幅の列が表示されます。

最初の3つの<td>要素は、<tr>タグの最初の開始セットと終了セットの間に挿入されることに注意してください。 column-1クラスのheightをautoに設定しているため、同じテーブルの行とデータ形式を使用して行を追加し続けることができ、それに応じて列の高さが調整されます。または、<tr>行内に<td>要素を追加して列を追加することもできます。

結論

これで、CSSを使用してテーブルを作成およびスタイル設定し、構造化されたレイアウトで雇用履歴コンテンツを表示できます。行と列のサイズ変更と追加を試して、さまざまな目的に合わせてテーブルをカスタマイズしてください。次のチュートリアルでは、「教育」と「スキル」のテーブルを作成して、テーブルレイアウトの可能性を探り続けます。

getdocs

8684