[
[返信する]]
TOPにcssが効かなくて困っています。
by ひなた
2012-10-21 09:05
「HEAD・HTML詳細」の「HEAD内」に下記のタグを書き込んだんですが、効かなくて困っています。
下記のタグだけじゃなく、他のタグも効きません。
TOPページだけです。
<style type="text/css">
<!--
body {
text-align: center;
div-align: center;
padding: 5px;
}
div#layout{
border: 1px solid #CCCCCC;
margin: 0 auto;
padding: 10px;
div-align: center;
text-align: left;
font-size: 0.7em;
background-color: #FFFFFF;
}
a:link,a:visited,a:active {
text-decoration:none;}
a:hover {
color:#66666;
position:relative;
top:1px;
left:1px;}
-->
</style>
pc
[編集]
by Charles
2012-10-21 10:35
▼まず、誤りのお知らせから失礼します。
提示なさったソースはstyleタグは使っていますが「タグ」ではありません。
正確にはhead要素内にstyle要素で埋め込む「CSS」です。専門的用語だと「エンベッド方式のCSS」と呼びます。
タグと呼んしまうと、（X）HTMLとCSSが混乱して、質問者さまも後々覚えにくくなります。
あと、<!--と-->のコメント宣言は削除してください。「XHTMLに変換する」のデフォルト設定であり、振り分け独自タグで振り分けないなら、削除しないとdocomoブラウザで対応するはずのCSSが適用されなくなります。
▼ご質問の本題ですが、「他のタグも」というのは何を指していますか？
他にもいくつか情報が必要なので確認させてください。
【1】提示なさったCSSは、公式テンプレートのものですが、トップページのHEAD･HTML詳細設定内の、HEAD内に提示なさったCSSを記述しているなら、他に記述してあるCSS等はありますか？
あれば省略しないでそのまま提示してください。
【2】トップページの全体レイアウトに
<div id="layout">内容</div>は記述していますか？
【3】上下共通テキスト表示は適用していますか？適用している場合は、どんな記述かも提示してみてください。
【4】「他のタグも効かない」とは、何を指していますか？
全体レイアウトの記述も、省略しないで載せてみてください。
▼ご確認なさるとわかりますが、トップページのHEAD･HTML詳細設定の、HEAD内に提示なさったCSSだけを記述して、全体レイアウトに
<div id="layout">ページの内容（ページ内の文章やリンク、画像他）</div>
だけを記述してみると、提示なさったCSSは適用されます。
（PC側の設定でCSSを無効にしてる場合と、docomoブラウザ1.0はリンク擬似クラスセレクタのcolorプロパティ以外は非対応ですから、CSS対応端末としてです）
適用されないとしたら、HEAD内のCSSで上書きされてるか、上下テキスト･全体レイアウト内にインライン方式style属性でのCSS指定他があり、上書きされてるなどが考えられます。
※HEAD内に記述するCSSは、important指定以外で、同じセレクタで同じプロパティのCSSを2つ以上記述した場合、最後に記述したCSSの値が上書きされることになり、最後に記述したCSSが優先され適用されます。
※全体レイアウト、上下テキスト表示内に、style属性でCSS指定がある場合、HEAD内のCSSより優先され適用されます。
fontタグのHTMLよりstyle属性のCSSが優先されるのが正しい仕様ですが、携帯の場合は、文字サイズなどfontタグ指定が優先される機種もあります。ですから、統一するにはCSSのみ使用したほうが無難です。
▼CSSの仕様を覚えた上でナノさまの仕様も知る必要があり、共通HEAD内と同じCSS（セレクタとプロパティ）をトップページや各機能のHEAD･HTML詳細設定内のHEADにも記述した場合、共通HEADの値より優先され適用されます。
例えば、文字サイズと文字色指定を共通HEAD内に<style type="text/css">body{font-size:100.01%;color:#ffffff;}</style>と記述していて、トップページのHEAD内に<style type="text/css">body{color:#000000;}</style>が記述されていたら、共通HEADで指定されたcolorプロパティの値が上書きされ、トップページ全体の文字色は「黒色」になり、文字サイズは共通HEADで指定されてるだけなので「100.01%」の文字サイズはそのままトップページにも適用されます。
▼とりあえず、上記の簡単な説明をしてみましたが、解決しない場合は、情報提示と併せて詳しいソースの提示をしてみてはいかがでしょうか。
943SH
[編集]
by 十七名
2012-10-21 12:44
タイプミスだと思うのですが、気になったので書き込みさせていただきます。
<div style="layout">内容</div>ではなく<div id="layout">内容</div>ではないでしょうか。
あまりタグには詳しくないので、もし前者で正しい場合はすみません。
pc
[編集]
by Charles
2012-10-21 15:23
▼十七名さま
おっと、うっかりミスしました。お知らせありがとうございます。
id=""に修正しました。
943SH
[編集]
by 匿名
2012-10-22 23:10
Charlesさんもおっしゃっていますが、まずは全体レイアウトなどを提示してみては？
F02C
[編集]
by あ
2012-10-23 13:05
上の方、コメントアウトはタグではないですよ。
それから、他サイトの提示も控えた方が良いかと。
SA002
[編集]
by Charles
2012-10-23 15:22
▼Joeさま
あさまのご説明のように、<!--と-->は注釈宣言と呼び、マーク宣言の一種であってタグではありませんので、これを「タグ」などと呼ぶと意味が通じません。
失礼して補足しますが、「コメントアウト」も間違いにはなりませんが、正しい呼び方ではありません。
プログラム言語上で使われることはありますが、HTML･XHTML･CSSは、プログラム言語とは違います。SGMLの仕様にはコメントアウトという呼び名はありません。注釈宣言、あるいはコメント宣言と解説があります。<! がマーク宣言開始区切り子。最初の--がコメント開始区切り子。後の--がコメント終了区切り子。最後の > がマーク宣言終了区切り子です。
「<!-- 文字など -->は、「文字など」の部分を閲覧者から隠してメモしておくためのタグです。それが原因で<style>内が全て無効化されて、他のタグも反映されないのでは？」
について。
ナノさまの仕様で、style要素の内容で<!--CSS-->の注釈宣言（コメント宣言）を使いCSSが適用されないとしたら、「XHTMLに変換する設定」と「DOCTYPE入力欄」を空にしたままのデフォルトの場合に、docomo携帯ブラウザだけ対応するCSSが非表示になります。それ以外のブラウザはCSSが対応していれば問題なく適用されます。
少し誤解されてるようですから、失礼して説明させていただきます。
ファイル（Webページ）内は#PCDATAというデータ形式になっています。
どういうことかというと、文字参照は展開され対応する文字に置き換えられ、要素の内容は構文解析され展開します。
例えば、<em style="color:#ff0000;">文字</em>をマークアップすると文字は赤くなり、& と書くと & に置き換えられます。ファイル内に<!--Comment-->の注釈宣言を記述すれば、注釈宣言の内容Commentは全ての閲覧者さまに見えなくなります。
#PCDATAの内容データは、上記の説明のようにマークはマークとして解釈されますから、 < はタグの開始区切り子と見なされますね。それを利用し、ソース内に<!--解説 --> を書けば注釈宣言とみなされ、その中身はコメントとして無視されブラウザ上で非表示にできるわけです。
▼しかし、ここで勘違いしないように注意することは、style要素とscript要素の内容データが、HTML と XHTMLでは違ってくることです。
※ HTMLのstyle要素とscript要素の場合
style要素の内容データ（CSS）はCDATAになります。
CDATA (文字データ)の意味は、読んで字のごとく文字データを表します。上記の説明の #PCDATA と違う点は、マークが解釈されない点です。
& と書けば、それはそのまま & という文字列として扱われます。
マークアップの記号はそのまま文字として扱われる。< や > などは単なる文字と見なされます。<!-- --> を書いても、中身は無視されません。
つまり、style要素の内容で<!--CSSの内容-->というように注釈宣言を記述しても、CSS対応ブラウザでは注釈宣言は単なる文字として扱われるので、CSSは無視（非表示）されないで適用されます。
一方で、CSSに非対応なブラウザは注釈宣言が解釈されて非表示になりますから、注釈宣言を使えばCSSの英字文字列がブラウザ上に露出しないようにできるわけです。
ナノさまの仕様でいうと、「XHTMLに変換しない設定」にした場合は、CSSを解釈しなくなるdocomoブラウザ1,0向けに注釈宣言は必要になります。注釈宣言を使わないと、docomoブラウザ1,0から閲覧するとCSSの英字文字列がブラウザ上に露出してしまいます。
※ XHTML（XML）のstyle要素とscript要素の場合
script要素やstyle要素の内容データは、HTMLとは違い #PCDATAになり、マークアップは構文解析されますから、style要素の内容に注釈宣言<!--CSS-->を使うと、注釈宣言は解釈されCSS対応ブラウザでもCSSは非表示になってしまいます。
つまり、ナノさまのデフォルト「XHTMLに変換する設定」で注釈宣言をstyle要素内容に使うと、docomoブラウザ1.0は対応するリンク擬似クラスのCSSが適用されなくなります。
ちなみに、docomoブラウザ2.0以降は「XHTMLに変換する･しない」設定は関係なく、DOCTYPE入力欄が空にしたままのデフォルト利用なら、注釈宣言は使えません。使うとCSSが非表示になる仕様です。
あとXHTMLの場合、注釈宣言以外にCSS構文内で&<--の文字列が含めませんから、含むCSSの場合だけCDATAセクションを/*と*/のコメントで囲み指定します。ですが、CSSの場合、URIに&が含まれてる画像以外はCDATAセクションが必要になることはあまりないです。
以上のように、Web仕様とナノさまの仕様と各ブラウザの仕様を照らし併せてページ作成をしなければなりません。
▼まとめると、ナノさまでCSS対応ブラウザと非対応ブラウザ両方で問題がないようにするには、「XHTMLに変換する設定」なら注釈宣言は使わない。
「XHTMLに変換しない設定」ならDOCTYPE入力欄にHTMLの文書型宣言を記述して、注釈宣言を使うようにします。
長くなりすみません。
943SH
[編集]
by Joe
2012-10-23 18:05
間違ったことを流してしまい申し訳ありません、削除しました。
お二方、丁寧な解説ありがとうございます。
pc
[編集]
[返信する]
[
戻る
]
[返信する]]
2012-10-21 09:05
pc
戻る
]