Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

トップ > Web標準

(X)HTMLにおいて属性値をダブルクオテーションでくくる習慣はどこから来たの？

Web標準

なぜだか分かりませんが、WordPressのいくつかのテンプレートタグでは、属性値をシングルクオテーション（単引用符）でくくって出力します。例えば、こんな感じ。

<link rel='index' title='NPtech.jp' href='http://www.nptech.jp' />

「これ、なんかキモイ！」と思っていたのですが、仕様では特に問題ありません。

デフォルトでは、SGML規定はすべての属性値を二重引用符(ASCII十進34)または単引用符(ASCII十進39)のどちらかを用いて 囲うよう求めている。

http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/intro/sgmltut.html#h-3.2.2

ふむ、しかし、ぼく自身が単引用符でくくることはほとんどないし、ほかの人たちのコードを覗いてみても単引用符を使っているのを見た記憶もありません。なぜ、単引用符も二重引用符も大丈夫なのに、二重引用符を使うことが習慣化しているんでしょう。

そこで、Twitterで質問してみました。

素朴な疑問なんだけど、HTMLの属性は単引用符でも二重引用符のどちらでもOKなんだろうけど、なんで二重引用符を使うことが一方的に多いんだろう。

http://twitter.com/aratakojima/status/6113509734

みなさんの回答

lilyfanjp
@aratakojima SQL インジェクション防止のためでしょう。XSS 防止のためにはシングル／ダブルあまり関係ないですが、SQL インジェクションはシングルクォートが原因になるため、それとは違う文字の方が安全です。

http://twitter.com/lilyfanjp/status/6113552746

cnkt
@aratakojima 単引用符は解釈できないUAがあった気が（これからおふろなのでぐぐってないけど

http://twitter.com/cnkt/status/6113571214

lilyfanjp
@aratakojima あと、HTML の初期はダブルクォートしかだめだったような記憶が (あやふやなので確認が必要)

http://twitter.com/lilyfanjp/status/6113571738

hira
@aratakojima ダブルの方が安定度が高いっぽいって書いて有ったりしました。

http://twitter.com/hira/status/6113679656

motchie
@aratakojima @cnkt もしかしてやけど、SGMLが二重引用符だけなんちゃう？ http://www.utj.co.jp/xml/beg/sgml/sgml2_4.html

http://twitter.com/motchie/status/6113835351

うーん、全部ありそうで、確定的なことは言えないような気も。

そのあとしばらくしてから、こんなRTをいただきました。

_masaka
ひとつには、単引用符はアポストロフとして属性値に含まれる可能性があるからかな。米国では一般に二重引用符が好まれるという話も。c14n XMLでも二重引用符が正規形です。RT @aratakojima:HTMLの属性は...なんで二重引用符を使うことが一方的に多いんだろう。

http://twitter.com/_masaka/status/6115182687

まさかの神崎先生、降臨！！！こんな頭の悪い発言[謎]をしているぼくに回答をいただけるとは！ただ、

単引用符はアポストロフとして属性値に含まれる可能性があるからかな。

え、そんなことできるの！というのが個人的にはビックリなんですが。ちなみに、どなたかソース分かりません？

ほかにも「こんな流れがあるんじゃないの？」とか、上記で回答していただいた皆さんへの補足などなど、ぜひ教えていただきたいと思います。それとTwitterで回答していただいた皆様、本当にありがとうございます。

追記（2009年12月1日15時31分）

神崎先生からの追記のTweetを発見しました。

_masaka
「単引用符はアポストロフとして属性値に含まれる」とは、ASCII 39で所有のsや省略を示すフレーズ（例：W3C's logo）が属性値になる場合です（ただし推奨はU+2019）。ならば囲みは二重引用符が好都合という考えもあるのかなと。http://bit.ly/5iFl50

http://twitter.com/_masaka/status/6201641791

ありがとうございます！

HTML5を書き直した。

Web標準

先日公開したわかりやすい技術文章の書き方にid:vantguarde先生から、

HTML5といってるけどなんか違うなあ。sectioning contentの使い方に問題が多い。

http://b.hatena.ne.jp/vantguarde/20090817#bookmark-15373666

と赤点をいただいたので、再試ということで書き直しました。リライトしたページはすでに公開中。

違和感を感じるところ

あくまでも自分の感覚としてですが、なんとなく「このへんはもう少しまともな書き方ないのかな、でもわからん」というところを何点か。

<header role="banner" id="banner">
...
<aside id="abstract">
<p>このページは、プログラムやコードなどの主に技術文書を書く方々のために、
分かりやすい文章を書くためにはどうすればよいのかについて説明しています。</p>
<ol>
<li>自分が伝えたいこと・訴えたいことを誤解しないように相手に読んでもらうにはどうするべきか。</li>
<li>文章を書くにあたって知っておくべきルールは何か。</li>
<li>文章を書く前にどのような手順を踏めば、分かりやすい文章を作れるか。</li>
</ol>
<p>などについて参考にしていただければ幸いです。</p>
</aside>
...
</header>

headerにasideが入ってるとか…。

<div role="main" id="main">
<article>
<section>
<header>
<h2 id="before_write">文章を書く前に</h2>
<p>文章を書く前に次のことをしっかりとイメージしておく。</p>
</header>
<ul>
...
<li>読み手が真っ先に知りたいことは何か。</li>
</ul>
</section>
...
</article>
</div>

article、sectionと来て、さらにheaderとか…。

この2ヶ所はどうすりゃよいのかイマイチ分かりませんでした。

CSSのこと

フレームっぽい（違）、ウィンドウサイズが小さいと横スクロールが出るなどのご意見をいただいたので、修正。

フレームっぽいのは僕自身の使いやすさを優先してなので、我慢してください[謎]。ウィンドウの問題に関しては、レイアウトの横幅をem指定ではなく、%指定に直しました。

ちなみにリデザイン中

あまり変わっていませんが、

  • なんとなく
  • 記事ごとにカテゴリをつけるようにした[今更]

という理由によります。

フッターというかサイドバーはこれからです。

ブクマコメントに対する返信

div#menu, div#main は必要なのだろうか。/ h2を囲むだけのようなheaderは冗長なような気がした。

http://b.hatena.ne.jp/kits/20090825#bookmark-15513135

div#menuのほうは左ナビゲーションを1つのブロックとして構造化しておきたいと思ったからです。でも、div#mainのほうはご指摘のとおり必要ないかもしれないです（article要素がメインコンテンツであることを明示できてるわけだし）。

headerの使い方は悩ましいです…。一番はじめのセクションの

<header> 
<h2 id="before_write">文章を書く前に</h2> 
<p>文章を書く前に次のことをしっかりとイメージしておく。</p> 
</header>

の使い方は悪くないと思うんです。ただ、ほかのheading+h2の使い方に関しては、確かに冗長かもしれないですね。

Takazudoさんの質問に忘年会代わり・バトンに回答する

お知らせ Web標準

ヨモツネットの小山田さんにならい、Takazudoさんからの質問に答えます。

先にエクスキューズ

といっても、僕はNPO法人という「組織」に所属するとはいえ、「SOHO」のような個人でサイト制作を請け負っているようなものなので、皆さんと回答の毛色がちょっと異なるかもしれないことをご了承下さい。

あと、Takazudoさんがコーダーが気にしちゃうことバトンというエントリーで、

前回のエントリをバトンにしない？と言われたので

とあり、その一人なのですが、まさか質問内容が変わるとは露とも思っておらず、忘年会のときの質問に答えてしまいました...orz重複している質問に関しては忘年会の時の回答にまとめています。また、忘年会の時の回答はこの記事の後半に掲載しています。

てか、バトンと言うからにはやはり誰か指名しないといけないのかな。あ、でも、まずは忘年会参加の人たちが書いてくれるのを待つ感じかなー。

では、次から質問とその回答です。

コーダーが気にしちゃうことバトン

エディタは何使ってますか？

Aptana。分かっていない、使っていない機能が多すぎるので、僕にとってはIDEというよりちょっとした高機能エディタ。

ただ、ちょっとした修正はTeraPadを使うことが多いです。

高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？

Tableです。

ブラウザごとのCSSバグ対処方法はどうしてますか？

IEに関しては条件分岐コメントを使い、1つのCSSファイルにまとめてしまうことが多いです。以前はCSSハックを各CSSファイルの該当箇所のすぐ後ろに書くようにしていたのですが、自分にとっては視認性が悪いと感じることが多かったため。

ほかのモダンブラウザの場合は特に気にならない限りは無視しますが、必要に応じてCSSハック。

JavaScriptのフレームワークを使いますか？使っている場合は何を使っていますか？

jQuery。プラグインの多さが理由かな。

あなたのコーディングのこだわりはコレ！みたいなものがあれば。

「コーディングやってて背が3cm伸びました」みたいなことがあれば

いんたーねっとというもの、仕組みとか技術とかそういうのがよく分かるようになった。え、そういうのではない？

いや、だってさ、こんな仕事をしていない限り、Firefoxも使わないだろうし、Ctrl+Uとか押さないと思いますよ。

興味がある、覚えたいと思っている技術や言語は何ですか？

アクセシビリティ。仕様もちゃんと勉強したいけど、デザインプロセスの中にアクセシビリティをどのように組み込むのかというHCD的なアプローチの可能性を追求したい。加えて、もっといろんな人にアクセシビリティに興味を持ってほしい。

言語としてはPHPとJavaScript。ちゃんと読み書きできるようになりたい。

忘年会のときの質問

右に画像左にその他モジュールについてどう思うか。やっぱtableにする？もしくはtable嫌だからそもそもそういうモジュールは用意しない？

そもそもモジュールをあまり作らない。僕が付き合うクライアントの多くはWebサイトを初めて作る人たち＋小規模な団体のため、予算も人材も少ないことが多いのが現状です。そのため、僕としては何よりも「ほとんどのWebページを彼ら自身で更新できること」に重きをおきます。

その意味ではモジュールってクライアントからすると使いにくいんですよね。class属性とかを適宜割り振ってやらないといけないこともあるので、そうするとやっぱ敬遠されてしまいます。

ただ、デザイン的にやる必要がある場合はtableでやってしまいます。

Web標準に準拠、アクセシビリティに準拠と銘打ってHTMLを書くとき、tableをつかわないといけないことはないの？もしくはその時どうする？理想と現実を埋め合わせるときどうしてるかききたい

tableを使います。ただ、そのアクセシビリティがどういうケースかによっても変わってきます。サイトによってはアクセシ重視にしたいという時もあるので。

altガイドラインとかって作ってる？

CSS Niteで発表した通りです。でも、実際はもう少し柔軟に対応しています。

JavaScriptのライセンスについてクライアントから説明をもとめられたことはあるか？また、こっちから事前に説明したりすることはあるか？例えばjQueryを使う時は事前に了解を得ておくとか、言わずにつかってたらNG言われたとか。

直接のクライアントからはないですけど、協力会社のような形で請け負ったときに元請けからそういうのを聞かれたことは一度だけあります。結局はその案件では使わなかったんですけど。

コーディングにかける日数はどのくらい？

うちは小規模サイト＋CMSっていうのが多いので、コーディングも結構単純なものが多いんです。半日くらいで大枠のテンプレ作って、あとはコンテンツに応じて書き足したりするイメージです。

テンプレ→量産という考え方について、そういう考え方はあるか？制作の流れについて

WordPressをCMSに使うことが多いのでそういうふうになることが多いですし、それが理想的だと思っています。

ディレクター←→デザイナー←→コーダーという流れつにてききたい。ていうかそういう別れ方しているか。

一人でやっているので、こういう分かれ方はしていないですね。でも、自分のタスク管理はこういう分け方をしています。

IAという役職的なひとはいるかについてききたい

言わずもがなってやつで...orz

画像置換についてどうおもうか。共通部分はまぁおいといて、ページごとに見出しをそうするとかいうことに対し。大変だし。

よほどの理由がない限りは使いません。アクセシビリティ云々っていうのもありますけど、手前味噌で恐縮ですが、Ha*kon Wium Lie氏「CSSの10年とこれからの大きな動き」（日本語訳）を書いたあたりから意識的に使わなくなりました。

コーダー・デザイナーって何人ぐらいいるか

もういいぢゃない[謎]

CMSについてどう思うか。てかCMS実装とかしているか。

どう思うかと問われると、「大好き」、「愛してる」っていう感じです。実装しまくりです。もちろん、WordPressがメイン。

スクリーンリーダーについて確認してるのか？

一応、アクセシビリティ・エバンジェリストとかって勝手に名乗っているので。といいつつ、保有しているスクリーンリーダーはIBMホームページリーダーとPC-Talkerだけ。JAWSほしいです[切実]。

印刷について

クライアントに毎回確認しています。「そのまま出てくるのがよいか」「それとも読みやすさを重視するか」っていうよく分からない聞き方で。うちとしては「できる限り実装したほうがよい」と提案するようにしています。

HTMLテンプレ仕様の確認とかどーしてるか？ディレクターが確認？

おれおれ。

IE7 zoomの対応とかしてます？文中アイコンとか、どうにもならない系のは。また、クライアントに対応を求められたことは？

うちのクライアントでそもそもIE7を使っているのがほとんどいないこと、その上でzoom機能を知っている人がもっと少ないこと。というわけで、あまり対応したこともないですし、今のところは求められたこともないと思います。

JavaScriptファイルの管理方法について。自分はscriptタグを書きだしてインクルードぽくしてるんだけど、これだと全ページで全部読み込んだりとか、読む順序が前後して面倒なことになったりするんだけれどどーしてるか？直にscriptタグをかいているのか。

まさしくこのやり方です。JSは詳しくないので、このへんどうしようかなと1年くらい前から悩んでいる気がします。

JavaScript書いていると、IE5, 5.5だと大体JSエラーでるけど無視している？

IE5って何ですか？ええ、無視しています。

JSの圧縮ってしてます？

しない派です。ただでさえよく分かっていないのに、それに拍車をかけるから。

もう、position:absolute, float:left/right以外のブロック要素にはほとんどzoom:1したい気分なんですがどうですか。1個1個確認しますか。

実は最近zoomを使うことがめっきり減りました。自分でデザインレイアウトを組むから無意識のうちに避けてしまっているのかな（おい

もしかすると、汎用的に使っているコードセットというのがあるんですけど、これがうまくはまってくれているのかなー[謎]

研究的なことってする時間もらえてますか？

自宅にPCを持っていない人間なので（それをスタッフも知っているので）、勝手にやっています。もしくは休日出勤みたいな形でやったりするとか。ワークホリックと言われればそれまでなんですけど、やっていて楽しいですしねー。

まとめ

このような感じでやっている人もいるということで。もうちょっとスクリプトはちゃんと書けるようになりたいです、はい。

Takazudoさん、これだけの質問を上げてもらってありがとうございました！てか、長え！読んでいただいた方もありがとうございます。