ニコニコ大百科:CSSでの色指定 単語

ニコニコダイヒャッカシーエスエスデノイロシテイ

3.2千文字の記事
  • twitter
  • facebook
  • はてな
  • LINE

ニコニコ大百科編集時に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下書きして大百科に貼り付けた場合、問題を生じる可性がある。

関連項目

付録1: 指定可能な色名のリスト

ブラウザで使用可といわれている色名140のうち、以下の121色とtransparent定可(ただしtransparentはborder-colorには定できない)。他にもあるかもしれないが、ブラウザ依存になる可性があるため避けて16進数を使ったほうが難であろう。

使用可色かどうかを確認するには、確認したい色名をブラウザの「ページ内を検索」機で探すとよい。

aquacyanは同じ色である。

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色はプレビュー段階でエラーとして摘される。fuchsiamagentaと同じ色なのだが、何故かmagentaしか定できない。

"lightsteelblue", "orangered", "lightslategray", "lightgray", "whitesmoke", "aquamarine", "goldenrod", "fuchsia", "blanchedalmond", "lightskyblue", "lightblue", "greenyellow", "powderblue", "limegreen", "yellowgreen", "lavenderblush", "olivedrab", "blueviolet", "lightseagreen"

付録3: HTMLエディタで初期から選択可能な色のリスト

ページ内を検索」による使用可色の確認を容易にするためにこちらに格納しました。

この記事を編集する

掲示板

おすすめトレンド

ニコニ広告で宣伝された記事

記事と一緒に動画もおすすめ!
もっと見る

急上昇ワード改

最終更新:2025/02/08(土) 00:00

ほめられた記事

最終更新:2025/02/08(土) 00:00

ウォッチリストに追加しました!

すでにウォッチリストに
入っています。

OK

追加に失敗しました。

OK

追加にはログインが必要です。

           

ほめた!

すでにほめています。

すでにほめています。

ほめるを取消しました。

OK

ほめるに失敗しました。

OK

ほめるの取消しに失敗しました。

OK

ほめるにはログインが必要です。

タグ編集にはログインが必要です。

タグ編集には利用規約の同意が必要です。

TOP