[返信する]
配色について
By め
2011-02-01 17:59:24
わたしのしたい配色は、

背景色：白
文字色：濃い灰
未訪問リンク色：濃い灰
訪問済みリンク色：灰
選択時のリンク文字色：白
選択時のリンク背景色：濃い灰

です。

質問したいのは選択時のリンク色についてです。
ナノの設定でいうアクティブリンク色を白にすれば、私の携帯では思ったように表示されますが、それでは他のキャリアからだとかなり見にくくなってしまいますよね？
なので、link:m-pe.tvを見て、以下の記述をしました。

■headの<style〜></style>間
a:link{
color:#333333;}
a:visited{
color:#808080;}

■body
<body style="background-color:#ffffff;color:#333333;">

こうしてから、色設定のアクティブリンク色を白に指定すればheadで指定しているドコモから見た時だけa:focusが白に指定され、bodyでalink指定している他キャリアから見た時にはエムペさんのようにa:focusやalinkが無指定の状態になり、ほぼ同じ表示になるって思ったんですけど、合ってますか…？

また、支援サイト様では、無指定ならば見づらいなどの問題がなくなるとの記述がありました。
でも、上記の方法ではドコモで指定してしまってることになります。
本当はドコモでも無指定にしたかったんですが、試した限りでは出来ないみたいでして。
同じドコモでも、色設定でいうアクティブリンク色と背景色を同色にすると見にくくなってしまう機種もあるんでしょうか…？

他機種を触ったことがなく、自分の解釈が合っているのかも自信がありません。
アドバイスお願いします。
SH705i
[編集]
By Ruby◇ACAABC9C
2011-02-01 20:23:58
めさん。
先に確認ですみません。
ナノさんの仕様はHEADやbodyに記述したものが優先されますよね？
HEADに
<style type="text/css">
a:link{
color:#333333;}
a:visited{
color:#808080;}
</style>
bodyに
<body style="background-color:#ffffff;color:#333333;">
を記述し「XHTMLに変換する」設定にした場合、「色」設定でアクティブ(携帯はフォーカス時)色を設定しても表示しないと思いますが、めさんの携帯は表示するのでしょうか？
docomoさんの場合、提示された記述のようにalink/a:focusの指定がない場合、フォーカス時のリンク文字色はページの背景色(白)になる仕様ではないですか？

アクティブ(携帯はフォーカス時)対応のsoftbank携帯912SHで試しましたが、やはりHEADとbodyに記述した指定が優先され、「色」設定のアクティブ色は表示しませんでした。
試しに「色」設定で白以外の色を設定なさると確認できると思います。
(au携帯は非対応ですが)

めさんが指定なさったHEADとbodyの記述を試し、カーソルがリンク文字に乗っているフォーカス時の結果は以下です。(未読リンク)
■softbank
※「リンク文字色」
ページの背景色(白)になります。
※「リンク文字の背景色」
リンク文字色の#333333になります。

■ au
※「リンク文字色」
薄い灰色になります。
※「リンク文字の背景色」
リンク文字色の#333333になります。

つまり、a:linkとa:visitedのみを指定すると、softbankとauの場合はフォーカス時のリンク文字の背景色は同じになります。
もちろんナノさんの仕様でHEAD・bodyに記述したものが優先されますから、softbank・PC共に「色」設定のアクティブ色設定は何色を指定しても無視され表示しません。
(auは元々アクティブ色に非対応です)

結果として、めさんの指定色では見づらいことはなく大丈夫です。

色の組み合わせによってですが、上記のa:linkとa:visitedだけの指定でカーソルがリンク文字の上に乗っているフォーカス時の表示は、docomo･softbank･auほぼ同じ表示が可能になることも確認しています。
(例えばページ背景色が白、a:linkが黒色、a:visitedが赤、a:focusが指定なし、だとするとdocomo・softbank・au共にフォーカス時のリンク文字背景色は同じ黒色になり、リンク文字色はdocomo・softbank・au共に同じ白になります)

softbankの場合ですが、a:focusに白色を指定しHEAD内に追記して試しましたが、softbankはページ背景色と同色(白)にすると、フォーカス時のリンク文字色は白で、リンク文字の背景色は強制的にデフォルトの青色になります。これは、ナノさんの仕様ではなくsoftbankの仕様です。
リンク色設定を、HEADでCSSを使わす「色」設定だけで各リンク色を指定し、アクティブ色を白にした時も同じ表示です。

docomoさん向けに、ページ背景色とアクティブ(携帯はフォーカス時)色を設定したいのでしたら、HEADに
<style type="text/css">
a:link{
color:#333333;}
a:visited{
color:#808080;}
a:focus{
color:#ffffff;}
/*ただしsoftbankは、リンク文字色はページの背景色の白になり、リンク文字の背景色はデフォルトの青色*/
</style>
bodyに
<body style="background-color:#ffffff;color:#333333;">

或は、ナノさんの仕様とは別で、他社でもフォーカス時のリンク文字背景色を各キャリア共通の表示にしたいなら
<style type="text/css">
a:link{
color:#333333;}
a:visited{
color:#808080;}
a:focus{}
/*色指定を空にする*/
</style>
bodyに
<body style="background-color:#ffffff;color:#333333;">
でいかがかと思います。

※解りやすくしたい為一部編集しました。

pc
[編集]
By Ruby◇ACAABC9C
2011-02-02 15:09:14
長くなりすみません。
めさんの最初の問い掛けについてに当てはまるか解りませんが、ナノさんの仕様として、ページ全体のリンク指定で特定の端末にだけアクティブ色(携帯はフォーカス時の色)を指定したい場合は、「XHTMLに変換する設定」にし、HEAD･bodyに以下のように記述することになると思います。
※HEAD
<style type="text/css">
a:link{
color:#;}
a:visited{
color:#;}
</style>
<振り分け独自タグ><style type="text/css">
a:focus{
color:#;}
</style></振り分け独自タグ>

※body
<body style="background-color:#;color:#;">

また、CSSに非対応なdocomo機種にも配慮する場合は「XHTMLに変換しない」に設定し
※bodyに
<body bgcolor="#" text="#" link="#" vlink="#">
※編集しました。

あと、めさんはご存知かと思いますが、閲覧者さんに解りやすいように、各キャリアの仕様を追記提示します。

■docomoさんの注意点
link/a:link と alink/a:focusに同じ色を指定すると、docomoさんでリンクフォーカス時に文字が見えなくなります。

■softbankさんの注意点
ページ背景色とalink/a:focusを同じ色にすると、フォーカス時のリンク文字背景色は強制的にデフォルトの青色になり、リンク文字色は白になります。これはナノさんの仕様ではなくsoftbankの仕様です。(他社でも同じなので)
また、テーブル要素に背景色を指定しその中にリンクがあると、テーブルの背景色によってはリンク文字色が白、背景色が青のデフォルトになります。(softbank全機種がそうなのかは未確認)

■ auさんの注意点
auの場合alink/a:focusは非対応です。
ですがau携帯の仕様として、フォーカス時のリンク文字背景色はlink/a:linkで指定した色になり、フォーカス時のリンク文字色が反転するauでは、リンク文字色を濃い色や薄い色に指定した場合は色が真逆になり見易くなります。

ただし、色の選択で濃度で言う中間付近の色は反転しても中間付近ですから、auでは殆ど同色に近い類似色なのでフォーカス時にリンク文字色が塗りつぶされたようになり、見づらくなったり見えないということにもなります。
例えば、リンク文字色に#808000(olive)のような色を指定した場合、auの一部機種だとフォーカス時のリンク文字色が水色になり、視力の弱い人には見づらくなります。

※各携帯キャリアのフォーカス時(active/a:focus)の仕様
■docomoさん
※[リンク文字色]
alink/a:focusで指定した色です。
alink/a:focusの指定がない場合、フォーカス時のリンク文字色はそのテキストの背景の色。

※[リンク文字背景色]
link/a:linkで指定した色です。
（訪問済みリンクの場合はvlink/a:visited）で指定した色。

■auさん
※[リンク文字色]
alink/a:focusは効かずに、link/a:link（vlink/a:visited）で指定した色が背景色となり、その反転色がリンク文字色となります。
例えば黒→白で、リンク文字色は反転し白になります。(注意点で提示したように中間色の場合異なります)

※[リンク文字背景色]
link/a:linkで指定した色です。
（訪問済みリンクの場合はvlink/a:visited）で指定した色です。

■softbankさん
※[リンク文字色]
ページの背景色。

※[リンク文字背景色]
alink/a:focusで指定した色です。
alink/a:focusの指定がない場合はlink/a:link(vlink/a:visited)で指定した色です。
(注意点で提示したようにページの背景色とalink/a:focusを同じ色にすると、フォーカス時のリンク文字背景色はデフォルトの青色になります)
また、各リンク色とページ背景色の組み合わせによっては、リンク文字色は白で背景色が青のデフォルトになります。

長々と失礼しました。
(編集と削除をしました)
めさんの疑問が解決できたか解りませんが、同じdocomoさん利用者の方々のアドバイスもあれば参考になると思います。

pc
[編集]
By 匿名
2011-02-05 05:49:53
＞Rubyさん
めさんが参考になさったスレでRubyさん御自身が掲示しているように、DoCoMoでは「XHTMLに変換する」にした場合色設定で指定した色のCSS【<style type="text/css"><![CDATA[a:link{color:#〜;}a:visited{color:#〜;}a:focus{color:#〜;}]]></style>】がHEAD内に挿入されます。
bodyは自分で記入したものが優先されて表示されますが、HEADはデフォルトの内容の次に自分で記入したものがプラスされるだけなので上記のCSSが消えません。
CSSは後述した物が適用されるのでa:link{color:#〜;}とa:visited{color:#〜;}は自分の記述でも変えられますが、a:focus{}は空にしたとしても先に設定されているのでそちらが適用されてしまいます。
よって「XHTMLに変換する」にした場合DoCoMoではアクティブリンク(a:focus)を無指定にする事は不可能なのです。
(a:linkとa:visitedも無指定は不可)


＞めさん
DoCoMoでもRubyさんが提案して下さったCSS非対応機種を考慮した方法のように「XHTMLに変換しない」に設定しbody欄に<body bgcolor="#〜" text="#〜" link="#〜" vlink="#〜">とalinkを記述しなければアクティブリンクを無指定にする事が出来ます。
(しかしもしインラインCSSを使用している場合予期しない表示になるかもしれません。
自分で試した所「XHTMLに変換する」から「XHTMLに変換しない」に変更すると<div style="background:#〜;"></div>が反映しなくなりました。)

自身が知る限りでは背景色とアクティブリンク色を同色にして見にくくなるDoCoMo機種はない筈です。
今後仕様によってどうなるか分かりませんが、現時点ではめさんが掲示されている色設定で問題ないと思われます。
P904i
[編集]
By Ruby◇ACAABC9C
2011-02-06 03:08:52
■P904i匿名さん。
なるほど、ナノさんでdocomoさんの場合「XHTMLに変換する設定」で、出力されるリンク色指定のCSSに、自身が直接記述したCSSがプラスされる仕様なんですね。

ナノさんの仕様は、docomoさんの場合「XHTMLに変換する設定」で「色設定」のリンク色がHEADにCSSで出力され、ページ背景色と文字色がbodyにCSSで出力されることは存じてましたが、HEADに自身が直接記述した場合は、docomoさんにもその直接記述したCSSだけが出力されると思っていました。

ナノさんや他社の仕様と対応を調べる為、各携帯キャリアの実機で実装を調べ、各キャリアに出力されるソースも確認してはいましたが、以前にdocomo携帯の実装を調べる為にナノさんと他社でdocomo携帯からテストした際に、CODATAセクションとコメント宣言のテストやその他を調べました。
その際、ナノさんでdocomo携帯に出力されるソース確認だけはしてなかったので気づきませんでした。
大変参考になり感謝です。ありがとうございました。

■めさん。
ご覧になってるか解りませんが、テストした結果、他キャリアもページ背景色とa:focus/alinkを同色にしても問題ないです。
できるだけ各端末で差異のない共通の表示にしたい場合は、HEADにCSSでa:focus指定無しにして、ナノさんの仕様を踏まえdocomoさんは「色設定」でアクティブ色を白にして最初に提示なさったCSS (リンク先で私の回答を参考にしていただいたCSS) を記述なされば、フォーカス時のリンク文字色とリンク文字の背景色はほとんどの端末で同じ表示になります。
(au携帯だけは、フォーカス時のリンク文字色が他端末と違います)
au携帯向けに、a:link色を選ぶ時の注意点だけ気をつけて指定なされば大丈夫です。

■余談ですが、ナノさんの仕様を踏まえ、「XHTMLに変換する設定」にし尚且つdocomoさんに出力されるa:focusを無効にする方法ですが、リンク擬似クラスの指定順序を変更すると可能です。
CSSのリンク擬似クラスと動的リンク擬似クラスは、CSSの仕様として指定する順序は以下の通り
a:link
a:visited
a:focus
で定められています。つまり、動的リンク擬似クラスのa:focusを先に記述すると、次に記述するa:linkとa:visitedに上書きされa:focusは表示しなくなります。
HEADに
<style type="text/css">
a:focus {
color:#ffccff;
}
a:link {
color:#333333;
}
a:visited {
color:#808080;
}
</style>
bodyに
<body style="background-color:#ffffff;color:#333333;">
を記述した場合、ご承知のように「XHTMLに変換する設定」の場合、docomoさんにだけ出力されるCSSリンク色指定の後に指定したことになり、この後から指定したCSSが優先されます。そしてCSS仕様に則ったブラウザは、上書きされフォーカス色の#ffccffは適用されず表示しなくなります。
softbank携帯はCSS仕様通りの実装なので、a:focus色を先に指定するとフォーカス時色は表示しないです。
docomo携帯がCSS仕様通りの実装なら、この方法でa:focus無効が可能です。
ですが、前記で説明したようにCSSで定義された仕様に反した順序で指定することになりますから、誤った不正なCSSになります。

pc
[編集]
By め
2011-02-06 08:24:26
遅くなってしまいましたが、Rubyさん、P904iの匿名さん、回答ありがとうございます。
他キャリアの仕様からナノ仕様まで、大変勉強になりました。

問題が無いようなので、とりあえずは今の設定のまま様子を見てみることにします。
サイトの改装で色を変えたり、ナノさんの方で仕様変更があったりしましたら、その時はまたこのトピを参考にさせていただきますね。

簡単なレスになってしまい申し訳ありません。
でも、本当に助かりました。ありがとうございました。
SH705i
[編集]
By 匿名
2011-02-07 03:00:25
スレ主さんが解決されましたが、同内容の為引き続きこちらに失礼します。問題あるようでしたら別スレを立てます。

Rubyさんが記述された順序変更
<style type="text/css">
a:focus {
color:#ffccff;
}
a:link {
color:#333333;
}
a:visited {
color:#808080;
}
</style>
こちらを試しましたが残念ながら自機種では変わらず反映されてa:focusを無効には出来ませんでした。

後で編集されたようですが、初めに掲示されていた
a:focus {
color:transparent;
}
を試した所こちらは反映して背景色に出来ました。
transparent(透明色)はbackground-colorのみへの指定だと思っていましたが自機種ではa:focusでも指定可能でした。
「後程確認を…」と書かれていたと思うのですが、編集して消されたという事はRubyさんが確認された機種では反映しなかったのでしょうか？
自身もデフォルトのa:focus状態を模索していたので問題なければtransparentで指定しようと思ったのですが、反映されない機種がありましたら諦めようと思います。
P904i
[編集]
By Ruby◇ACAABC9C
2011-02-07 12:34:43
■P904i匿名さん。
ご質問の「私が提示したa:focus{color:transparent;}を削除した理由」ですが、この指定をするとsoftbank携帯ではフォーカス時の文字色と文字背景色が消えて(透明)見えなくなってしまいます。
transparent値の意味は、正確にいうと該当要素を抱合してる要素、または親要素の背景色が透けて見えることを指します。
なので、softbank携帯はa:focus{color:transparent;}は使えないです。

Web標準仕様のCSSと異なる仕様のdocomoさんではどうなのかをdocomo公式で確認したところ、docomoさんの仕様ではcolorプロパティ初期値は黒色でした。
ですが、Web標準仕様のCSSでの初期値はUAに依存するとしています。
つまり、各ブラウザの実装に依存し、transparent値を指定しても表示が同じとは限らないということです。
しかし、background-colorプロパティの場合は、初期値がtransparentと明確に定義されています。
以上のことを踏まえ、各携帯キャリアのバージョン別とメイカー別にテストしてからのほうが正確な実装を提示できると判断し削除しました。また、全キャリアの全メイカー表示確認作業には時間がかかる為「後ほど確認」としました。

a:focusのcolorプロパティの値に、transparentがP904i匿名さんのdocomo機種は対応しているのでしたら、iモードブラウザ2.0のdocomo機種も対応していることになります。(リンク色関連の実装は公式を見る限り同じなので)
シミュレーターでの確認もしてますが、ご承知のようにシミュレーターはおおよその表示確認にすぎないので、実際に実機で確認が正確です。

■冒頭で回答したように、softbank携帯はcolorプロパティの値にtransparent値を指定するとフォーカス時にリンク文字が見えなくなってしまいますから、docomoさんにだけ適用されるように
「共通HEAD出力しない」
「XHTMLに変換する」
の設定をします。
また、PCブラウザ向けにXHTML1.0文書型宣言を記述し(追記しました)
※HTMLに
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

※HEADに
<noimode><meta http-equiv="content-type" content="text/html; charset=Shift_JIS" /></noimode><imode><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /></imode>
<title>ページタイトル</title>
<meta http-equiv="content-style-type" content="text/css" />

<style type="text/css">
a:link{
color: #333333;
}
a:visited{
color: #808080;}
</style>
<imode><style type="text/css">
a:focus{
color: transparent;
}
</style></imode>

※bodyに
<body style="background-color:#ffffff;color:#333333;">

■あるいは、docomoさんも公式では inherit値(強制的に継承)に対応としていますし、以下の指定ならsoftbank携帯でもa:focus指定無し(無効)と同様の表示になります。(softbank携帯はa:focus自体を指定しなければ済む話しですが)
匿名さんの機種が対応していればこちらの指定でも良いです。
※HTMLに
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

※HEADに
<noimode><meta http-equiv="content-type" content="text/html; charset=Shift_JIS" /></noimode><imode><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /></imode>
<title>ページタイトル</title>
<meta http-equiv="content-style-type" content="text/css" />

<style type="text/css">
a:link{color: #333333;
}
a:visited{
color: #808080;
}
</style>
<nopc><style type="text/css">
a:focus{
color: inherit;
background-color: transparent;
}/*他の色指定の場合は指定が違います*/
</style></nopc>

※bodyに
<body style="background-color:#ffffff;color:#333333;">

とりあえず3機種で表示テストした結果はご希望の表示が可能ですが、全キャリアのバージョン別、全メイカー別の表示テストは後ほど行います。

pc
[編集]
By 匿名
2011-02-08 03:02:55
softbankでは見えなくなると予想していたので元より<imode>a:focus{color:transparent;}</imode>としていましたが、DoCoMoでも必ず全て同じ表示になるとは限らないのですね。
しかしiﾓｰﾄﾞﾌﾞﾗｳｻﾞ2.0でも適用されそうなら取り敢えずこれで様子を見てみる事にします。

inheritは既に自身も試していましたが、背景色ではなく黒色で表示されました。
何故デフォルト背景色にならないのか不思議でしたが、
>>「docomoさんの仕様ではcolorプロパティ初期値は黒色でした。」
恐らくこの初期値が適用されてるのではないかと思いました。

■これは配色とは関係ないですが、ホムペ設定の共通HEADでデフォルトのHEAD内タグを「出力する」にしている場合<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />が自動で（恐らくDoCoMoのみに）挿入されるようなので「出力する」にしているならば自分で記述追加しなくても大丈夫だと思います。


＞Rubyさん
各キャリアの詳細情報大変参考になりました、ありがとうございました。

＞めさん
場所お借りしてすみませんありがとうございました。
P904i
[編集]
By Ruby◇ACAABC9C
2011-02-08 10:34:57
■P904i匿名さん。
「共通HEAD出力しない」に設定するを記述忘れしてました。補足ありがとうございます。

匿名さんがコメントなさった「共通HEAD出力するにしているから大丈夫と思います」についてですが、「共通HEADは出力しない」にしたほうが良いです。

docomoさんに出力されるMIMEタイプと他端末に出力されるMIMEタイプは違いますし、ナノさんの仕様は文字コードをhttpヘッダに設定していません。
またXHTMLの必須指定も出力されていないので、他ブラウザ向けの為にもXHTMLで必須の指定が必要です。

■HEAD・HTML詳細設定
・DOCTYPE
文書型宣言
(PC向けには必須。文書型宣言の前に記述するXML宣言も必須ですが、PCのIE互換モードを避ける為XML宣言だけ省略したほうが無難です)

HTML
・名前空間
(XHTMLでは必須)

■共通HEAD、または各HEAD・HTML詳細設定内のHEADに
・meta空要素で文字コードとMIMEタイプ
(docomoさん以外はtext/htmlです、docomoさん以外には、ソースが出力されてないので必須。その為「共通HEAD出力しない」にし、振り分け独自タグで双方に指定する必要があります。これを記述しないと文字化けするブラウザがあります)

・meta空要素でデフォルトCSS指定
(インラインCSSを使う場合、デフォルト指定が必須)

title要素でページタイトル記述
(ナノさんの場合は基本設定内でも良いです)
を、直接ご自身で記述することをおすすめします。

共通HEAD出力しないに設定し、他に共通で適用させたい指定があれば、上記に追記なされば良いです。

pc
[編集]
[1-10表示]
[返信する]
[新規トピ]
[戻る]
無料HPエムペ！