- 締切済み
現在、携帯用のXHTMLとCSSを勉強中で、いろいろなサイトや本を見な
現在、携帯用のXHTMLとCSSを勉強中で、いろいろなサイトや本を見ながら勉強しています。 一点教えていただきたいのですが --- <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=shift_jis" /> <meta name="keywords" content="検索キーワード"> <meta name="description" content="サイト紹介文"> <title>■■■</title> <style type="text/css"> .marquee{display:-wap-marquee; -wap-marquee-loop:infinite;} <![CDATA[ a:link{color:#750D0A;} a:visited{color:#750D0A;} a:link#menu{color:#FE9091;} a:visited#menu{color:#FE9091;} ]]> </style> </head> <body style="background-color:#F1EAD8; color:#000000;"> <span style="font-size:xx-small;"> --- いくつか見て、このような<head>の形が基本になっているようなのですが CSSにおいて <style type="text/css"> <![CDATA[ ]]> </style> の中に入るもの、入らないものはどう違うのでしょうか？ <style></style> の中に <body style="background-color:#F1EAD8; color:#000000;"> <span style="font-size:xx-small;"> を入れてはいけないのでしょうか？ わかりにくい質問ですみません。もしくは根本的に何か分かっていないのかもしれません… どうぞよろしくお願い致します
- tantankobayashi
- お礼率63% (98/155)
- HTML
- 回答数3
- ありがとう数20
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- metametamu
- ベストアンサー率51% (153/295)
docomoの古い機種へ配慮したソースです。 docomoの古い機種は基本タグのstyle属性で指定したスタイルしか反映させません。ただし例外としてアンカーのスタイルに限りhead内に書くことができます。ここでも外部cssは利用できません。 なので.marqueeの指定に関しては、古いdocomoには指定が反映されません。
- yyr446
- ベストアンサー率65% (870/1330)
本来は、CSS(javascriptとかもそうだけど)は全部外に出して別ファイルとして、 <link rel="stylesheet" type="text/css" media="handheld" href="/hogehoge.css" /> とかにするべき。 でも手を抜いて、ページ中に直に書くとき <style type="text/css"> －－－－－－－－－－－－ </style> 内に直接マークアップ出きる。 この時、<style>内の記述をXHTMLの要素として認識させないため、 CDATAノードにするためCDATAマークする。それが、 <style type="text/css"> <![CDATA[ －－－－－－－－－－－－ ]]> </style> のかたちという事、今でもCSSをサポートしてないブラウザーが、CSS定義の 中身をそのまま表示してしまうのを防ぐため、HTMLのコメントマークアップを 使って <style type="text/css"> <!-- －－－－－－－－－－－－ --> </style> とか <style type="text/css"> <!--[CDATA[ －－－－－－－－－－－－ ]]>--> </style> なんてのを見かけるが意味が無いので止めよう。 <style type="text/css"> <![CDATA[ －－－－－－－－－－－－ ]]> </style> でOKです。CDATA内では < > = - & ? ．. 等がXHTMLとして解釈される事が ないので、ページ内javascriptも同様の手法でマークアップします。 （携帯にjavascriptは無いけど．．．） 一方、要素のstyle属性でCSSを定義するのは、どちらかというとスポット 的にCSSを摘要させたい時です。 だから、<body style="... ってのはデバッグの時か、共通外部CSS使ってて、其のページだけ臨時に 変えたいときでしょう。 <span style="font-size:xx-small;"> も、同じくあるインライン要素のところだけ、極小文字にいたいのであって、 そおいう場所が複数あって、論理的に場所が決められるのなら、 CSSでセレクターを指定して"font-size:xx-small;"を指定しましょう。 そのためだけに、むやみにIDやCLASSを振って、CSS定義するのは意味無いですから、 style属性も役に立ちます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞いろいろなサイトや本を見ながら勉強しています。 とのことですが、基本は仕様書です。本やサイトは必ずしも仕様書を理解して書いていないと思われるものがとっても多いです。(7割りがたそうではないかと) また、仕様書を理解している著者なら、「必ず仕様書を参照せよ！！」と書いているはず。 CDATAとは、 HTML 4.01仕様書(邦訳)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) →概念索引 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/list.html ) →6.2 SGML基本形式 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#type-cdata ) に、詳しく説明してあります。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから CDATAは、文書文字集合中の任意の文字の列であり、文字実体をも含む。ユーザエージェントは、この属性値を次のように解釈する必要がある。 * 文字実体は文字で置き換える。 * 改行文字LFは無視する。 * 個々の改行文字CRあるいはタブ文字は、1つの空白文字で置き換える。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Basic HTML data types (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#type-cdata )］より 言い換えれば、スタイルシートをそのまま書くことができる。 ＞の中に ＞<body style="background-color:#F1EAD8; color:#000000;"> ＞<span style="font-size:xx-small;"> ＞を入れてはいけないのでしょうか？ スタイルシートを直接書きなさいと・・・書かれている。 <body・・・は、HTML直下にしか書けない。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから <!ENTITY % html.content "HEAD, BODY"> ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.3 )］より また、携帯用、スクリーン端末(パソコンのディスプレイなど)、点字端末、読み上げソフト、検索エンジン、テレビ画面であろうと、HTML本体は特別なものではありません。 HTMLは、過去の登場したたくさんの携帯電話、今後当時要するであろうフルブラウザ携帯端末、過去のブラウザ、新しいブラウザに対応しているものです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より ですから、基本的にはシンプルなHTML(XHTMLはHTMLをXMLに合わせて書きなおしたものなので当然含みます。)で最低限の記述をする ・・・これで旧式の携帯電話や過去のブラウザに対処 そして、head内のスタイルシートで記述。このとき、基本的なものを書いて、mediaを読みこめる端末に対しては指定し、外部スタイルシートを読める新しい携帯は@mediaで上書きさせる。 HTMLの属性でのデザイン指定は詳細度0ですから、スタイルシートの指定をキチンとすれば（要素で指定すると×詳細度1,クラスなら×10・・・）きちんと上書きされるはず。 14 スタイルシート ( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/styles.html ) REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#toc )
関連するQ&A
- （携帯XHTMLで書いた）フォントのサイズが小さくならない
携帯でホームページを作っています。 スタイルシート（i-CSS）を使って文字のサイズを小さくしたいのですが、 思い通りのサイズになりません。 （font-size:xx-small;）で指定しても（font-size:small;）で指定してもサイズが変わらない。 問題のソースです。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN" "i-xhtml_4ja_10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" dir="ltr"> <head> <meta content="text/html; charset=shift_jis" http-equiv="content-type" /> <style type="text/css"> <!--[CDATA[ a:link{color:#3c5fcc;} a:hover{color:#996600;background-color:#FFF4E0;text-decoration:none;} a:visited{color:#990099;} ]]--> </style> <title>トップページ</title> </head> <body> <div style="text-align:center;"> <span style="font-size:xx-small;">タグテスト</span> </div><br /> <span style="font-size:xx-small;"> <a href="tabletest.html">1.テーブル</a> </span> </body> </html> 原因がわからないので、いろいろとサイトを調べてみて試したのですが、原因がつかめず途方に暮れています。 どなたかわかる方いましたら、ご教授お願いします。 あと参考になるサイトなどがありましたら教えてください。
- 締切済み
- XML
- 携帯サイトでソフトバンクだけ接続されない
携帯サイトを作っています。各キャリアのエミュレーター、firefoxのアドオン「FireMobieSimulator」では問題なく表示されるのですが、ソフトバンクの実機ではなぜか接続されません。機種によっては「お客様の端末からは接続できません」というようなエラーメッセージが出ます。 最初は、絵文字変換スプリクトのせいかと思い、それを削除した状態でアップロードしてもつながりません。 ソースは下記のようになっています。 何か問題がありましたら、教えていただければと思います。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml ; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="pragma" content"no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="-1" /> <meta name='robots' content="all"> <meta name='description' content=""> <meta name="keywords" content=""> <style type="text/css"> <!-- a, a:link {color:#000099;} a:visited {color:#000099;} a:active {color:#ffffff;} a:hover {color:#663399;} --> </style> <title>test</title> </head> <body> </body> </html>
- ベストアンサー
- HTML
- docomoだとCDATAなどが表示される！
携帯向けにCSSを使っており、 リンクテキストの色をつけようとしております。 以下のサイトを参考にしているのですが、 http://plaza.rakuten.co.jp/yamamoto2/diary/200705130000/ auやSOFTBANKではリンクのテキスト色のCSSが効いているのですが、 docomoではリンクテキストの色が効きません。 <?xml version="1.0" encoding="shift_JIS"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta name="copyright" content="(C) Honda Motor Co.,Ltd."> <style type="text/css"><!-- <![CDATA[ a:link{color: #4C5872;} a:visited{color: #4C5872;} a:focus{color: #4C5872;} ]] --></style> 上記の a:link{color: #4C5872;} a:visited{color: #4C5872;} a:focus{color: #4C5872;} がdocomoで表示されます。 docomoでリンクの色が変わらないのは目をつぶるとして、 コメント部分が表示されないようにしたいのですが。 どうすればよいのでしょうか？
- ベストアンサー
- HTML
- xhtmlで携帯サイトを作成するとsoftbankで文字化け
こんばんは。 夜分遅くに質問させていただきます。 最近、xhtmlで携帯サイトを作成しているのですが どうも、softbankから閲覧すると文字がすべて?????????????となって 表示されるようなのです。 これはxhtmlの表記が間違っているために起こっている問題なのでしょうか？ それとも、文字コードの問題なのでしょうか？（shift-jis）で固定しています。 また、phpで作成しているため、そのような問題が起きたのか、とも思います。 以下に上部のソースを記述いたしますので、どなたか、何処に問題があるのか教えていただけないでしょうか？ よろしくお願いします。 <? echo"<?xml version=\"1.0\" encoding=\"shift-jis\" ?>"?> <? if($env=="E"){ echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML Basic 1.0//EN\" \"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd\">"; }elseif($env=="i"){ echo "<!DOCTYPE html PUBLIC \"-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.2) 1.0//EN\" \"i-xhtml_4ja_10.dtd\">"; }elseif($env=="S"){ echo "<!DOCTYPE html PUBLIC\"-//WAPFORUM//DTD WML 2.0//EN\" \"http://www.wapforum.org/wml20.dtd\">"; }?> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta name="ibm:devicetype" content="i-mode6_foma"> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="cache-control" content="no-cache"> <?php if($env=="i"){ echo"<style type=\"text/css\">"; echo"a:visited{color:#0000ff;}"; echo"</style>"; }else{ echo"<style type=\"text/css\">"; echo"#font{font-size:12px; color:red;}"; echo"#ffffont{color:brown;}"; echo"#back{background-color:#b0c4de;}"; echo"</style>"; } ?> <title>まつ毛</title> </head> <body link="#0000ff" vlink="#0000ff"> <br /> <br /> <div style="text-align: center;"> <img src="<?=$titleg?>"> <br /> </div> <br /> <br /> <?php if($env=="i"){echo "<hr style=\"border-style:solid; border-color:#000000;\"/>";} else{echo"<hr color=\"#000000\"; />";} ?> <div style="text-align: center;"> <div style="background-color:#000000; color:black;"> まゆげまつげ </div> </div> <?php if($env=="i"){echo "<hr style=\"border-style:solid; border-color:#b0c4de;\"/>";} else{echo"<hr color=\"#b0c4de\"; />";} ?> <br /> <br /> <hr style="border-style:solid; border-color:#000000;"/> <div style="background-color:#808df0f; color:000000;"> yahoo japan! </div>
- ベストアンサー
- HTML
- 携帯サイトの作り方 XHTMLについて教えてください。
3キャリア共通の携帯サイトを作成したいと思っています。 見よう見まねで、XHTMLのサイトを作成しましたが、 ドコモから配布されているシュミレーターでは、 問題なく表示されているのですが、実機で試すと うまく表示されません。 auの端末は、問題なく表示されます。 PC上でも、問題なく表示されます。 SBは端末がないので、まだ未確認なのですが。。。 共通では、表示が不可能なのでしょうか？ 全キャリア共通で表示する方法を、 タグで教えて頂けると助かります！ ちなみに、下記が、現在使用しているものですが、 これが間違っているものなのか、ご存じの方がいれば 何卒、ご教授願います。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Cache-Control" content="no-cache" /> <!--<meta name="vnd.up.markable" wml:forua="true" content="false" />-->
- ベストアンサー
- その他（スマートフォン・携帯・タブレット）
- CSSのアドバイスをお願いいたします。
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta name="robots" content="noindex,nofollow,noarchive" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> .r { color : #407133; } .k { color : #336070; } .t { color : #454580; } .s { color : olive; } p { color : #222222; } body { background-color:#e0ffe0; } a:link { color : #0000ff; } a:visited { color : #003333; } a:hover { color : #660000; } a:active { color:#660066; </style> <meta http-equiv="Content-Script-Type" content="text/javascript" />の１行を加えてみました。 この場合の記述の是非。 また記述すべき個所は合っているのでしょうか。
- ベストアンサー
- HTML
- CSSのチェックをお願いします。
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta name="robots" content="noindex,nofollow,noarchive" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> .r { color : #407133;} .t { color : #454580;} p { color : #222222;} body { background-color:#e0ffe0;} a:link { color : #0000ff;} a:visited { color : #003333;} a:hover { color : #660000;} a:active { color:#660066;} １．改行に何か意味はあるのでしょうか？ ２．記述の順番や付け足し、削除すべき項目がありましたら、お願いいたします。
- ベストアンサー
- HTML
- 携帯サイトでのcssトラブル
携帯サイトを作っています。 xhtmlの宣言を↓の通りにしております。 <?xml version="1.0" encoding="Shift_JIS" ?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> リンクなどは、cssを使ってサイトを作っており、3キャリアのエミュレーターでは問題なく表示されています。 しかし、本の通りに作っているのですが、自分の携帯（docomo SH-03A)ではまったくcssが機能しません。 以下に、主に使っているタグなどについて書いていきます。何かおかしいところがあれば教えてください。 内部参照リンク <style type="text/css"> <!-- a, a:link {color:#ff0000;} a:visited {color:#ff0000;} a:active {color:#ffffff;} a:hover {color:#663399;} --> </style> ボディスタイル <body style="background-color:#ccccff;color:#000000;"> <div>タグ <div style="text-aling:center;background-color:#000099;font-size:medium; color:#ffffff;" align="center">○○○○</div> ↑でだめだったので、↓のように<span>にはさんでみたがだめでした。 <div align="center"><span style="text-aling:center;background-color:#000099;font-size:medium; color:#ffffff;">○○○○</span></div> 非常に困っています。なにとぞよろしくお願いします。
- ベストアンサー
- HTML
- xhtml,css cssの取り込み
xhtml,cssの解説書を購入し、二段にインポートする方法で「css」の取り込みをしたのですが、初心者ゆえどうもうまくいきません。下記にそのコードを載せますので、間違いをご指摘ください。 『index.html』 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <html xmlns="http://WWW.W3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>test</title> <link rel="stylesheet" type="text/css" href="a.css" media="all" /> <body> <h1>秋</h1> <p> test test test </p> </body> </html> 『a.css』 @charset "Shift_JIS; @import"b.css"; 『b.css』 @charset "Shift_JIS"; h1{ text-align: center; font-size: x-large; font-family: "MS P明朝",serif; }
- 締切済み
- その他([技術者向] コンピューター)
- i-modeサイトのタグについて（xhtml）
今週からi-modeサイト作成の勉強をはじめ、 下記のサイト作成をしています。 http://www.ismn.sega.co.jp/i/m/?uid=NULLGWDOCOMO だいたいそのまま作成することが出来たのですが、 リンクの下線を１つ１つ別の色にするやり方が分かりません。 例えば、 <a href=""><span style="color:#ff0078;font-size:small">歌詞</span></a> のように、フォントの色がff0078だった場合 リンクの下線の色もff0078に <a href=""><span style="color:#ff0078;font-size:small">カラオケ</span></a> のように、フォントの色が14A0BE場合 リンクの下線の色も14A0BEにしたいといった具合です。 このように全体のリンクの下線の色を 設定するやりかたしかわかりません。 <style type="text/css"> <![CDATA[ a:link{color:#0000ff} a:visited{color:#0000ff} ]]> </style> ちなみに、CSSは分かりません・・・ 丸暗記で、上記のようにすれば、下線の色が設定できる のを知っている程度です。 普通のxhtmlではなくi-mode対応のタグを教えていただければと思います。 分かる方がいましたらよろしくお願いします。
- 締切済み
- その他（プログラミング・開発）
