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

公開日: ホームページ作成
Knowledge Base パソコン

文字で表現するのが難しいので最初にイメージを・・・
HTMLとCSSを使って機能の「ある」「なし」を色分けして表示する方法
こんな感じにする方法です。

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

これを作ったきっかけは

https://www.momosiri.info/gardening/

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

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

今回は3列、4列、5列(特にWordpressの本文幅で使用すると思われる列数)の作り方を1回のコピペでできるようにしています。

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

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

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

/********** 機能や設備などのテーブル **********/
/******* テーブル全体 *******/
/*** 3列表示 ***/
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;
}
/*** 4列表示 ***/
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;
}
/*** 5列表示 ***/
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;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

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

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

<table class="select_table3">
<tr>
<td class="select_on3">1段め列1</td>
<td class="select_on3">1段め列2</td>
<td class="select_off3">1段め列3</td>
</tr>
<tr>
<td class="select_on3">2段め列1</td>
<td class="select_on3">2段め列2</td>
<td class="select_off3">2段め列3</td>
</tr>
</table>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

コードは2段分になっていますが、
<tr>
<td class="select_on3">2段め列1</td>
<td class="select_on3">2段め列2</td>
<td class="select_off3">2段め列3</td>
</tr>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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

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

<table class="select_table4">
<tr>
<td class="select_on4">1段め列1</td>
<td class="select_on4">1段め列2</td>
<td class="select_off4">1段め列3</td>
<td class="select_off4">1段め列4</td>
</tr>
<tr>
<td class="select_on4">2段め列1</td>
<td class="select_on4">2段め列2</td>
<td class="select_off4">2段め列3</td>
<td class="select_off4">2段め列4</td>
</tr>
</table>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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

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

<table class="select_table5">
<tr>
<td class="select_on5">1段め列1</td>
<td class="select_on5">1段め列2</td>
<td class="select_on5">1段め列3</td>
<td class="select_off5">1段め列4</td>
<td class="select_off5">1段め列5</td>
</tr>
<tr>
<td class="select_on5">2段め列1</td>
<td class="select_on5">2段め列2</td>
<td class="select_off5">2段め列3</td>
<td class="select_off5">2段め列4</td>
<td class="select_off5">2段め列5</td>
</tr>
</table>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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


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

おまけ ボタン化していつでもすぐに挿入できるようにしておこう

WordPressにはこうしたコードをボタン化できる便利なプラグインがあります。

これを使ってあらかじめHTMLコードをボタン設定しておけば、投稿編集画面からいつでも呼び出して使うことができます。

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報