CSS プログラミング

【HTML/CSS初心者の模写】tableテーブルで表の作成とデザインする基本方法を解説|Norton編

こんにちは、イケゾーです。

今回は、セキュリティでおなじみ「Norton」のサイト模写の解説をしていきます。(2020/10時点)

今回作るテーブル

 

この記事を読むと

tableテーブルで表を作成する方法が分かります

初心者向けに丁寧な解説をしています。「簡単すぎる」と感じたところは飛ばしながら読んでいってください。そのままコピーして頂いても同じように実装できますので、ぜひ手を動かしてみてください。では、やっていきましょう。

 

【HTML/CSS初心者の模写】tableテーブルで表の作成とデザインする基本方法を解説

商品の比較サイトでよく利用するテーブル(表)の使い方のデモをしていきます。比較サイトではもちろんですが、企業のHPでもこのように自社商品の特徴をテーブルを用いて、購入を促す手法が使われています。

また、テーブルはデザインが非常に大事です。デザインにメリハリをつけて、どの商品をユーザに購入させたいか誘導することが必要です。今回取り上げる「Norton」のテーブルもデザインにこだわって作られているので、そのあたりの勉強も兼ねて模写していきましょう。

 

tableテーブルタグの使い方(HTML)

tableテーブルの簡単な例

行ごとに<tr>を追加していき、全体をtableで囲むとテーブルが作成されます。

<table>
	<tr>
		<th>header1</th>
		<th>header2</th>
		<th>header3</th>
	</tr>
	<tr>
		<td>data1</td>
		<td>data2</td>
		<td>data3</td>
	</tr>
</table>

タグの説明

<tr>・・・テーブル row (行)
<th>・・・テーブル header
<td>・・・テーブル data

 

見出しタグ<th>の作成

見出しタグ<th>を作る

では、早速模写を始めていきます。表のヘッダー<th>を作っていきましょう。
5列作り、それぞれの<th>にwidthとheightを指定します。1番左の列は空白にしておきましょう。

ブラウザでの確認

index.html
<table>
	<tr>
		<th width="150">
		</th>
		<th width="200" height="90">
			<p>ノートン アンチ</p>
			<p>ウイルスプラス</p>
			<p>Windows Mac専用</p>
		</th>
		<th width="200" height="90">
			<p>ノートン 360</p>
			<p>スタンダード</p>
			<p>お求めやすいマルチデバイス</p>
		</th>
		<th width="200" height="90">
			<p>ノートン 360</p>
			<p>デラックス</p>
			<p>おすすめ!これ1本で安心。</p>
		</th>
		<th width="200" height="90">
			<p>ノートン 360</p>
			<p>プレミアム</p>
			<p>ファミリー向け。</p>
		</th>
	</tr>
</table>

 

イケゾー
いいですね、順調♪

 

データタグ<td>の作成

データタグ<th>を作る

次に、表のデータセル<td>を作っていきましょう。

ブラウザでの確認

index.html
<tr>
	<td>利用可能台数</td><td>1台</td><td>2台</td><td>3台</td><td>4台</td>
</tr>

 

イケゾー
いいですね、順調♪

こんな感じになったらOK

<td>を必要な回数だけ繰り返して、どんどん行を増やしていきましょう。
(※文字や数字は適当なので悪しからず)

ブラウザでの確認

index.html
<tr>
	<td>対応OS</td>
	<td><span><img src="image/icon_win10.png" alt=""><img src="image/icon_mac.png" alt=""></span></td>
	<td><span><img src="image/icon_win10.png" alt=""><img src="image/icon_mac.png" alt=""><img src="image/icon_android.png" alt=""><img src="image/icon_ios.png" alt=""></span></td>
	<td><span><img src="image/icon_win10.png" alt=""><img src="image/icon_mac.png" alt=""><img src="image/icon_android.png" alt=""><img src="image/icon_ios.png" alt=""></span></td>
	<td><span><img src="image/icon_win10.png" alt=""><img src="image/icon_mac.png" alt=""><img src="image/icon_android.png" alt=""><img src="image/icon_ios.png" alt=""></span></td>
</tr>
<tr>
	<td>1年版</td>
	<td>
		<p class="product-single"><a href="">詳細はこちら</a></p>
		<p class="product-price-taxout">3,980<span class="product-yen">円(税抜)</span></p>
		<p class="product-price-taxin">税込価格 4,378円</p>
		<button type="button" class="btn btn-success text-white product-btn">カートに入れる</button>
	</td>
	<td>
		<p class="product-single"><a href="">詳細はこちら</a></p>
		<p class="product-price-taxout">3,980<span class="product-yen">円(税抜)</span></p>
		<p class="product-price-taxin">税込価格 4,378円</p>
		<button type="button" class="btn btn-success text-white product-btn">カートに入れる</button>
	</td>
	<td>
		<p class="product-single"><a href="">詳細はこちら</a></p>
		<p class="product-price-taxout">3,980<span class="product-yen">円(税抜)</span></p>
		<p class="product-price-taxin">税込価格 4,378円</p>
		<button type="button" class="btn btn-success text-white product-btn">カートに入れる</button>
	</td>
	<td>
		<p class="product-single"><a href="">詳細はこちら</a></p>
		<p class="product-price-taxout">3,980<span class="product-yen">円(税抜)</span></p>
		<p class="product-price-taxin">税込価格 4,378円</p>
		<button type="button" class="btn btn-success text-white product-btn">カートに入れる</button>
	</td>
</tr>
<tr>
	<td>2年版</td>
	<td>-</td>
	<td>-</td>
	<td>
		<p class="product-price-taxout2">11,880<span class="product-yen">円(税抜)</span></p>
		<p class="product-price-taxin2">税込価格 13,068円</p>
		<p><a href="" class="cartin">カートに入れる</a></p>
	</td>
	<td>
		<p class="product-price-taxout2">14,280<span class="product-yen">円(税抜)</span></p>
		<p class="product-price-taxin2">税込価格 15,708円</p>
		<p><a href="" class="cartin">カートに入れる</a></p>
	</td>
</tr>
<tr>
	<td class="noborder">3年版</td>
	<td class="noborder">
		<p>-</p>
	</td>
	<td class="noborder">
			<p>-</p>
	</td>
	<td class="noborder">
			<p class="product-price-taxout2 taxout3">13,080<span class="product-yen">円(税抜)</span></p>
			<p class="product-price-taxin2">税込価格 14,388円</p>
			<button type="button" class="btn btn-success text-white product-btn">カートに入れる</button>
	</td>
	<td class="noborder">
		<p class="product-price-taxout2 taxout3">14,480<span class="product-yen">円(税抜)</span></p>
		<p class="product-price-taxin2">税込価格 15,928円</p>
		<button type="button" class="btn btn-success text-white product-btn">カートに入れる</button>
	</td>
</tr>
<tr><td class="noborder yen-per-month">(1台1か月あたり目安)</td><td class="noborder yen-per-month">(332円※1)</td><td class="noborder yen-per-month">(332円※1)</td><td class="noborder yen-per-month">(332円※1)</td><td class="noborder yen-per-month">(332円※1)</td></tr>
<tr>
	<td colspan="5" class="table-middle-title text-left">デバイスとデータの保護</td>
</tr>

 

デザインの作成(CSS)

デザインを当てていきましょう。style.cssを開いて編集していきます。

大きく分けて3つを解説していきますね。

  1. 背景色
  2. 枠線
  3. 強調部分

 

背景色の表示

実はデモの画面では、先ほどから背景色を黄色にしていました。
設定は非常に簡単で<table>に対して、背景色を指示するのみです。

背景色を変える方法

table{
	background: #FFF7D6
}

 

 

 

ヘッダーだけ背景色を変える方法

table th{
	color: #fff;
	background: #FF9C02;
}

 

 

指定した行だけ背景色を変える方法

th:nth-child(4) {
	background: #FD5304;
}

見本のサイトをみながら、デザインの勉強も兼ねて近づけてみましょう。

 

 

枠線の表示

メリハリが出るように枠線を表示していきます。

枠線も、背景色と同じように必要な部分を表示、不要のものを非表示にしていきます。

table td{
	border: solid 1px #555555;
}
th:nth-child(4) {
	background: #FD5304;
	border-right: solid 5px #FD5304;
	border-left: solid 5px #FD5304;
}
td:nth-child(4) {
    background: #FFE8A7;
	border-left: solid 5px #FC9557;
	border-right: solid 5px #FC9557;
}

 

 

強調部分のデザイン

このサイトで売りたい商品「ノートン360 デラックス」が強調されているのですが、このヘッダーの頭が出ている部分を作っていきます。

色々と方法はありますが、簡単に<th>を追加する方法を使用していきます。

「ノートン360 デラックス」のみ高さを指定して、高くする方法ですね。他のヘッダーのclassには、table-blank(背景、枠線なし)を追加しています。

index.html
<tr>
	<th width="150" class="table-blank">
	</th>
	<th width="200" class="table-blank">
	</th>
	<th width="200" class="table-blank">
	</th>
	<th width="200" height="20">
	</th>
	<th width="200" class="table-blank">
	</th>
</tr></pre>

 

style.css
.table-blank{ background: #fff; border: none; }

 

 

完成!

お疲れ様でした。同じようにできたでしょうか。

1pxのずれも許さないという模写ではないので、この程度再現できていればOKです。

このテクニックはよく使いますので、使いこなせるようにしておくと良いですね。

 

まとめ

以上で、tableテーブルを作成してきました。商品を紹介するサイトではよく使われるテクニックなので、ぜひ習得してください。

今回は「Norton」のサイトを例に出しましたが、他のサイトのデザインも覗いてみましょう。枠線や背景色の使い方で、どの商品を読者にすすめているのか、デザインの勉強にもなりますね。

参考

下の記事では、メイン画像(ヒーロー)の作成方法を解説していますので、興味があればお読みください。

【HTML/CSS初心者の模写】ヒーロー画像の上に文字を重ねて表示する方法を解説|Norton

続きを見る

下の記事では、ヒーロの上の部分「ナビゲーション」の作成方法を解説していますので、興味があればお読みください。

navdemo
【初心者のWEBサイト模写】Bootstrapでナビゲーションバーを作る方法を解説|Norton

続きを見る

 

当ブログでは、仕事や副業さらには生活で使える「効率」を発信しています。ぜひ、他の記事もご覧ください。

 

ご不明点あれば、コメントまたはTwitterまでご連絡ください。ではでは。

 


							
  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-CSS, プログラミング
-, , , ,