WP Demo

作成日 :

3-6.color keywords による色指定

基本カラーキーワード （Basic color keywords）- 正式定義17色　

cf. CSS辞典第5版 P.475

white silver gray black lime olive green teal aqua red maroon orange yellow blue navy purple fuchsia

拡張カラーキーワード (Extended color keywords) 一覧　⭐ 正式定義17色

blanchedalmond #ffebcd 255 235 205
lightyellow #ffffe0 255 255 224
cornsilk #fff8dc 255 248 220
antiquewhite #faebd7 250 235 215
papayawhip #ffefd5 255 239 213
lemonchiffon #fffacd 255 250 205
beige #f5f5dc 245 245 220
linen #faf0e6 250 240 230
oldlace #fdf5e6 253 245 230
lightcyan #e0ffff 224 255 255
aliceblue #f0f8ff 240 248 255
whitesmoke #f5f5f5 245 245 245
lavenderblush #fff0f5 255 240 245
floralwhite #fffaf0 255 250 240
mintcream #f5fffa 245 255 250
ghostwhite #f8f8ff 248 248 255
honeydew #f0fff0 240 255 240
seashell #fff5ee 255 245 238
ivory #fffff0 255 255 240
azure #f0ffff 240 255 255
snow #fffafa 255 250 250
white #ffffff 255 255 255
gainsboro #dcdcdc 220 220 220
lightgray #d3d3d3 211 211 211
silver #c0c0c0 192 192 192
darkgray #a9a9a9 169 169 169
lightslategray #778899 119 136 153
slategray #708090 112 128 144
gray #808080 128 128 128
dimgray #696969 105 105 105
darkslategray #2f4f4f 047 079 079
black #000000 000 000 000
lawngreen #7cfc00 124 252 000
greenyellow #adff2f 173 255 047
chartreuse #7fff00 127 255 000
lime #00ff00 000 255 000
limegreen #32cd32 050 205 050
yellowgreen #9acd32 154 205 050
olive #808000 128 128 000
olivedrab #6b8e23 107 142 035
darkolivegreen #556b2f 085 107 047
forestgreen #228b22 034 139 034
darkgreen #006400 000 100 000
green #008000 000 128 000
seagreen #2e8b57 046 139 087
mediumseagreen #3cb371 060 179 113
darkseagreen #8fbc8b 143 188 143
lightgreen #90ee90 144 238 144
palegreen #98fb98 152 251 152
springgreen #00ff7f 000 255 127
mediumspringgreen #00fa9a 000 250 154
teal #008080 000 128 128
darkcyan #008b8b 000 139 139
lightseagreen #20b2aa 032 178 170
mediumaquamarine #66cdaa 102 205 170
cadetblue #5f9ea0 095 158 160
steelblue #4682b4 070 130 180
aquamarine #7fffd4 127 255 212
powderblue #b0e0e6 176 224 230
paleturquoise #afeeee 175 238 238
lightblue #add8e6 173 216 230
lightsteelblue #b0c4de 176 196 222
skyblue #87ceeb 135 206 235
lightskyblue #87cefa 135 206 250
mediumturquoise #48d1cc 072 209 204
turquoise #40e0d0 064 224 208
darkturquoise #00ced1 000 205 209
aqua #00ffff 000 255 255
red #ff0000 255 000 000
crimson #dc143c 220 020 060
maroon #800000 128 000 000
darkred #8b0000 139 000 000
brown #a52a2a 165 042 042
sienna #a0522d 160 082 045
saddlebrown #8b4513 139 069 019
indianred #cd5c5c 205 092 092
rosybrown #bc8f8f 188 143 143
lightcoral #f08080 240 128 128
salmon #fa8072 250 128 114
darksalmon #e9967a 233 150 122
coral #ff7f50 255 127 080
tomato #ff6347 255 099 071
sandybrown #f4a460 244 164 096
lightsalmon #ffa07a 255 160 122
peru #cd853f 205 133 063
chocolate #d2691e 210 105 030
orangered #ff4500 255 069 000
orange #ffa500 255 165 000
darkorange #ff8c00 255 140 000
tan #d2b48c 210 180 140
peachpuff #ffdab9 255 218 185
bisque #ffe4c4 255 228 196
moccasin #ffe4b5 255 228 181
navajowhite #ffdead 255 222 173
wheat #f5deb3 245 222 179
burlywood #deb887 222 184 135
darkgoldenrod #b8860b 184 134 011
goldenrod #daa520 218 165 032
gold #ffd700 255 215 000
yellow #ffff00 255 255 000
lightgoldenrodyellow #fafad2 250 250 210
palegoldenrod #eee8aa 238 232 170
khaki #f0e68c 240 230 140
darkkhaki #bdb76b 189 183 107
cyan #00ffff 000 255 255
deepskyblue #00bfff 000 191 255
dodgerblue #1e90ff 030 144 255
cornflowerblue #6090ef 096 144 239
royalblue #4169e1 065 105 225
blue #0000ff 000 000 255
mediumblue #0000cd 000 000 205
navy #000080 000 000 128
darkblue #00008b 000 000 139
midnightblue #191970 025 025 112
darkslateblue #483d8b 072 061 139
slateblue #6a5acd 106 090 205
mediumslateblue #7b68ee 123 104 238
mediumpurple #9370db 147 112 219
darkorchid #9932cc 153 050 204
darkviolet #9400d3 148 000 211
blueviolet #8a2be2 138 043 226
mediumorchid #ba55d3 186 085 211
plum #dda0dd 221 160 221
lavender #e6e6fa 230 230 250
thistle #d8bfd8 216 191 216
orchid #da70d6 218 112 214
violet #ee82ee 238 130 238
indigo #4b0082 075 000 130
darkmagenta #8b008b 139 000 139
purple #800080 128 000 128
mediumvioletred #c71585 199 021 133
deeppink #ff1493 255 020 147
fuchsia #ff00ff 255 000 255
magenta #ff00ff 255 000 255
hotpink #ff69b4 255 105 180
palevioletred #db7093 219 112 147
lightpink #ffb6c1 255 182 193
pink #ffc0cb 255 192 203
mistyrose #ffe4e1 255 228 225

CSS変数 – 拡張カラーキーワード

/* 変数定義 */
:root {
  --blanchedalmond: #ffebcd;
  --lightyellow: #ffffe0;
  --cornsilk: #fff8dc;
  … 略 …
}

/* 文字色 */
.blanchedalmond { color: var(--blanchedalmond); }
.lightyellow { color: var(--lightyellow); }
.cornsilk { color: var(--cornsilk); }
  … 略 …

/* 背景色 */
.bg-blanchedalmond { background-color: var(--blanchedalmond); }
.bg-lightyellow { background-color: var(--lightyellow); }
.bg-cornsilk { background-color: var(--cornsilk); }
  … 略 …
COPY

レスポンシブ・オートフィット・グリッド（Responsive Auto-fit Grid）

Cascading Style Sheets (CSS) Grid Layout を用い、Media Queries を記述することなく、コンテナの横幅に応じて列数を自動的に最適化するレイアウト手法。

<div class="grid-container">
  <div class="grid-item">
    <span>blanchedalmond</span>
    <span>#ffebcd</span>
    <span>255 235 205</span>
  </div>
  … 略 …
</div>
COPY
/* レスポンシブ・オートフィット・グリッド */
.grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 /* repeat()：列の生成の繰り返し
  * auto-fit：コンテナの幅に応じ、コンテナいっぱいにフィット
  * minmax(240px, 1fr): グリッドトラックを「最小240px、最大1fr」に指定し、グリッドアイテムを等分に収める */

 .grid-item {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
  /* repeat(3, auto)：3つのグリッドトラックを作成し、幅をアイテムのサイズに応じて、
   * justify-content: space-between：間隔を等分にコンテナいっぱいにアイテムを配置 */
    ...

    span {display: inline-block; white-space: nowrap;}
    /* カラム落ちする最小幅 */
    span:first-child {min-width: 111px;}
    span:nth-child(2) {min-width: 55px;}
    span:nth-child(3) {min-width: 60px;}
  }
}
COPY