A・B比較表(CSS・HTML)をコピペで掲載する。

Youtube動画もご覧下さい

部品の利用は簡単

コピペして内容を置き換えるだけです

A・B比較表

背景色はサイトに合わせ下さい。

A・B 比較表の例

比較A

A・B比較表(CSS・HTML)をコピペで掲載する。

比較B

A・B比較表(CSS・HTML)をコピペで掲載する。

1行目見出し

1行目比較A 強調文字

1行目比較A コンテンツ

1行目比較B 強調文字

1行目比較B コンテンツ

2行目見出し

2行目比較A 強調文字

2行目比較A コンテンツ

2行目比較B 強調文字

2行目比較B コンテンツ

 

<div class="comparison-table-wrap comparison-table-green comparison-table-img no-sticky">
<h4 class="comparison-table-title">A・B 比較表の例</h4>
<div class="comparison-table">
<table>
<thead>
<tr>
<th>
<p class="th-h" style="text-align: center;">比較A</p>
<img class="wp-image-4454 aligncenter size-medium" src="https://no1.plus/wp-content/uploads/2019/12/cyber-security-04-1-300x300.png" alt="" width="300" height="300" /></th>
<th>
<p class="th-h" style="text-align: center;">比較B</p>
<img class="wp-image-4457 aligncenter size-medium" src="https://no1.plus/wp-content/uploads/2019/12/cyber-security-11-1-300x300.png" alt="" width="300" height="300" /></th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">1行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">1行目比較A 強調文字</p>
1行目比較A コンテンツ</td>
<td>
<p class="td-h">1行目比較B 強調文字</p>
1行目比較B コンテンツ</td>
</tr>
<tr>
<th colspan="2">2行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">2行目比較A 強調文字</p>
2行目比較A コンテンツ</td>
<td>
<p class="td-h">2行目比較B 強調文字</p>
2行目比較B コンテンツ</td>
</tr>
</tbody>
</table>
</div>
</div>/* Your code... */

 

/* Your code... */

/************************************
** スマホで見やすい比較表(ここから)
************************************/
.comparison-table-wrap{
width:100%;
max-width:600px;
margin: 0 auto 2em;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.comparison-table-title{
background : linear-gradient(90deg, rgba(71, 206, 255, 1) 0%, rgba(56, 224, 248, 1) 100%);
text-align: center;
color: #fff;
font-weight: bold;
padding: 1em;
letter-spacing: 1px;
margin: 0;

box-shadow: 0 2px 5px rgba(100,100,100,0.1);
}
.comparison-table{
background:#f8f9fb;
margin:0;
padding:0.3em 1em;
}
.comparison-table table{
border-collapse: separate;
border-spacing:5px 10px;
border:none;
margin-bottom: 0;
}
.comparison-table table th,.comparison-table table td {
width:50%;
}
.comparison-table table thead th{
background : #d1d1d1;
border:none;
color:#fff;
box-shadow: 0 2px 5px rgba(100,100,100,0.1);
padding: 0.8em 0.5em;
line-height: 1.5;
border-radius: 3px;

}
.comparison-table table tbody th{
background : linear-gradient(90deg, rgba(71, 206, 255, 1) 0%, rgba(56, 224, 248, 1) 100%);
text-align: center;
color:#fff;
border:none;
border-radius:30px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
padding: 0.4em 1em;

line-height: 1.3;
}
.comparison-table table tbody td{
background:#fff;
box-shadow: 0 2px 5px rgba(100,100,100,0.1);
border-radius:3px;
border:none;
padding:1.2em;
color: #555;
line-height: 1.8;
text-align:justify;
vertical-align:top;
}
.comparison-table table tbody td p{
margin:0;
padding:0;
margin-bottom:1em;

}
.comparison-table table tbody td .td-h{
text-align:center;
font-weight:bold;
color:#33ccff;

margin-bottom:7px;
}
@media screen and (max-width: 768px){
.comparison-table{
padding:7px;
}
.comparison-table table{
border-spacing:3px 10px;
}
.comparison-table table thead th{
position: -webkit-sticky;
position: sticky;
top:0px;
z-index:100;
}
}

/************************************
** スマホ特化比較表(ピンク)
************************************/
/* 大見出し背景 */
.comparison-table-pink .comparison-table-title{
background:#f7bcbc!important;
}
/* 中見出し背景 */
.comparison-table-pink .comparison-table table tbody th{
background:#f7bcbc!important;
}
/* 強調文字 */
.comparison-table-pink .comparison-table table tbody td .td-h{
color:#f7bcbc!important;
}
/* 全体背景 */
.comparison-table-pink .comparison-table{
background:#fdf1f1!important;
}
/* 比較名背景 */
.comparison-table-pink .comparison-table table thead th{
background:#d1baba!important;
}
/************************************
** スマホで見やすい比較表(イエロー)
************************************/
/* 大見出し背景 */
.comparison-table-yellow .comparison-table-title{
background:#fdc44f !important;
}
/* 中見出し背景 */
.comparison-table-yellow .comparison-table table tbody th{
background:#fdc44f !important;
}
/* 強調文字 */
.comparison-table-yellow .comparison-table table tbody td .td-h{
color:#fdc44f !important;
}
/* 全体背景 */
.comparison-table-yellow .comparison-table{
background:#fef9ed!important;
}
/* 比較名背景 */
.comparison-table-yellow .comparison-table table thead th{
background:#d4c096 !important;
}
/************************************
** スマホで見やすい比較表(グリーン)
************************************/
/* 大見出し背景 */
.comparison-table-green .comparison-table-title{
background:#2fcdb4 !important;
}
/* 中見出し背景 */
.comparison-table-green .comparison-table table tbody th{
background:#2fcdb4 !important;
}
/* 強調文字 */
.comparison-table-green .comparison-table table tbody td .td-h{
color:#2fcdb4 !important;
}
/* 全体背景 */
.comparison-table-green .comparison-table{
background:#eafaf7 !important;
}
/* 比較名背景 */
.comparison-table-green .comparison-table table thead th{
background:#97c7bf !important;
}
/************************************
** スマホで見やすい比較表(シンプル)
************************************/
/* 大見出し背景 */
.comparison-table-simple .comparison-table-title{
box-shadow:none !important;
}
/* 中見出し背景 */
.comparison-table-simple .comparison-table table tbody th{
box-shadow:none !important;
}
/* 全体背景 */
.comparison-table-simple .comparison-table{
background:none !important;
}
/* 比較名背景 */
.comparison-table-simple .comparison-table table thead th{
box-shadow:none !important;
}
/* コンテンツ背景 */
.comparison-table-simple .comparison-table table tbody td{
box-shadow:none !important;
padding: 0.5em 1em;
}
/************************************
** スマホで見やすい比較表(画像比較)
************************************/
/* 比較名背景 */
.comparison-table-img .comparison-table table thead th{
box-shadow:none !important;
padding:0;
margin:0;
}
.comparison-table-img .comparison-table table thead tr{
background:none !important;
}
.comparison-table-img .comparison-table table thead th img{
display:block;
}
.comparison-table table thead th p{
margin:0;
}
/* 画像タイトル */
.comparison-table-img .comparison-table table thead th .th-h{
color:#fff;
padding-top:10px;
margin-bottom:10px;
font-size:14px;
}
/************************************
** スマホで見やすい比較表(固定追尾なし)
************************************/
@media screen and (max-width: 768px){
.no-sticky .comparison-table table thead th{
position:static;
}
}

/************************************
** スマホで見やすい比較表(ここまで)
************************************/

A・B 比較表の例

比較A

A・B比較表(CSS・HTML)をコピペで掲載する。

比較B

A・B比較表(CSS・HTML)をコピペで掲載する。

1行目見出し

1行目比較A 強調文字

1行目比較A コンテンツ

1行目比較B 強調文字

1行目比較B コンテンツ

2行目見出し

2行目比較A 強調文字

2行目比較A コンテンツ

2行目比較B 強調文字

2行目比較B コンテンツ

A・B 比較表の例

比較A

A・B比較表(CSS・HTML)をコピペで掲載する。

比較B

A・B比較表(CSS・HTML)をコピペで掲載する。

1行目見出し

1行目比較A 強調文字

1行目比較A コンテンツ

1行目比較B 強調文字

1行目比較B コンテンツ

2行目見出し

2行目比較A 強調文字

2行目比較A コンテンツ

2行目比較B 強調文字

2行目比較B コンテンツ

A・B 比較表の例

比較A

A・B比較表(CSS・HTML)をコピペで掲載する。

比較B

A・B比較表(CSS・HTML)をコピペで掲載する。

1行目見出し

1行目比較A 強調文字

1行目比較A コンテンツ

1行目比較B 強調文字

1行目比較B コンテンツ

2行目見出し

2行目比較A 強調文字

2行目比較A コンテンツ

2行目比較B 強調文字

2行目比較B コンテンツ

<div class="comparison-table-wrap comparison-table-yellow comparison-table-img no-sticky">
<h4 class="comparison-table-title">A・B 比較表の例</h4>
<div class="comparison-table">
<table>
<thead>
<tr>
<th>
<p class="th-h" style="text-align: center;">比較A</p>
<img class="wp-image-4454 aligncenter size-medium" src="https://no1.plus/wp-content/uploads/2019/12/cyber-security-04-1-300x300.png" alt="" width="300" height="300" /></th>
<th>
<p class="th-h" style="text-align: center;">比較B</p>
<img class="wp-image-4457 aligncenter size-medium" src="https://no1.plus/wp-content/uploads/2019/12/cyber-security-11-1-300x300.png" alt="" width="300" height="300" /></th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">1行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">1行目比較A 強調文字</p>
1行目比較A コンテンツ</td>
<td>
<p class="td-h">1行目比較B 強調文字</p>
1行目比較B コンテンツ</td>
</tr>
<tr>
<th colspan="2">2行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">2行目比較A 強調文字</p>
2行目比較A コンテンツ</td>
<td>
<p class="td-h">2行目比較B 強調文字</p>
2行目比較B コンテンツ</td>
</tr>
</tbody>
</table>
</div>
</div>/* Your code... */

 

/************************************
** スマホで見やすい比較表(グリーン)
************************************/
/* 大見出し背景 */
.comparison-table-green .comparison-table-title{
  background:#2fcdb4 !important;
}
/* 中見出し背景 */
.comparison-table-green .comparison-table table tbody th{
  background:#2fcdb4 !important;
}
/* 強調文字 */
.comparison-table-green .comparison-table table tbody td .td-h{
  color:#2fcdb4 !important;
}
/* 全体背景 */
.comparison-table-green .comparison-table{
background:#eafaf7 !important;
}
/* 比較名背景 */
.comparison-table-green .comparison-table table thead th{
  background:#97c7bf !important;
}/* Your code... */

.