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

getdocs

2年前

序章

このチュートリアルでは、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、のような column-2 このシリーズの前のチュートリアルの「About」セクションのスタイルを設定するために作成したクラス。ただし、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 前のチュートリアルで作成されたクラス。テーブルの中に、教育履歴のコンテンツを配置しました。 The <tr> タグはテーブル行を開きます。ここで、次の3セットのテーブルデータ（ <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つのテーブルが並んで表示されます。