HTMLとCSSを使って機能の「ある」「なし」を色分けして表示する方法|Knowledge Base

公開日：2019(平成31)年2月6日／最終更新日： 2019(平成31)年2月6日

文字で表現するのが難しいので最初にイメージを・・・こんな感じにする方法です。

敢えて文字で表現するとすれば、何かの機能とか、共通である／なしを表示したい項目のあるサイトなどで全部の項目を表示しつつ、これは「ある」、これは「ない」を表示する方法です。カタログサイトなどでよく使われている表現と言えば一番ピンと来るかも知れません。

これを作ったきっかけは園芸と家庭菜園と観葉植物を楽しもう！のサイトのコンテンツで植物たちの紹介をしたり、公園の案内をしたりするとき、例えば害虫の種類を全部表示しておいてその植物に付きやすいものだけ色をつけるといった感じで使用しています。

基本的にコピペで作れますし、WordPressであればテキストエディタに貼り付ければすぐに表示できますから是非試してみてください。

今回は３列、４列、５列（特にWordPressの本文幅で使用すると思われる列数）の作り方を１回のコピペでできるようにしています。

HTMLとCSSを使って機能の「ある」「なし」を色分けして表示する方法

CSSへ追記するデザインコード

３列、４列、５列どれでも対応できるように以下をそのままコピペしましょう

/********** 機能や設備などのテーブル **********/
/******* テーブル全体 *******/
/*** ３列表示 ***/
table.select_table3 {
width: 100%;
border-collapse: inherit;
border-spacing: 5px;
}

/* 設備や機能がある場合 */
td.select_on3 {
width:33%;
background: #ffeb3b;
border: 2px solid #ff9800;
text-align: center;
font-size: smaller;
border-radius:8px;
}

/* 設備や機能がない場合 */
td.select_off3 {
width:33%;
background: #9e9e9e;
border: 2px solid #8a8888;
text-align: center;
font-size: smaller;
color: #fff;
border-radius:8px;
}

/*** ４列表示 ***/
table.select_table4 {
width: 100%;
border-collapse: inherit;
border-spacing: 5px;
}

/* 設備や機能がある場合 */
td.select_on4 {
width:25%;
background: #ffeb3b;
border: 2px solid #ff9800;
text-align: center;
font-size: smaller;
border-radius:8px;
}

/* 設備や機能がない場合 */
td.select_off4 {
width:25%;
background: #9e9e9e;
border: 2px solid #8a8888;
text-align: center;
font-size: smaller;
color: #fff;
border-radius:8px;
}

/*** ５列表示 ***/
table.select_table5 {
width: 100%;
border-collapse: inherit;
border-spacing: 5px;
}

/* 設備や機能がある場合 */
td.select_on5 {
width:20%;
background: #ffeb3b;
border: 2px solid #ff9800;
text-align: center;
font-size: smaller;
border-radius:8px;
}

/* 設備や機能がない場合 */
td.select_off5 {
width:20%;
background: #9e9e9e;
border: 2px solid #8a8888;
text-align: center;
font-size: smaller;
color: #fff;
border-radius:8px;
}

ちょっと長いコードですが、上からそれぞれ３列の場合、４列の場合、５列の場合となっていますので必要に応じて部分的に使っていただいてもかまいません。

囲み線はborder要素、背景色はbackground・・など基本的なCSS要素のみですので色の変更は適宜おこなってくださいね。

また、コードは下へ追記したものが優先して適用されますから、テーマのCSSの一番下へ追記するようにしてください。

挿入したい場所へ記述するHTMLコード

WordPressの本文であれば、テキストエディタにしてから以下のコードをそのままコピペした後、文字列を変更すればすぐに適用されます。

※もしもうまく表示できないときはブラウザのキャッシュをクリアしてみてください
【３列表示する場合のhtmlコード】

<table class="select_table3">
<tr>
<td class="select_on3">１段め列１</td>
<td class="select_on3">１段め列２</td>
<td class="select_off3">１段め列３</td>
</tr>
<tr>
<td class="select_on3">２段め列１</td>
<td class="select_on3">２段め列２</td>
<td class="select_off3">２段め列３</td>
</tr>
</table>

コードは２段分になっていますが、

<tr>
<td class="select_on3">２段め列１</td>
<td class="select_on3">２段め列２</td>
<td class="select_off3">２段め列３</td>
</tr>

が一段分になるので、適宜追加・削除すればOKです。

コードの中にある「select_on3」「select_off3」が黄色にするか灰色にするかの違いになりますから、それぞれのコンテンツで切り替えをしてください

【４列表示する場合のhtmlコード】

<table class="select_table4">
<tr>
<td class="select_on4">１段め列１</td>
<td class="select_on4">１段め列２</td>
<td class="select_off4">１段め列３</td>
<td class="select_off4">１段め列４</td>
</tr>
<tr>
<td class="select_on4">２段め列１</td>
<td class="select_on4">２段め列２</td>
<td class="select_off4">２段め列３</td>
<td class="select_off4">２段め列４</td>
</tr>
</table>

段を増減させる方法は３列の場合と同じです

コードの中にある「select_on4」「select_off4」が黄色にするか灰色にするかの違いになりますから、それぞれのコンテンツで切り替えをしてください

【５列表示する場合のhtmlコード】

<table class="select_table5">
<tr>
<td class="select_on5">１段め列１</td>
<td class="select_on5">１段め列２</td>
<td class="select_on5">１段め列３</td>
<td class="select_off5">１段め列４</td>
<td class="select_off5">１段め列５</td>
</tr>
<tr>
<td class="select_on5">２段め列１</td>
<td class="select_on5">２段め列２</td>
<td class="select_off5">２段め列３</td>
<td class="select_off5">２段め列４</td>
<td class="select_off5">２段め列５</td>
</tr>
</table>

段を増減させる方法は３列の場合と同じです

コードの中にある「select_on5」「select_off5」が黄色にするか灰色にするかの違いになりますから、それぞれのコンテンツで切り替えをしてください

以上、だれでも簡単にコピペでできるHTMLとCSSを使って機能の「ある」「なし」を色分けして表示する方法でした。