次へ

極意(59) 表のセル内の背景色を極める

QHMの個人レッスンにて聞かれたことの一つになりますが、表のセルの背景色を望みの色に替えられないのかと言う質問がありました。会員サイトに関連するページがありましたが、よく分からないとのことで実例を示しながら解説してみました。


通常の見出し設定でのイメージ

項目名1項目名2項目名3
項目1項目2項目3
項目A項目B項目C

[check]上記のおまじないです

|STYLE:left|
|LEFT:100|CENTER:100|RIGHT:100|c
|~項目名1 |~項目名2 |~項目名3 |
| 項目1 | 項目2 | 項目3 |
| 項目A | 項目B | 項目C |

先ずは、いつものQHMの表です。
この表の見出し項目の背景色をいろいろ替えてみたいと思います。


背景色を当ページのイメージカラーに設定

項目名1項目名2項目名3
項目1項目2項目3
項目A項目B項目C

[check]上記のおまじないです

|STYLE:left|
|LEFT:100|CENTER:100|RIGHT:100|c
|BGCOLOR(#87CEEB):項目名1 |BGCOLOR(#87CEEB):項目名2 |BGCOLOR(#87CEEB):項目名3 |
| 項目1 | 項目2 | 項目3 |
| 項目A | 項目B | 項目C |

[check]解説します
BGCOLORの指定でセルの背景色を SkyBlue（カラーコード:＃87CEEB） に設定しています。

セルの背景色を
スカイブルー（SkyBlue）に設定してみました。


背景色をネイビー、文字を白抜きで設定

項目名1項目名2項目名3
項目1項目2項目3
項目A項目B項目C

[check]上記のおまじないです

|STYLE:left|
|LEFT:100|CENTER:100|RIGHT:100|c
|BGCOLOR(#000080):COLOR(#FFFFFF):項目名1 |BGCOLOR(#000080):COLOR(#FFFFFF):項目名2 |BGCOLOR(#000080):COLOR(#FFFFFF):項目名3 |
| 項目1 | 項目2 | 項目3 |
| 項目A | 項目B | 項目C |

[check]解説します
BGCOLORの指定でセルの背景色をネイビー（カラーコード:＃000080）に設定しています。

COLORの指定でセル内の文字色を白色（カラーコード:＃FFFFFF）に設定しています。

背景色によっては、文字色が背景に埋もれて見え難い場合があります。
そんな時、白抜き文字で設定する例です。


背景色を赤、文字を白抜きで設定

項目名1項目名2項目名3
項目1項目2項目3
項目A項目B項目C

[check]上記のおまじないです

|STYLE:left|
|LEFT:100|CENTER:100|RIGHT:100|c
|BGCOLOR(#FF0000):COLOR(#FFFFFF):項目名1 |BGCOLOR(#FF0000):COLOR(#FFFFFF):項目名2 |BGCOLOR(#FF0000):COLOR(#FFFFFF):項目名3 |
| 項目1 | 項目2 | 項目3 |
| 項目A | 項目B | 項目C |

[check]解説します
BGCOLORの指定でセルの背景色を赤色（カラーコード:＃FF0000）に設定しています。

COLORの指定でセル内の文字色を白色（カラーコード:＃FFFFFF）に設定しています。

前記同様の赤の背景色に白抜き文字の設定例です。


カラーコードについて

前記の背景色の設定を実現するには、カラーコードを知らなければ話になりません。
カラーコードについては、以下のページを参照して下さい。

カラーコード表



戻る

上記の関連記事はお役に立ちましたか？

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 4  
    役に立たなかった 0  


コメント記入欄