「色のこと」の版間の差分
提供: Test Wiki
Julyfestival (トーク | 投稿記録) (→一般的なブラウザ) |
Julyfestival (トーク | 投稿記録) (→一般的なブラウザ) |
||
| 行39: | 行39: | ||
|テキスト||黒||#000000||black||style="color:#000000"|見本 | |テキスト||黒||#000000||black||style="color:#000000"|見本 | ||
|- | |- | ||
| − | |未訪問のリンク<br>（a:link）||青||#0000FF||blue||style="color:#0000FF"|見本 | + | |未訪問のリンク<br>（a:link）||青||#0000FF||blue||style="color:#0000FF;text-decoration:underline;"|見本 |
|- | |- | ||
| − | |訪問済みリンク<br>（a:visited）||紫||#800080||purple||style="color:#800080"|見本 | + | |訪問済みリンク<br>（a:visited）||紫||#800080||purple||style="color:#800080;text-decoration:underline;"|見本 |
|- | |- | ||
| − | |マウスオーバー時<br>（a:hover）||||#FF8000||||style="color:#FF8000"|見本 | + | |マウスオーバー時<br>（a:hover）||||#FF8000||||style="color:#FF8000;text-decoration:underline;"|見本 |
|- | |- | ||
| − | |選択中のリンク<br>（a:active）||||#FF8000||||style="color:#FF8000"|見本 | + | |選択中のリンク<br>（a:active）||||#FF8000||||style="color:#FF8000;text-decoration:underline;"|見本 |
|} | |} | ||
*マウスオーバー時や選択中のリンクは | *マウスオーバー時や選択中のリンクは | ||
| 行52: | 行52: | ||
*各サイト毎で個別に配色を指定することも可能です。 | *各サイト毎で個別に配色を指定することも可能です。 | ||
*ただし一般的なwebデザインの観点では、これらの標準的な配色から著しく乖離した配色は、訪問者を戸惑わせることがあり、避けるべきだという考え方があります。 | *ただし一般的なwebデザインの観点では、これらの標準的な配色から著しく乖離した配色は、訪問者を戸惑わせることがあり、避けるべきだという考え方があります。 | ||
| + | |||
| + | ==MediaWikiの仕様== | ||
| + | *ウィキペディアで使用しているMediawikiでは、デフォルトの配色は次のようになっています。（外装にモノブックに設定している場合） | ||
| + | {|class=wikitable | ||
| + | |- | ||
| + | |項目||色||コード||色名指定||見本 | ||
| + | |- | ||
| + | |背景A||白||#FFFFFF||white||style="background-color:#FFFFFF"| | ||
| + | |- | ||
| + | |背景B||白||#F6F6F6|| ||style="background-color:#F6F6F6"| | ||
| + | |- | ||
| + | |テキスト||黒||#000000||black||style="color:#000000"|見本 | ||
| + | |- | ||
| + | |内部リンク||青||#0645AD||blue||style="color:#0645AD;"|見本 | ||
| + | |- | ||
| + | |内部リンク（訪問済）||濃青||#0B0080|| ||style="color:#0B0080;"|見本 | ||
| + | |- | ||
| + | |リンク先のページが存在しない場合||||#BA0000|| ||style="color:#BA0000;"|見本 | ||
| + | |- | ||
| + | |リンク先のページが存在しない場合（訪問済）|| ||#A55858|| ||style="color:#A55858;"|見本 | ||
| + | |- | ||
| + | |外部リンク|| ||#3366BB|| ||style="color:#3366BB;"|見本 | ||
| + | |- | ||
| + | |外部リンク（訪問済）|| ||#663366|| ||style="color:#663366;"|見本 | ||
| + | |- | ||
| + | |テンプレートの背景色A|| ||#F9F9F9|| ||style="background-color:#F9F9F9;"| | ||
| + | |- | ||
| + | |テンプレート見出し部の背景色A|| ||#F2F2F2|| ||style="background-color:#F2F2F2;"| | ||
| + | |- | ||
| + | |テンプレート見出し部の背景色B|| ||#CCCCFF|| ||style="background-color:#CCCCFF;"| | ||
| + | |- | ||
| + | |} | ||
| + | *これらの配色は利用者毎に個人設定で変えることができます。 | ||
| + | *外装（スキン）の選択や、カスタムCSSの設定で変更することができます。 | ||
2016年12月3日 (土) 17:43時点における版
- ウィキペディアのベースになっているMediawikiについて
- デフォルトの配色の説明
- リンク、赤リンク
- 背景色
- スキンのこと
- カスタマイズできる
- 一般的なブラウザの設定・挙動について
- リンク、閲覧済みリンク
- アクセスビリティの観点について
- コントラスト比 JIS、ISO
- 実際の色を表示してみせる
- 「配色」以外のアクセスビリティの考え方について紹介する
- デザインの観点について
- 色が与える情報についての概論
- 「色遊びはケシカラン」という全く根拠のない感情論があることも紹介
- 過剰な重みづけ
- 合意形成をすべし
Help:配色
一般的なブラウザ
- 一般的なブラウザでは、デフォルト設定として次のような配色になっています。
- インターネットエクスプローラーの例
| 項目 | 色 | コード | 色名指定 | 見本 |
| 背景 | 白 | #FFFFFF | white | |
| テキスト | 黒 | #000000 | black | 見本 |
| 未訪問のリンク （a:link） |
青 | #0000FF | blue | 見本 |
| 訪問済みリンク （a:visited） |
紫 | #800080 | purple | 見本 |
| マウスオーバー時 （a:hover） |
#FF8000 | 見本 | ||
| 選択中のリンク （a:active） |
#FF8000 | 見本 |
- マウスオーバー時や選択中のリンクは
- ブラウザやバージョンによっての違いもあります。
- 利用者毎にブラウザの設定をカスタマイズすることで、これらの配色は変更することができます。
- 各サイト毎で個別に配色を指定することも可能です。
- ただし一般的なwebデザインの観点では、これらの標準的な配色から著しく乖離した配色は、訪問者を戸惑わせることがあり、避けるべきだという考え方があります。
MediaWikiの仕様
- ウィキペディアで使用しているMediawikiでは、デフォルトの配色は次のようになっています。（外装にモノブックに設定している場合）
| 項目 | 色 | コード | 色名指定 | 見本 |
| 背景A | 白 | #FFFFFF | white | |
| 背景B | 白 | #F6F6F6 | ||
| テキスト | 黒 | #000000 | black | 見本 |
| 内部リンク | 青 | #0645AD | blue | 見本 |
| 内部リンク（訪問済） | 濃青 | #0B0080 | 見本 | |
| リンク先のページが存在しない場合 | #BA0000 | 見本 | ||
| リンク先のページが存在しない場合（訪問済） | #A55858 | 見本 | ||
| 外部リンク | #3366BB | 見本 | ||
| 外部リンク（訪問済） | #663366 | 見本 | ||
| テンプレートの背景色A | #F9F9F9 | |||
| テンプレート見出し部の背景色A | #F2F2F2 | |||
| テンプレート見出し部の背景色B | #CCCCFF |
- これらの配色は利用者毎に個人設定で変えることができます。
- 外装（スキン）の選択や、カスタムCSSの設定で変更することができます。
