色見本
テキストに色を付ける
- テキストや背景 (バックグラウンド)に色を付ける際の参考です。
- 「色の名前」で指定
- 文字の色を指定するには、spanタグのstyle属性に「色名」を記載します。
- 例えば、
- <span style="color:red;">赤字</span>
- とすると赤字になります。
- 「red」のような「色名」には以下のものがあります。
- 記述例
- <span style="color:black;">黒</span>
- <span style="color:gray;">灰色</span>
- <span style="color:silver;">銀色</span>
- <span style="background:black; color:white;">白</span>
- <span style="color:blue;">青</span>
- <span style="color:navy;">濃紺</span>
- <span style="color:teal;">青緑</span>
- <span style="color:green;">緑</span>
- <span style="color:lime;">黄緑</span>
- <span style="color:aqua;">水色</span>
- <span style="background:navy; color:yellow;">黄色</span>
- <span style="color:fuchsia;">マゼンタ</span>
- <span style="color:olive;">オリーブ</span>
- <span style="color:purple;">紫</span>
- <span style="color:maroon;">茶色</span>
- 脚注：「teal[1]」「fuchsia[2]」
- 表示
黒 灰色 銀色 白 青 濃紺 青緑 緑 黄緑 水色 黄色 マゼンタ オリーブ 紫 茶色
- 「白」と「黄色」の文字には、それぞれ「黒："background:black;"」、「濃紺："background:navy;"」の背景色を付けています。
その他の色の名前
- 色の名前にはまだまだあります。例えば、
- <span style="background:lemonchiffon;">浅黄色 </span>
浅黄色
- なんて色も出せます。「色名」には、全部で140色あるそうです。
- 詳しくはこちらを → 「カラーサンプル」
「色名」に無い色は「16進カラーコード」で指定
- また色を「名前」で指定する代わりに「#F5F5F5」のような16進カラーコードで指定することもできます。
- これを使えば「色名」に無い色「1677万色」が使えます。
- しかし、MediaWikiでは派手な色使いは推奨されませんので、控えめに、そしてスマートに作りましょう！
- 記入例
- <span style="color:#8D6449">枯茶色</span>
- <span style="color:#FFD900">蒲公英(たんぽぽ)色</span>
- <span style="color:#7058A3">菫(すみれ)色</span>
- 背景色を羊羹(ようかん)色に設定
- <span style="background:#383C3C;color:#DBD0E6">白藤色 </span>
- 表示
- 枯茶色
- 蒲公英(たんぽぽ)色
- 菫(すみれ)色
- 背景色を羊羹(ようかん)色に設定
- 白藤色
カラーサンプル
- MediaWikiでは派手な色使いは推奨されませんとは言うものの、個性的な色使いをしたい方もいらっしゃるでしょう。
- そのような方のために以下に「色名(Color Name)」と「16進カラーコード」の一覧表です。
- 一覧表を表示するには、下のボタンをクリック
| black #000000 |
aliceblue #F0F8FF |
darkcyan #008B8B |
lightyellow #FFFFE0 |
coral #FF7F50 |
| dimgray #696969 |
lavender #E6E6FA |
teal #008080 |
lightgoldenrodyellow #FAFAD2 |
tomato #FF6347 |
| grey #808080 |
lightsteelblue #B0C4DE |
darkslategray #2F4F4F |
lemonchiffon #FFFACD |
orangered #FF4500 |
| darkgray #A9A9A9 |
lightslategray #778899 |
darkgreen #006400 |
wheat #F5DEB3 |
red #FF0000 |
| silver #C0C0C0 |
slategray #708090 |
green #008000 |
burlywood #DEB887 |
crimson[3] #DC143C |
| lightgray #D3D3D3 |
steelblue #4682B4 |
forestgreen #228B22 |
tan #D2B48C |
mediumvioletred #C71585 |
| gainsboro[4] #DCDCDC |
royalblue #4169E1 |
seagreen #2E8B57 |
khaki[5] #F0E68C |
deeppink #FF1493 |
| whitesmoke #F5F5F5 |
midnightblue #191970 |
mediumseagreen #3CB371 |
yellow #FFFF00 |
hotpink #FF69B4 |
| white #FFFFFF |
navy #000080 |
mediumaquamarine #66CDAA |
gold #FFD700 |
palevioletred #DB7093 |
| snow #FFFAFA |
darkblue #00008B |
darkseagreen #8FBC8F |
orange #FFA500 |
pink #000000 |
| ghostwhite #F8F8FF |
mediumblue #0000CD |
aquamarine #7FFFD4 |
sandybrown #F4A460 |
lightpink #FFB6C1 |
| floralwhite #FFFAF0 |
blue #0000FF |
palegreen #98FB98 |
darkorange #FF8C00 |
thistle[6] #D8BFD8 |
| linen #FAF0E6 |
dodgerblue #1E90FF |
lightgreen #90EE90 |
goldenrod #DAA520 |
magenta #0000FF |
| antiquewhite #FAEBD7 |
cornflowerblue #6495ED |
springgreen #00FF7F |
peru[7] #CD853F |
fuchsia #FF00FF |
| papayawhip #FFEFD5 |
deepskyblue #00BFFF |
mediumspringgreen #00FA9A |
darkgoldenrod #B8860B |
violet #EE82EE |
| blanchedalmond #FFEBCD |
lightskyblue #87CEFA |
lawngreen #7CFC00 |
chocolate #D2691E |
plum #DDA0DD |
| bisque[8] #FFE4C4 |
skyblue #87CEEB |
chartreuse #7FFF00 |
sienna #A0522D |
orchid #DA70D6 |
| moccasin[9] #FFE4B5 |
lightblue #ADD8E6 |
greenyellow #ADFF2F |
saddlebrown #8B4513 |
mediumorchid #BA55D3 |
| navajowhite[10] #FFDEAD |
powderblue #B0E0E6 |
lime #00FF00 |
maroon #800000 |
darkorchid #9932CC |
| peachpuff #FFDAB9 |
paleturquoise #AFEEEE |
limegreen #32CD32 |
darkred #8B0000 |
darkviolet #9400D3 |
| mistyrose #FFE4E1 |
lightcyan #E0FFFF |
yellowgreen #9ACD32 |
brown #A52A2A |
darkmagenta #8B008B |
| lavenderblush #FFF0F5 |
cyan #00FFFF |
darkolivegreen #556B2F |
firebrick #B22222 |
purple #800080 |
| seashell #FFF5EE |
aqua[11] #00FFFF |
olivedrab #6B8E23 |
indianred #CD5C5C |
indigo #4B0082 |
| oldlace #FDF5E6 |
turquoise[12] #40E0D0 |
olive #808000 |
rosybrown #BC8F8F |
darkslateblue #483D8B |
| ivory #FFFFF0 |
mediumturquoise #48D1CC |
darkkhaki #BDB76B |
darksalmon #E9967A |
blueviolet #8A2BE2 |
| honeydew #F0FFF0 |
darkturquoise #00CED1 |
palegoldenrod #EEE8AA |
lightcoral #F08080 |
mediumpurple #9370DB |
| mintcream #F5FFFA |
lightseagreen #20B2AA |
cornsilk #FFF8DC |
salmon #FA8072 |
slateblue #6A5ACD |
| azure[13] #F0FFFF |
cadetblue #5F9EA0 |
beige[14] #F5F5DC |
lightsalmon #FFA07A |
mediumslateblue #7B68EE |
色名について：
- ↑ マガモの頭の羽の色からとられた名前。近年、組織のあり方を色分けした最上位の「ティールな組織」という言葉をお聞きになられた方もいらっしゃるでしょう。
- ↑ 赤紫色のことである。アカバナ科の植物フクシアの花の色にちなんで名づけられたが「フューシャ」と呼ばれることも多い。色の三原色の一つ「magenta：マゼンタ」とも呼ばれる。マゼンタの由来：1859年のマジェンタの戦い (サルデーニャ王国とフランスの連合軍が、オーストリア＝ハンガリー帝国軍に勝利をおさめた戦い)とほぼ同時期に発見された染料だったためこの名が付いた。
- ↑ 地中海の国々で樫の木の一種ケルメス・オーク (Kermes oak)に住むカイガラムシから取られた赤い染料の色であった。「ケルメスの」を意味するスペイン語"cremesi"が由来。 赤とマゼンタの中間色。
- ↑ ゲーンズボロ(淡い灰色)。英国の画家Thomas Gainsborough(1727-1788)の絵のスタイル(軽く繊細なタッチ)から来たようだ。米国の地名から来たという説もある。
- ↑ カーキ色:ヒンディー語の土埃(ホコリ)色から来ている。しかし、この色「カーキ色」と言うには少々明る過ぎる感じもしますね。
- ↑ Thistle：スィスルは植物の薊 (アザミ：スコットランドの国花)。花弁は細い棒状の集まりで針山のような形。その花弁の青紫色に由来する。非常に薄い青紫色。
- ↑ ペルーブラウン：南米ペルーの国旗や国章にアンデス原産キナの木があり、このキナの木の樹皮から抗マラリア薬のキニーネが得られる。この樹皮の色から来たようだ。黄土色というかアンバーというか、明るい茶色。
- ↑ Wikipedia参照：https://ja.wikipedia.org/wiki/%E3%83%93%E3%82%B9%E3%82%AF
- ↑ アメリカ先住民が履いていた、鹿などの一枚革で作られたスリッポン形式の靴の色から来た。靴はその後U字型の甲革がモカシン縫いという方法で縫い合わされたのでこの名がある。薄い茶色。
- ↑ 北米先住民族ナバホの国旗の背景色に由来する、薄いイエロー・オレンジ色。出典：https://en.wikipedia.org/wiki/Navajo_white
- ↑ aque は、上の cyanと同じです。
- ↑ ターコイズブルーとは、トルコ石 (turquoise：ターコイズ)を原料とする青緑色。ペルシャで採掘された石がトルコ経由で地中海地方にもたらされたため名づけられた。青と緑の中間色で、青みが強いトルコ石をターコイズブルー、緑が強いとターコイズグリーンと呼ばれる。
- ↑ 現在のトルキスタンにある地名lazhwardが語源。当地で産出する青色の宝石「ラピスラズリ：lazhwardの石(lapis)」を意味するようになり、色の名前となった。元来、明るく鮮やかな青を表すが、Webで規定されるアジュール(azure)は「淡い青色」で元の色と異なる。
- ↑ 染めていない羊毛の毛織物をベージュと言った。そこから「ベージュ」はその織物の色、つまり極めて薄い黄色または茶色のことを言う。
色に関する情報について
- 「色名」に無い色を使いたい
- 「色名」に無い色を指定したい場合は、「16進カラーコード」を組み合わせて作成します。
- 「16進カラーコード」については、以下のリンク先情報を参照ください。
- この16進コードはどんな色かな？
- 「16進カラーコード」に対する実際の色を確認したい場合は、https://www.peko-step.com/tool/tfcolor.html
- この色を使いたいが、16進コードは？
- 逆に、好きな色からカラーコードを知りたい場合は「HTML Color Code」https://html-color-codes.info/japanese/ が便利。
- また、「原色大辞典」https://www.colordic.org/ というサイトも参考になります。
質問・ご意見はこちら
- 上記リンクをクリックしてもメールソフトが起動しない場合は、以下のアドレスをコピーしてメールソフトの「宛先」に貼り付けてください。
- 【担当者メールアドレス】wiki_admin@koyamadai100.jp
- ←「3. テキスト整形方法について」 ←「4. テキスト編集ツール」 →「6. 【重要】ログアウトに注意！」 →「7. リンク作成方法について」
- ↑ページトップへ ↑↑「メインページ」の「編集者のためのヘルプ」に戻る ↑↑「メインページ」トップに戻る
脚注：
･
2022年3月21日：直近編集者：Adminkoyama100
TimeStamp：20220321212242