ニコニコ大百科編集時にHTML要素に対してCSSで色指定を行う方法について記載する。
概要
ニコニコ大百科では編集の際、HTMLエディタ上及びCSSで色指定が可能である。
HTMLエディタ
HTMLエディタでは細かい指定は出来ないが、文字色と背景色の指定は可能である。
CSS
スタイルシートを直接編集する場合は、#444や#4c4c4cのように、#の後に3桁または6桁の16進数で指定する。
それ以外に、red, oragneなど色の英語名を用いて指定することも可能だが、後述のように指定するとプレビュー段階で使用できないと指摘される色名がある。上記のように16進数で指定できるので困ることはないが、直感的にわかりやすい色名で指定したい場合には注意を要する。
一般のCSSでは他にrgb, rgba, hsl, hslaによる指定が可能だが、ニコニコ大百科(2020年4月現在の仕様)ではrgb+0-255で指定した場合は、HTMLエディタを有効に切り替えた段階で16進数に強制変換される。rgb+%指定はそのまま投稿できるようだ。rgba, hsl, hslaによる指定は指定直後は機能しているように見えるが、プレビューに移動する段階でそれより後にあるスタイルシートの指定まで巻き添えで削除される。
考えられるケースとしては他のソフトウェア上でHTMLを下書きして大百科に貼り付けた場合、問題を生じる可能性がある。
関連項目
- ニコニコ大百科
- ニコニコ大百科:HTMLエディタヘルプ
- ニコニコ大百科:HTMLタグ一覧
- ニコニコ大百科:HTML各要素のデフォルトCSS
- ニコニコ大百科:グラフ機能
- ニコニコ大百科:仕様
- HTML / CSS
- 色の一覧 / HTMLカラーコード
付録1: 指定可能な色名のリスト
主要ブラウザで使用可能といわれている色名140のうち、以下の121色とtransparentが指定可能(ただしtransparentはborder-colorには指定できない)。他にもあるかもしれないが、ブラウザ依存になる可能性があるため避けて16進数を使ったほうが無難であろう。
使用可能色かどうかを確認するには、確認したい色名をブラウザの「ページ内を検索」機能で探すとよい。
| black | #000000 |
|
| dimgray | #696969 |
|
| gray | #808080 |
|
| darkgray | #a9a9a9 |
|
| silver | #c0c0c0 |
|
| gainsboro | #dcdcdc |
|
| white | #ffffff |
|
| snow | #fffafa |
|
| ghostwhite | #f8f8ff |
|
| floralwhite | #fffaf0 |
|
| linen | #faf0e6 |
|
| antiquewhite | #faebd7 |
|
| papayawhip | #ffefd5 |
|
| bisque | #ffe4c4 |
|
| moccasin | #ffe4b5 |
|
| navajowhite | #ffdead |
|
| peachpuff | #ffdab9 |
|
| mistyrose | #ffe4e1 |
|
| seashell | #fff5ee |
|
| oldlace | #fdf5e6 |
| ivory | #fffff0 |
|
| honeydew | #f0fff0 |
|
| mintcream | #f5fffa |
|
| azure | #f0ffff |
|
| aliceblue | #f0f8ff |
|
| lavender | #e6e6fa |
|
| slategray | #708090 |
|
| steelblue | #4682b4 |
|
| royalblue | #4169e1 |
|
| midnightblue | #191970 |
|
| navy | #000080 |
|
| darkblue | #00008b |
|
| mediumblue | #0000cd |
|
| blue | #0000ff |
|
| dodgerblue | #1e90ff |
|
| cornflowerblue | #6495ed |
|
| deepskyblue | #00bfff |
|
| skyblue | #87ceeb |
|
| paleturquoise | #afeeee |
|
| lightcyan | #e0ffff |
| aqua/cyan | #00ffff |
|
| turquoise | #40e0d0 |
|
| mediumturquoise | #48d1cc |
|
| darkturquoise | #00ced1 |
|
| cadetblue | #5f9ea0 |
|
| darkcyan | #008b8b |
|
| teal | #008080 |
|
| darkslategray | #2f4f4f |
|
| darkgreen | #006400 |
|
| green | #008000 |
|
| forestgreen | #228b22 |
|
| seagreen | #2e8b57 |
|
| mediumseagreen | #3cb371 |
|
| mediumaquamarine | #66cdaa |
|
| darkseagreen | #8fbc8f |
|
| palegreen | #98fb98 |
|
| lightgreen | #90ee90 |
|
| springgreen | #00ff7f |
|
| mediumspringgreen | #00fa9a |
|
| lawngreen | #7cfc00 |
| chartreuse | #7fff00 |
|
| lime | #00ff00 |
|
| darkolivegreen | #556b2f |
|
| olive | #808000 |
|
| darkkhaki | #bdb76b |
|
| palegoldenrod | #eee8aa |
|
| cornsilk | #fff8dc |
|
| beige | #f5f5dc |
|
| lightyellow | #ffffe0 |
|
| lightgoldenrodyellow | #fafad2 |
|
| lemonchiffon | #fffacd |
|
| wheat | #f5deb3 |
|
| burlywood | #deb887 |
|
| tan | #d2b48c |
|
| khaki | #f0e68c |
|
| yellow | #ffff00 |
|
| gold | #ffd700 |
|
| orange | #ffa500 |
|
| sandybrown | #f4a460 |
|
| darkorange | #ff8c00 |
| peru | #cd853f |
|
| darkgoldenrod | #b8860b |
|
| chocolate | #d2691e |
|
| sienna | #a0522d |
|
| saddlebrown | #8b4513 |
|
| maroon | #800000 |
|
| darkred | #8b0000 |
|
| brown | #a52a2a |
|
| firebrick | #b22222 |
|
| indianred | #cd5c5c |
|
| rosybrown | #bc8f8f |
|
| darksalmon | #e9967a |
|
| lightcoral | #f08080 |
|
| salmon | #fa8072 |
|
| lightsalmon | #ffa07a |
|
| coral | #ff7f50 |
|
| tomato | #ff6347 |
|
| red | #ff0000 |
|
| crimson | #dc143c |
|
| mediumvioletred | #c71585 |
| deeppink | #ff1493 |
|
| hotpink | #ff69b4 |
|
| palevioletred | #db7093 |
|
| pink | #ffc0cb |
|
| lightpink | #ffb6c1 |
|
| thistle | #d8bfd8 |
|
| magenta | #ff00ff |
|
| violet | #ee82ee |
|
| plum | #dda0dd |
|
| orchid | #da70d6 |
|
| mediumorchid | #ba55d3 |
|
| darkorchid | #9932cc |
|
| darkviolet | #9400d3 |
|
| darkmagenta | #8b008b |
|
| purple | #800080 |
|
| indigo | #4b0082 |
|
| darkslateblue | #483d8b |
|
| mediumpurple | #9370db |
|
| slateblue | #6a5acd |
|
| mediumslateblue | #7b68ee |
付録2: 指定できない色名のリスト
以下の19色はプレビュー段階でエラーとして指摘される。fuchsiaはmagentaと同じ色なのだが、何故かmagentaしか指定できない。
"lightsteelblue", "orangered", "lightslategray", "lightgray", "whitesmoke", "aquamarine", "goldenrod", "fuchsia", "blanchedalmond", "lightskyblue", "lightblue", "greenyellow", "powderblue", "limegreen", "yellowgreen", "lavenderblush", "olivedrab", "blueviolet", "lightseagreen"
付録3: HTMLエディタで初期から選択可能な色のリスト
「ページ内を検索」による使用可能色の確認を容易にするためにこちらに格納しました。
- 3
- 0pt
