- ベストアンサー
CSS／日本語のID・クラス名について
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
#5の続き。 ■XHTML1.0仕様 ▼class属性値 BaseCharで定義されている文字を使用できます。 ----- (「邦訳：Modularization of XHTML」より) 5.1. 属性集合 (Attribute Collections) 集合名 : 集合に含まれる属性 Core : class (NMTOKENS), id (ID), title (CDATA) http://msugai.fc2web.com/web/W3C/XHTMLMOD/abstract_modules.html#s_core_collection ----- ↓ XML1.0仕様書へ ↓ ----- (「XML 1.0」より) 3.3.1 属性型 ... | 'NMTOKENS' [ VC: 名前トークン ] ... 妥当性制約: 名前トークン NMTOKEN 型の値は Nmtoken 生成規則に合しなければならず、NMTOKENS 型の値は Nmtokens に合致しなければならない。 http://www.doraneko.org/xml/xml10/19980210/Overview.html#sec-attribute-types ----- ↓ ----- [8] Nmtokens ::= Nmtoken (S Nmtoken)* http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Nmtokens ----- ↓ ----- [7] Nmtoken ::= (NameChar)+ http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Nmtoken ----- ↓ ----- [4] NameChar ::= Letter | Digit | '.' | '-' | '_' | ':' | CombiningChar | Extender http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-NameChar ----- ↓ ----- [84] Letter ::= BaseChar | Ideographic http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Letter ↓ ----- [85] BaseChar ::= [#x0041-#x005A] | [#x0061-#x007A] | [#x00C0-#x00D6] | [#x00D8-#x00F6] | [#x00F8-#x00FF] | [#x0100-#x0131] | ...(中略)... [#x3105-#x312C] | [#xAC00-#xD7A3] http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-BaseChar -----
その他の回答 (5)
- think49
- ベストアンサー率59% (285/482)
#4の続き。 ■XHTML1.0仕様 ▼id属性値 BaseCharで定義されている文字を使用できます。 ----- (「XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語」より) C.8 フラグメント識別子 ... さらに、ID 型の属性の合法的な値のセットは、CDATA 型のものよりも遙かに小さいから、name 属性の型は NMTOKEN に変更されている。 この属性は、ID 型か、XML 1.0 第2節第5項の生成規則5にある Name 生成規則かと同じ値しかとれないよう制約されている。 残念ながら、この制約は XHTML 1.0 DTD の中に表記することができない。 この変更のせいで、既存のHTML文書を変換するときには注意を払わなければならない。 これらの属性の値は、文書内部で一意的であり、妥当でなければならず、もしも変換の間に値が変更される場合には、これらのフラグメント識別子(内部てきなものも外部的なものも)への参照はどれも更新されなければならない。 http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html#guidelines ----- ↓ XML1.0仕様書へ ↓ ----- (「XML 1.0」より) 妥当性制約: ID ID 型の値は Name 生成規則に合致しなければならない。 1つの名前がXML文書内に2回以上この型の値として現れてはならない。 すなわち、ID値は、それをもつ要素を一意的に識別しなければならないのである。 http://www.doraneko.org/xml/xml10/19980210/Overview.html#id ----- ↓ ----- [5] Name ::= (Letter | '_' | ':') (NameChar)* http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Name ----- ↓ ----- [84] Letter ::= BaseChar | Ideographic http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Letter ----- ↓ ----- [85] BaseChar ::= [#x0041-#x005A] | [#x0061-#x007A] | [#x00C0-#x00D6] | [#x00D8-#x00F6] | [#x00F8-#x00FF] | [#x0100-#x0131] | ...(中略)... [#x3105-#x312C] | [#xAC00-#xD7A3] http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-BaseChar -----
- think49
- ベストアンサー率59% (285/482)
#3です。 > 「W3C」＝「CSS2」と思っていたのですが、「W3C」と「CSS2」って別物なのでしょうか？ W3Cは「WWWで利用される技術の標準化をすすめる団体」であり、CSS2策定にも関与していますが、「W3C = CSS2」ではないですね…。 W3Cはただの団体でCSS2仕様は別にあります。HTML4.01やXHTML1.0も別に定義されています。 W3Cとは 【WWW Consortium】 (World Wide Web Consortium) - 意味/解説/説明/定義 ： IT用語辞典 http://e-words.jp/w/W3C.html ■HTML4.01仕様 id属性値は日本語を扱えず、class属性値は日本語を扱えます。 id属性値は "&;" を許可していないので、実体参照、数値参照も使えません。 ----- id属性値 (「HTML 4.01 Specification」より) IDトークンとNAMEトークンは、アルファベット([A-Za-z])で開始し、任意の数のアルファベット、数字、([0-9])、ハイフン(-)、アンダースコア(_)、コロン、(:)、ピリオド(.)のみで記述する必要がある。 http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/types.html#type-name ----- ----- class属性値 (「HTML 4.01 Specification」より) CDATAは、文書文字集合中の任意の文字の列であり、文字実体をも含む。ユーザエージェントは、この属性値を次のように解釈する必要がある。 * 文字実体は文字で置き換える。 * 改行文字LFは無視する。 * 個々の改行文字CRあるいはタブ文字は、1つの空白文字で置き換える。 http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/types.html#type-cdata ----- (収まりきらないので、次の記事に続きを書きます)
- think49
- ベストアンサー率59% (285/482)
CSS2に限定するならば、エスケープすれば日本語も扱えます。 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#value-def-identifier <style type="text/css"> /* テストですよ */ #\30C6\30B9\30C8\3067\3059\3088{ color: red; } /* テストしてみましょう */ .\30C6\30B9\30C8\3057\3066\307F\307E\3057\3087\3046{ color: green; } </style> </head> <body> <p id="テストですよ">テストですよ</p> <p class="テストしてみましょう">テストしてみましょう</p> ただ、「HTML4.01 や XHTML1.0 でid属性値、class属性値に日本語を使えるか」っていうのは別の話なので、それもクリアする必要があるでしょうね。 仕様書を確認しましょう。 HTML 4.01 Specification (ja) http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/cover.html XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語 http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html 掲示板/スタイルシート質問板/２行をまとめたセル内の上に文字を配置したい - TAG index Webサイト http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=1298
補足
>CSS2に限定するならば、エスケープすれば日本語も扱えます。 検証ありがとうございます！ >ただ、「HTML4.01 や XHTML1.0 でid属性値、class属性値に日本語を使えるか」っていうのは別の話なので、それもクリアする必要があるでしょうね。 「W3C」＝「CSS2」と思っていたのですが、「W3C」と「CSS2」って別物なのでしょうか？ ▼W3CがCSS2のワーキング・ドラフトを公開 http://internet.watch.impress.co.jp/www/article/971105/css.htm HTML 4.01 Specification (ja) ▼http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/struct/global.html#h-7.5.2 確認してみたのですが、日本語表記不可との記述は見当たらないのですが… XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語 ▼http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html こちらについても、日本語表記不可との記述は見当たらないのですが… ▼掲示板/スタイルシート質問板/２行をまとめたセル内の上に文字を配置したい - TAG index Webサイト XHTML のみ ID に日本語文字使用可ということでしょうか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞ネットを検索したところ、 まず、仕様書を確認すること。正しい物を知りたければね。 ★まず、そのHTMLが何で書かれているかによって答えは違います。★ IDは、 HTML4.01より前は アルファベットから始まる 英数字と-.からなる。 HTML4.01以降は _と:が使えるようになった。 XHTMLは、 ・英字または_ から始まり ・英数字と-と.と_で記述 :は使えない ・重要 xmlから始めてはならない class名については調べていませんが、特に制限はなかったと記憶していますが、使わないほうがよいと思っています。
補足
＞まず、仕様書を確認すること。正しい物を知りたければね。 どの仕様書を読めばよいのでしょうか？ ▼W3C - W3Cの仕様書等の文書の日本語訳集 http://www.w3.org/Consortium/Translation/Japanese ＞★まず、そのHTMLが何で書かれているかによって答えは違います。★ 「Strict」か「Transitional」等によって、異なるということでしょうか？ IDは、 ＞HTML4.01より前は ＞ アルファベットから始まる ＞ 英数字と-.からなる。 ＞HTML4.01以降は ＞ _と:が使えるようになった。 ＞XHTMLは、 ＞・英字または_ から始まり ＞・英数字と-と.と_で記述 :は使えない ＞・重要 xmlから始めてはならない つまり、日本語表記は、ダメということでしょうか？ ＞class名については調べていませんが、特に制限はなかったと記憶していますが、使わないほうがよいと思っています。 何となく使わないほうがよいとは私も思っているのですが、 諸事情により、使えるかどうか知りたく、質問してみました…。
- stpopo
- ベストアンサー率52% (13/25)
こんにちわ 「CSS Validation Service」で検証してみたらわかることですが、 ID,classとも、エラーがでましたので、準拠されていないんじゃないでしょうか。。 ブラウザでも検証しましたが、下記のとおりOperaしかちゃんと認識されませんでした。 （テストはローカルのみ） -------------------------------- IE7 × Chrome4 × Firefox3.6 × Opera9.6 ○ -------------------------------- ●CSS Validation Service W3Cによって運営されており、 CSSをチェックするのに使うことができます。 このツールは、 CSS 仕様と比較するだけでなく、エラーや、CSS の誤用等を発見したり、自分の書いたCSS が使い勝手を悪くするような場合に教えてくれたりします。
補足
>「CSS Validation Service」で検証してみたらわかることですが、 >ID,classとも、エラーがでましたので、準拠されていないんじゃないでしょうか。 情報ありがとうございます。 早速、作成したURLで試してみたのですが、クラス名に日本語をつけると、ご指摘の通り、エラーがでますね……。ちょっとショックです……。 ＞ブラウザでも検証しましたが、下記のとおりOperaしかちゃんと認識されませんでした。 検証ありがとうございました。 ＞●CSS Validation Service ＞W3Cによって運営されており、 CSSをチェックするのに使うことができます。 ＞このツールは、 CSS 仕様と比較するだけでなく、エラーや、CSS の誤用等を発見したり、 ＞自分の書いたCSS が使い勝手を悪くするような場合に教えてくれたりします。 このツール知らなかったため、大変参考になりました。 ありがとうございました。
関連するQ&A
- CSSのクラス名・ID名の指定でワイルドカードか正規表現を使いたい
CSSでクラス名やID名を指定する場合に、 ワイルドカードか正規表現を使いたいと思ったのですが、うまくできません。 使えないのでしょうか？ また、他に、似たクラス名・ID名を一括で指定する方法はありますか？ 例） <div id="cat1">猫が１匹</div> <div id="cat2">猫が２匹</div> <div id="cat3">猫が３匹</div> #cat1, #cat2, #cat3{color:#FF00FF;} を #cat*{color:#FF00FF;} のようにまとめて指定したい。
- ベストアンサー
- HTML
- クラスとIDの違いは？
CSSでクラスとIDがあると思いますが、違いがさっぱり分かりません。 あるタグA内のタグBに対するIDなどと利用出来るのはわかりますが、 それは全てクラスでも出来ますし、明確な違いが未だ分かりません。 利用する際、何を判断基準にすれば良いのでしょうか？
- ベストアンサー
- HTML
- 日本語でＣＳＳなどを書くソフトが無いのはなぜ？
前提として、自動的にソースを書いてくれるソフトは最初は使わない ということです。 アドビのソフトを譲り受けましたが、使わずに一通りの作業が判って から使う予定ですので・・・。 －－－－－ ホームページを作る過程で・・・。 ジャンル毎に、同じ書式のページがたくさん存在するので、 後々のことを考えて、１つのスタイルシートを複数のページに適用 するために、スタイルシートを書かざるをえなくなりました。 まず、下記の３個の例をごらんください。 －－－－－ 【実際の例】 ●英語（英語ベースのコマンド）で書かないと動きません。 div.nav { background-color: #ccffcc; border-bottom: solid 1px #55cc55; padding: 0.1em; } －－－－－ 【日本語の例】 ●日本語化css（日本語にしてみました） 適用領域設定.誘導 { 背景-色: #ccffcc; 罫線-下: 実線 1コマ #55CC55; 枠内余白 :0.1文字; と、日本語で書いてもcssは、動きません。←（動いて欲しいです） －－－－－ 【１６進数の例】 ●内部が全部１６進数で動いていると仮定した場合 （本当は、違いますがあくまでも例です） 0035.ff98 { 3d7a-7b9a: #ccffcc; 1f3d-57af: 1ab #55cc55 df03: 0.1ff; } －－－－－－－－－－－－－－－ 【手間は変わらない】 ●英語を母国語とする者にとってCSSは”ほぼ”日常の言葉】 英語が母国語の者には、cssの予備知識が無くても・・・ 【日本語の例】のように、解釈の相違はありますが、記述している 内容と意味が分かりますが・・・ 英語が”文盲状態”の者にとっては・・・ 【１６進数の例】のように、”すべて１６進数”で書かれているの と何ら変わりません。 ビー、オー、アール、ディー・・・と、 １文字ずつ間違いが無いように見本と見比べながら、入力します。 ★＜質問の趣旨に関連＞ 私が”ファイル”などのカタカナ語以外の英語を殆ど理解しない ”英語の文盲”状態の者ですので、 ＭＳ－ＤＯＳの ＰＣ－９８００に、１６進数の命令を入力する 感覚です。 CSSが１６進数のほうが、全世界の者が平等だと思うくらいです。 －－－－－ 【英語以外のcss？を見ました】 海外サイトの静止画が右クリックで保存出来ないときに、画像の ソース→css を開いたとき、 ロシア語やアラビア？タイ？語、ハングルなどで記述されたCSS？ プログラム？らしきものを見ました。 ブラウザではアラビアやタイ語の命令を理解するのかな？（不明） －－－－－ 【作業効率の著しい低下】 背景-色: #ccffcc; なら、#の後の１６進数だけ見比べながら、 背景-色: # と、母国語なので日本語入力ですぐに入力できます。 一方・・・。 background-color の場合、 ビー、エー、シー、ケー、ジー、オー・・・・ と、１文字ずつ、間違いの無いように入力することになります。 英語が母国語の者は、日本語の背景-色 のようにスムーズに、 １字、１字、確認しなくても入力できます。 ”ほぼ”母国語で書かれたCSSを入力するのと・・・・ １６進数（英語の文盲には１６進数と同じ）で書かれたCSSを,１字 ずつ確認しながら入力する・・・ のでは、作業効率に大きな差が生じます。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 【質問の趣旨・内容】→ → 日本語で記述できるCSS、JAVAスクリプト用の変換ソフトが無い のはなぜ？ －－－－－ 内部処理としては、 ●英語の命令文→内部処理（機械語）→実行（ブラウザに表示）。 だと思うので・・・。 ●日本語の命令文→変換→英語の命令文→機械語→実行 でも良いと思います。 背景-色: #ccffcc; → background-color: #ccffcc; このように、変換出来る、環境が欲しくて、何日も「日本語で記述できる CSSソフト」をネットで探し回りましたが、無いです。 背景色を変えたい時、 背景-色: #XXXXXX;なら、容易に覚えられます。 background-color は”無理！！！”です。 ”無理！！！”と言い切ったのは、２０歳代の頃から、旧漢字の書面を 読んだり旧字体を書く必要があり、【体＝體／来＝來／径＝徑など】の たくさんの旧漢字を正確に書けるようになるまで、２，３年かかり、 大変苦しみました。 ※ 頭の中に、旧字体と現行字体の漢字辞書が２つ入っている状態を 作るのは”ある程度範囲を限定された字数でも”大変です。 英単語の利用価値はゼロですので、英語で、同じ苦しみは２度としたくあ りません。 CSSは、英語至上主義の鬼畜？な仕様で、「鬼畜米英」という戦前の日本 の為政者が作った言葉を思い起こされました。 母国語でCSSが書ける・実行出来るようになっていないようですね。 無駄な、”ほぼ英語学習”になってしまう英語版のCSSではなく、 漢字記述の母国語（旧漢字も希望＞無理かな？）→ ほぼ英単語のCSS に変換するソフトを切実に希望します。 英語が基本のプログラムでも、母国語側の使用文字などを決めれば、変 換するのは容易なはずです。 （JAVAも母国語で記述できたら良いのに・・・・） 【英語以外のcss？を見ました】で書いたように、多言語で動くなら、 漢字版の開発環境があれば良いのに・・・。 ＞中国やロシアなどは無断で？改造して作っていると思います（予想ですが） 内部で変換処理するだけなのに・・・なぜ無いの？と思って質問しまし た。 長文をお読み頂きありがとうございました。 （切実に日本語版が欲しいです）
- ベストアンサー
- CSS
- CSSのid名class名の重複回避方法について
今、複数ページがあるサイトを作ろうとしているのですが、 他の人が作成をする場合もあるので、 ヘッダ・フッタなど、共通部分に使っているcssの設定（idやclass名）と、 個々のページで設定するcssの設定が重複しないようにしたいと思っています。 もし、共通cssと個別cssに同じ#fontというid名が存在してしまったとして、 個別のページのcssファイルに↓の用に記述し #page01 #font{ color:#FFFFFF; } html内の、<div id="page01">～</div> の中に含まれるid="font"と定義した場合 共通のidに#font が存在していても大丈夫なのでしょうか？ また、大丈夫な場合、idやclassを作るたびに #page01 #font #page01 .photo と#page01を頭に全部つけると分かりづらくなるな。。と思うのですが、 それを回避する方法はありますでしょうか？ ほか、重複しないアイデアをご存知の方がいらっしゃいましたら ご教示いただければ幸いです。 どうぞよろしくお願いいたします！
- ベストアンサー
- CSS
- CSSでクラス名を指定してもうまくいかない
下記URLのサイトを参考にして「Google+1ボタン」を設置しようとしています。 https://developers.google.com/+/web/+1button/?hl=ja とりあえずサイト上には設置できたのですが、今度はこの「Google+1ボタン」を自分が設置したい場所に貼り付けるために、CSSで指定しようと思いました。 ちなみに、取得したコードは以下のようになっています。 <!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 --> <div class="g-plusone" data-size="medium"></div> <!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 --> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> コードは上記のようになっています。 class="g-plusone" となっていますので、このままこれをクラス名としてCSSに記述しても適用されません。 そこで、これにさらに<div>タグで囲んで、この<div>にクラスを付ければできると思い <div class=”sample”><div class="g-plusone" data-size="medium"></div></div> として、sampleに対してスタイルを指定してみたところ、うまくできました。 しかし、できればこのようなことはせず、"g-plusone"というクラス名が最初から付いているわけですから、これを利用できないかと考えています。 もし、できるのであれば、そのやり方を教えてください。
- ベストアンサー
- CSS
- CSSファイルが見当らないclass名があり、しかもCSSが効いています。どこにあるんでしょうか？
tableのtdやthの背景にうまく画像が入っていてうまいつくりがあったので、方法を調べようとしてソースを見て、CSSファイルを調べるのですが、該当のclass名が検索しても存在しないのです。こんなこと初めてです。 なのにちゃんとCSSは効いています。HTMLソースには記述という記述がないので、どう考えても外部スタイルシートとしか思えないのですが・・・ JavaScriptで操作しているのか？と思ってそのあたりも見はしたのですがわかりませんでした。 以下のURLです。 ※ちなみに「比べてください！圧倒的なコストパフォーマンス」というところの表のように、背景画像や2ピクセルでの区切り線、tdやthによって背景画像や色を変更している手法などを知りたいものです。 http://www.rensaba.com/campaign/ocssl/ とりあえず、tableタグにある「class="comparison"」が見当たらないのです。 このソースにかかれてあるCSSファイルは複数ありますが、全て検索かけてみたのですがひとつも出てきませんでした・・・・ この表の作り方だけでなく、いったいどうやって効かせているのかも知りたいです。 宜しくお願い致します。
- ベストアンサー
- HTML
- cssで定義したクラス情報をcssセレクタ内で使用
cssで文字装飾用の以下のクラスを作成しました。 .label { font-size:95%; color:blue; } これを <div id="view"> <span>ラベル1</span><span>ラベル2</span>～(以降大量に続く) </div> というhtmlに適用したいのですが、spanタグ全てに.labelを指定するのは見辛さからいっても 避けたいと思います。 出来れば #view span { .label } というようにcssで対象を選択して既存のクラス定義を適用したいのですが、こういう感じで 一気に適用する記述方法はありませんでしょうか。
- ベストアンサー
- HTML
- Accessの日本語フィールド名
Access2003を使い、いろいろなmdbを作成しています。 私はテーブルを作成するときに、フィールド名に日本語を使っています。例えば、「社員コード」とか「住所」とか。 しかし、最近聞いた話ではフィールド名に日本語を使うことはよくないとのことです。 フィールド名が日本語だとどんな不具合が発生するのか、教えていただけないでしょうか、宜しくお願いします。
- ベストアンサー
- その他(データベース)
- phpで使用不可のクラス名
調べてみたのですが、情報が見当たらなかったため、質問させていただきます。 php5.3でevalというクラス名を付けて実行しようとしたのですが、エラーが発生しました。 phpではクラス名にも予約語などの使用不可なものがあるのでしょうか？ 宜しくお願い致します。
- ベストアンサー
- PHP
- CSSの記述でのクラスの定義で
CSSの記述の中で .yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } とクラス名が付いています p.yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } こっちはタグ名に応じたクラスを定義していますが タグ名に応じたクラスを使用するメリットはなんなのでしょうか？ 全てはじめに書いたクラスをしようしても問題はないように思うのですが、、まだ勉強始めたばっかりで疑問に思い質問させていただきました。 よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
>W3Cはただの団体でCSS2仕様は別にあります。HTML4.01やXHTML1.0も別に定義されています。 解説ありがとうございました。何となく、一緒に定義されているものだと、勝手に勘違いしていました。 >仕様書を確認しましょう。 すいません、確認したつもりなのでしが、見方がかなり甘かったようです。ネットで随分探したのですが、この件に関する情報を探し出すことができず、また、仕様書に記載している内容も解釈がなかなか難しく、苦労していたので、大変助かりました。これを機会に、これからはなるべく仕様書を熟読するよう、気をつけたいと思います。 本当にありがとうございました！ おかげで知りたい情報を得ることができました。