CSSを使用してWebサイトに教育履歴とスキルを追加する方法（セクション5）

序章

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

これらのセクションを作成するには、Webページに並べて配置できる2つの同じサイズのコンテンツボックスのスタイルを設定するCSSクラスを作成します。次に、各ボックス内にテキストコンテンツを追加するテーブルを追加します。

前提条件

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

2つの同じサイズのテーブルの作成とスタイリング

まず、次のコードスニペットをコピーしてstyles.cssファイルの下部に貼り付けます。

styles.css

. . .

/* Fifth section */

.column-2a {
  float: left;
  width: 45%;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  padding-bottom:60px;
  height:450px;
  margin:30px;
  margin-right:30px;
  margin-bottom: 40px;
  background-color:white;
}

このコードスニペットは、クラスcolumn-2aを作成します。これは、このシリーズの前のチュートリアルの「About」セクションのスタイルを設定するために作成したcolumn-2クラスに似ていますが、 heightプロパティは450px.に設定されています。このボックスのコンテンツの量を変更する場合は、それに応じて高さを調整する必要があります。そうしないと、オーバーフローしたり、途切れたりする可能性があります。他の宣言について詳しく知りたい場合は、コンテンツ、パディング、およびマージンのサイズの設定に関するこのチュートリアルシリーズの前のセクションを確認してください。

続行する前に、styles.cssファイルを保存してください。

次に、index.htmlファイルに戻り、最後に閉じた</div>タグの後に次のコードスニペットを貼り付けます。

index.html

. . .

<!--Section 5: Education and Skills-->

<div class="column-2a">
<h2>Education</h2>
  <table class="table-style">
    <tr>
      <td>Barnacle Bootcamp</td>
      <td>2020</td>
    </tr>
    <tr>
      <td>Seaweed University</td>
      <td>2019-2020</td>
    </tr>
    <tr>
      <td>Highwater High School</td>
      <td>2018-2019</td>
    </tr>
    <tr>
      <td>Middle-Sized Pond Middle School</td>
      <td>2017-2018</td>
    </tr>
    <tr>  
      <td>Minnow Elementary School</td>
      <td>2016-2017</td>
    </tr>    
    <tr>
      <td>Phytoplankton Preschool</td>
      <td>2015-2016</td>
    </tr>
  </table>
</div>

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

ファイルを保存し、ブラウザをリロードして、テーブルが正しく表示されていることを確認します。次のスクリーンショットのようなテーブルが必要です。

次に、サミーのスキルを一覧表示する2番目のテーブルを追加します。 index.htmlファイルに戻り、最後に閉じた</div>タグの後に次のコードスニペットを貼り付けます。

index.html

. . .

  <div class="column-2a">
     <h2>Skills</h2>
    <table class="table-style">
      <tr>
        <td>Social Media</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>Public Speaking</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>Internet Ethics Ambassador</td>
        <td>⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>Content production</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td> HTML</td>
        <td>⭐⭐⭐</td>
      </tr>
      <tr>
        <td> CSS</td>
        <td>⭐⭐⭐</td>
      </tr>
    </table>
  </div>

このコードスニペットは、前のコードスニペットとまったく同じように機能します。column-2aクラスを使用して列を作成し、table-styleクラスでスタイル設定されたテーブルを挿入します。星の画像を作成するために絵文字を使用していることに注意してください。 HTMLテキストコンテンツとして任意の絵文字を使用できます。

ファイルを保存し、ブラウザをリロードして、テーブルが正しく表示されていることを確認します。これで、このチュートリアルの最初の画像に示すように、2つのテーブルが並んで表示されます。

結論

これで、スタイル付きテーブルを使用してテキストコンテンツが追加されました。行と列のサイズ変更と追加を試して、さまざまな目的に合わせてテーブルをカスタマイズできます。次のチュートリアルでは、Webサイトに大きな引用を含むコンテンツボックスを作成します。