表（table）をCSSで装飾し、会社概要ページを完成せる【CSSの書き方入門】

企業情報などが書かれているcompany.htmlにCSSを加え、下図のように仕上げます。

既存のスタイル指定を活用する
テーブルのスタイルを指定する

CSSのborderプロパティで枠線をつける
テーブルの枠線が二重にならないようにする「border-collapse」

既存のスタイル指定を活用する

company.htmlも<head>内でstyle.cssを読み込ませましょう。
方法はindex.htmlと同じなので、コピーして貼り付ければOKです。

<head>
  <meta charset="utf-8">
  <title>会社概要｜エドべース株式会社</title>
  <meta name="description" content="エドべース株式会社の企業概要などを掲載しています。">
  <link rel="stylesheet" href="style.css">
</head>

index.htmlでは、レイアウトのためにdivを追加しました。
company.htmlも同様に、<div class="container">と<div class="row">で必要な部分を囲いましょう。

<body>
  <div class="container">
    <header>
    ～略～
    </header>

    <img src="images/company.png" alt="エドベース株式会社-会社概要トップ画像">

    <div class="row">
      <main>
        ～略～
      </main>
      <aside>
        ～略～
      </aside>
    </div>

    <footer>
    <p>エドベース株式会社</p>
    </footer>
  </div>
</body>

これだけでも、CSSが効いて見た目が整いました。

テーブルのスタイルを指定する

CSSのborderプロパティで枠線をつける

HTMLの書き方入門で、<table>タグに「border」という属性を指定して枠をつける方法は非推奨になっているとご紹介しました。
推奨される書き方に直しましょう。

HTMLファイルに書いていた「border=1」は削除しておきます。

代わりに、style.cssでborderを指定しましょう。

table{
  border: 1px solid gray;
}

borderプロパティでは、表示する線の太さ・種類・色をまとめて指定することができます。

ブラウザで表示を見てみると、テーブル全体の枠しか出来ていませんね。

それぞれのパーツにも線が入るように、セレクタを追加します。

table, th, td {
  border: 1px solid gray;
}

元通りの表示になりました！

テーブルの枠線が二重にならないようにする「border-collapse」

折角CSSを書いているので、もうひと工夫。
二重になっている線を1本にする（重ねて表示する）ことができるスタイル指定を加えます。
「border-collapse: collapse;」と加えましょう。

table, th, td {
  border: 1px solid gray;
  border-collapse: collapse;
}

１行足しただけなのに、見た目の綺麗度がぐんと上がりますね。
これでcompany.htmlも完成です！

前のレッスン次のレッスンレッスン一覧へ

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

コース素材一覧

edbase-html.zip