SHU BLOG

NEW
お知らせ
NEW 2022.12.02 【CSS】marginの指定方法について TikTokにてショート動画公開中!!
お知らせ
NEW 2022.12.01 【WordPress】公開日と最終更新日を表示の方法を解説
お知らせ
2022.11.24 【WordPress】記事ページに表示する、しない条件分岐を解説

BLOG NEWS ブログ

TITLE

レスポンシブデザイン、テーブルを違うデザインにさせたい!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回はレスポンシブデザイン、テーブルを違うデザインにさせたい!

こんな方に読んでほしい

  • レスポンシブデザインを学び始めた方へ
  • レスポンシブ講座Part05になります。
  • 今回は「テーブルを違うデザインにさせる」について解説しております。

レスポンシブデザインとは、表示領域の幅によって見え方が変わるデザイン(Webサイトの見た目)のことを示します。

前回は、テーブルを横スクロールさせる!について解説しました。
パソコン(PC)の表示は通常のテーブルを表示させ、タブレット端末、スマートフォン端末では、テーブルを横スクロールさせる、CSSを解説しております。

テーブルを横スクロール:イメージ図

下記の「テーブルを横スクロールさせる!」に関する記事を理解してPart05にいきましょう。

テーブルを横スクロールさせる!

パソコン(PC)の表示は通常のテーブル、タブレット端末、スマートフォン端末では、テーブルを横スクロールさせる!!

テーブルを違うデザインにさせるについて

テーブルを違うデザインにさせるについて

テーブルを作成する際に、「行2 × 列2」など、行と列が少ない場合は、スマートフォン端末でもデザインを変更させず表示させても良い場合もありますが、
行と列が多い場合は、デザインを変更して、「見やすく・読みやすく」した方が良い場合もあります。

テーブルとdisplayの関係性について

テーブルには、displayプロパティのデフォルト値が適用されています。
まずは、displayプロパティとの関係性を覚えておきましょう。

特に、trth / td関しては、しっかり覚えておきましょう。

tabletable
trtable-row
th / tdtable-cell
theadtable-header-group
tbodytable-row-group
tfoottable-footer-group
captiontable-caption

table-rowとは、「テーブルの行のように」表示されます。
table-cellとは、「テーブルのセルのように」表示されます。

実際のコードについて

実際のコードについて

考え方としては、パソコン(PC)向けでは通常通り、table-rowtable-cellを適用させます。
タブレット端末、スマートフォン端末では、display-blockを適用させ、ブロック要素にするイメージになります。
イメージ図は下記のようになります。

イメージ図

横長いテーブルを縦(ブロック)にするイメージになります。
書き方は以下のようになります。

テーブルを違うデザイン

テーブルを違うデザイン:イメージ図

<div class="table-area">
	<table class="sp-table">
		<tbody>
			<tr>
				<th>Aコース</th>
				<td>Aコースはテキストが入ります。</td>
				<td>Aコースはテキストが入ります。</td>
				<td class="more-btn"><a href="#">詳細はこちら</a></td>
			</tr>
			<tr>
				<th>Bコース</th>
				<td>Bコースはテキストが入ります。</td>
				<td>Bコースはテキストが入ります。</td>
				<td class="more-btn"><a href="#">詳細はこちら</a></td>
			</tr>
      以下省略
		</tbody>
	</table>
</div>
/*--スマートフォン--*/
/*--メディアクエリの記述なし--*/
.table-area {
	width: 70%;
	margin: 0 auto;
}

table.sp-table-layout {
	width: 100%;
	margin: 5em auto 2em;
}

table.sp-table-layout, 
table.sp-table-layout td, 
table.sp-table-layout th {
	border-collapse: collapse;
}

/*--↓ 必須--*/
table.sp-table-layout, 
table.sp-table-layout tbody,
table.sp-table-layout tr,
table.sp-table-layout td, 
table.sp-table-layout th {
	display: block;
}

/*--↓ 下記は装飾になります--*/
table.sp-table-layout td, 
table.sp-table-layout th {
	font-size: .8rem;
	padding: 1em;
	box-sizing: border-box;
	border-left: 1px solid #595959;
	border-right: 1px solid #595959;
}

table.sp-table-layout th {
	color: #333;
	background-color: #DEE1E6;
	border-top: 1px solid #595959;
}

table.sp-table-layout td.more-btn {
	margin-bottom: 2em;
	border-bottom: 1px solid #595959;
}

/*--↓ ボタン--*/
table.sp-table-layout td.more-btn a {
	color: #fff;
	display: block;
	width: 80%;
	padding: 1em 0;
	margin: 0 auto;
	text-align: center;
	background-color: #FD4E4F;
	border-radius: 30px;
}

/*--PC--*/
@media screen and (min-width: 1025px){
	/*--sp-table-layout--*/		
	table.sp-table-layout,
	table.sp-table-layout tbody{
		display: table;
		border-collapse: collapse;
		width: 100%;
	}
		
	table.sp-table-layout tr {
		display: table-row;
	}
	
	table.sp-table-layout th,
	table.sp-table-layout td {
		display: table-cell;
		border: 1px solid #595959;
	}
	
	table.sp-table-layout td.more-btn a {width: 100%;}	
}

文字サイズ、文字色や幅(width)等は調整してください。
こちらにデモサイトを用意しました。
下記からご確認ください。

関連記事

【STEP01】レスポンシブデザイン、viewportを設定しよう!
viewport(ビューポート)とは、「表示領域」のことを示します。
【STEP02】レスポンシブデザイン、メディアクエリを設定しよう!
Media Queries(メディアクエリ)とは、「各デバイスに適したCSSを適用させる」ことを示します。
【STEP03】レスポンシブデザイン、画像にテキストを回り込ませたい!
パソコン、タブレット端末、スマートフォン端末でのレイアウト変更について
【STEP04】レスポンシブデザイン、テーブルを横スクロールさせたい!
PCは通常に表示され、スタブレット端末、マートフォン端末では、横スクロールが表示されます。

まとめ

今回はこれで以上です。

POINT
  • name="viewport"の設定を忘れないように注意しましょう。
  •  タブレット端末、スマートフォン端末では、display-blockを適用させます。
  • PCでは、table-rowtable-cellを適用させます。
  • こちらにデモサイトを用意しました。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

HP

お助けコネクト

神奈川県を中心に不用品回収・粗大ゴミ回収・遺品整理・ゴミ屋敷片付け・家具の移動 など
なんでもやります!!お気軽にご相談ください。詳細はコチラから

page_top