“Misunderstanding Markup” 日本語訳
このコミックは、“Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip”にあるコミックを、著作者の許可を得て日本語に訳したものです。 元になった記事の翻訳も行っています。“Misunderstanding markup”をご覧ください。 先週、W3CはXHTML 2 Working Groupが年内でその活動を終了すると発表したんだ。単刀直入で、歓迎されるべきことだったんだけど、「XHTMLが終わってしまう」と多くの人を混乱させてしまった。Zeldmanのblogポストに寄せられたコメントを読むと、それが分かると思う。 仕方のない部分もある。異なる技術に、同じような名前がついていたことが原因なんだから。しかも、これは今に始まったことじゃあない。 たとえば、JavaScript。Javaになにか関係しそうだけど、そうじゃないよね。書き方がすこ
機種依存文字とUnicode - WebStudio
導入 機種依存文字と呼ばれる文字があります。 例えばWindowsでは、 大文字のローマ数字(ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ)、 小文字のローマ数字(ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ)、 丸囲み数字(①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳)、 丸囲み文字(㊤㊥㊦㊧㊨)、 カタカナ表記の単位(㍉㍍㌔㌘㌧㌦㍑㌫㌢)、 単位記号(㎝㎏㎡)、 複数のアルファベットを合成した文字(㏍℡№)、 元号(㍻㍼㍽㍾)、 会社名等で用いられる括弧囲み文字(㈱㈲㈹)等が機種依存文字と呼ばれています。 機種依存文字は一般的に、異機種間でデータの交換を行った場合、 例えばWindowsで作成したテキストファイルをMacintoshで表示した場合に文字化けしてしまうので、 これら異機種でデータ交換することを前提としたインターネットでは利用するべきではないと言われています。 しかし、これらは機種依存文字と呼ばれているものの、 その意味はあ
Adobe - デベロッパーセンター : クロスクライアントHTMLメールの作成
HTMLメールは、Webデザイナーにとって特別な困難を引き起こします。Web標準になじんだ世代のデザイナーにとっては、特にそうです。 CSSベースのレイアウトで、外部スタイルシートを正しく使ってメールを送れば、当然うまくいくだろうと思うのが普通です。しかし、受け取った側がそのメールを開いてみると、作成者の意図とは似ても似つかない乱れたデザインが表示されることは珍しくありません。 ブラウザ戦争はかなり昔に決着が付き、淘汰によって生き残った少数のブラウザはおおむね互換性がありますが、電子メールクライアントの分野ではまだ混乱が続いています。それどころか、デザインに関する状況は近年むしろ悪化しています。MicrosoftがOutlook 2003をOutlook 2007に置き換えたときに、Microsoft Word HTMLレンダラが新たに採用されました。これは、従来のエンジンに比べてCSSへ
HTML5が持つ本当の意味 ― ＠IT
2008/01/25 ウェブ関連技術の標準化団体「W3C」（World Wide Web Consortium）が「HTML5」の策定に向けて活動を本格化しました。1月22日には「HTML5」の最初の草案を公開。2010年9月に正式な勧告としてリリースする予定だと発表しました。 普段からウェブ関連技術をウォッチしている方は別として、「なぜ今ごろ？」と、この突然のW3Cの動きに驚かれた方が多いのではないでしょうか。「そもそもW3Cがやる意味があるの？」という疑問の声も聞こえてきそうです。 標準化団体としてのW3Cのプレゼンスは、近年あまりに高いとは言えません。かつて1990年代後半から2000年ごろにかけて、誰もがW3Cの一挙手一投足に注目していた時期がありました。彼らの出してくる標準技術仕様こそが、インターネットを形成する共通言語だと、多くの人が信じていました。 ところが、現在広く使われて
HTML5/CSS3は最新Webブラウザでどれだけ実装が進んでいるか？ － Publickey
グーグルがHTML5の機能を駆使したGoogle Waveを発表したことなどをきっかけに、HTML5への関心がこのところ急速に高まっています。以前の記事「いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0」で紹介したように、HTML5やCSS3ではWebアプリケーションの構築に有用な機能が数多く含まれており、策定は現在もW3Cで進んでいます。 最近相次いで登場した最新のWebブラウザ、Firefox 3.5やSafari 4、Google Chrome 2.0などでは、策定中のHTML5やCSSの機能を取り入れ始めています。Video/AudioタグがFirefox 3.5でもサポートされ、プラグインがなくても動画や音声の再生が可能になったことは最近話題になりました。最新のWebブラウザでは、すでにいくつものHTML5の機能が使える状態です。
自分的HTMLテンプレートの組み方 | Takazudo Clipping*
自分的HTMLテンプレートの組み方と例です。 まぁ、やるたびにちょこちょこ変えてるんですけど、2009年7月版ってことでざっくり説明。 空テンプレ モジュール一覧 サンプル ダウンロード用 エリアとモジュール 繰り返し使用される要素の塊をモジュールと呼び、エリアの中にこれを並べてページを作成するのを基本とする。 モジュールの開始要素には、「mod_moduleName」のようにclass（もしくはid）をつける。 モジュールやエリアのclass/idを起点に全てのスタイルを指定する。p、h1～h6、blockquote、table等、要素自体に直にスタイルを指定してはいけない。（グローバル変数を使っているような状態になってしまうため、以降考慮するのが面倒。リセット程度に済ます。） モジュールにスタイルを指定する際には、mod_moduleNameを起点としてスタイルを指定し、カプセル化を
<WBR>ハックと決別を - WebStudio
もずはっく日記(2009年6月) 2009年6月21日 <WBR>ハックと決別を 初回投稿日時: 2009年06月21日18時14分56秒 最終更新日時: 2009年06月21日18時18分48秒 カテゴリ: CSS Firefox Google Chrome HTML Mozilla Core Safari SNS: Tweet (list) Fx2.0(Gecko 1.8.1)まではURL等の長い文字列が一つの単語として認識され、改行されずにブロックからはみ出す、という問題がありましたが、Fx3.0(Gecko1.9)で解決されました。そして、現在、Fx2.0系列は既にサポートを終了し、セキュリティアップデートを提供していません。また、Fx2.0系のユーザにはメジャーアップデートの案内も通知済みです。 特殊なURLを表示するケース(例えば、ドメイン名やパス内のディレクトリ名やファイ
WordPressに移行してHTML5で組んでみた - Rewish
2009 - 06 - 15 その他/告知 0user 0user MTはある程度使えるレベルになったので、PHP製CMSのWordPressに移行。同時にデザインも変更してHTML5っぽい感じにしてみました。 移行に伴って色々やってみたのですが、その辺は個別でまとめるとして、今回は簡単に書けそうな部分にだけ触れます。 HTML5について 現状、仕様を完全に追いきれて無いので、割と感覚で組んだ部分があります。結構難しいですねHTML5。適当にやってたら直ぐに置いていかれそう。でも面白い。 疑問点 セクションの関係を意識してたらh1がやたら増えた。こんな感じでいいのだろうか。まだ策定段階なので見本はほとんど無いし、仕様書見てもあんまり解らなかった。 と言うことで仕様が確定するまで取り敢えず待つことにする。 表示の高速化関連 CSS Spriteを使った(まとめ方が若干変) CSSを一つのファ
アクセシビリティから考える画像のマークアップ
はじめに 本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 連載第4回目となる今回は、「画像の代替テキスト」について扱います。「画像の代替テキスト」は、Webアクセシビリティの指針である「WCAG 2.0（Web Content Accessibility Guidelines 2.0）」や「JISX-8341-3（JIS X 8341-3:2004 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェアおよびサービス－第3部：ウェブコンテンツ）」の中でも扱われている基本的な部分です。「画像の代替テキスト」について、前回の記事で紹介した「構文の妥当性」と「目的の妥当性」の両方の側面からみていくことにしましょう。 対象読者 XHTMLと
ブラウザによるHTML5の表示・解釈 World of granshe.
先週末、うんちくたれてるだけじゃダメだなと思って、 実際にHTML5を使ってコーディングをしてみた。 そこから、ブラウザのHTML5のレンダリング傾向が分かったので、メモ。 １．article、section、header、footer、asideなどのHTML5で追加されるタグは、初期値はインライン要素としてレンダリングされる。 これはちょっと驚いた。 というよりも、HTML5が正式に宣言されていないにもかかわらず、ブラウザはこれらの新しいタグをタグと認識してくれるんだと感心した。 DreamWeaverも、タグ予測の中にこれらの新しいタグを入れているみたいだし、対応の早さに驚き。 ２．CSSのファイルタイプ指定（<meta http-equiv="content-style-type" content="text/css">）が消えた。 これを指定すると、HTML5バリデータ（β）では
知っておきたいマイナーなHTMLタグ10個 – creamu
「Nettuts+」で、10 Rare HTML Tags You Really Should Knowと題して知っておきたいマイナーなHTMLタグが10個紹介されています。 以下にいくつかご紹介しますね。 <optgroup> セレクトボックスの要素をグループ分けできます。 ↓こんな感じですね。 Showtimes <acronym> マウスオーバで表示されるツールチップテキストを定義できます。 SEO is full of trickery and magic. <ins> and <del> セットで使用。削除したい（del）箇所と追加した（ins）箇所を明示。 <abbr> <acronym>と似ている。マウスオーバでツールチップテキストを表示。タイトル属性に記述。 こんなところですね。 その他は以下からどうぞ。 » 10 Rare HTML Tags You Really Sho
そのXHTML文書にXML宣言は本当に必要か？ – ofujimiki.jp
最近「XHTML文書にはXML宣言を入れることが強く推奨されているので入れるべきだ」というような意見を何度か目にしました。しかし、その説明の中で、メディア・タイプ（「text/html」や「application/xhtml+xml」など）については触れられていませんでしたので、ちょっと補足しておきたいと思います。 XHTML1.0の仕様書では、確かにXML宣言をつけることが強く推奨されており、具体的には次のように書かれています。 An XML declaration is not required in all XML documents; however XHTML document authors are strongly encouraged to use XML declarations in all their documents. しかし、ここで言うXHTML文書とは、仕様書
HTMLのマークアップ時に目的に合った要素を選ぶ方法
本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。連載第3回目となる今回のテーマは、「目的にあった要素選び」です。コーディングの際、「構文的に正しいかどうか」はツールを使ってチェックすることができますが、「目的に合っているかどうか」については人間が判断する他ありません。どの要素でマークアップするか、判断に迷う部分について掘り下げて考えてみましょう。 はじめに 本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 連載第3回目となる今回のテーマは、「目的にあった要素選び」です。コーディングの際、「構文的に正
CSS Nite in Osaka, Vol.12 「alt属性考」スライド公開 - Trans
一昨日、CSS Nite in Osaka, Vol.12に来ていただいた皆様、ありがとうございました。 さて、とりあえずなのですが、その際のスライドを公開します。 alt属性考View SlideShare presentation or Upload your own.ちなみに、何が悪いのか、SlideShareのほうはある特定の条件の画面で背景が真っ赤になるという摩訶不思議な現象も体験できます。 PDF版（5.9MB）もあります。 音声はCSS Nite公式ブログのほうで後日聞くことができるようになると思いますので、そちらも聞いてみてください（後ろの方で聞いていた方から聞こえづらかったという意見も伺いましたし）。 あと、最後に触れたのですが、インクルーシブデザインワークショップ with Re:Creator's Kansai、やります。とりあえず、ご報告。これはまた別のエントリーで
hxxk.jp - DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 )
DOCTYPE スイッチについて再度まとめ 以前 DOCTYPE スイッチについての検証とまとめと一覧表という記事で DOCTYPE スイッチについてまとめましたが、あれから 2 年弱が経過したので、改めてまとめてみようと思います。 まとめるまでの話がけっこう長いので、一覧表だけ参照したい ! という場合は DOCTYPE スイッチの一覧表をご覧ください。 DOCTYPE スイッチとは何か そもそも DOCTYPE スイッチとは何か、というのがまず書くべきところですが、これは私が書かずとも良質のリソースが各種ありますのでそのリンクのみまとめておきます。 !DOCTYPE スイッチ 各UAのDOCTYPEスイッチについて - CSS Dencitie Mozilla's DOCTYPE sniffing - MDC Mozilla's DOCTYPE sniffing - MDC ( 日本語
ウェブページでpdfをリンクするときのちょっと便利な小技 - 血統の森 はてな
ウェブブラウザで開くと何かと不便な向きもあるpdfですが*1、ちょっと幸せになれるかもしれない小技を見つけたので紹介。 pdfを開く際にページを指定するなんて芸当ができる。 例えば、2ページ目を開きたいなら、URLのあとに#で区切って、page=2と記述すればいい。 http://www.jitec.ipa.go.jp/1_01mosikomi/20a_annaisho/20a_all.pdf#page=2 （IPA*2） とまあ、少なくともAcrobat Readerのプラグインが入っているなら、2ページ目が開く。 また、ズームを指定することができる。例えば50%にしたいなら、zoom=50とする。 http://www.jitec.ipa.go.jp/1_01mosikomi/20a_annaisho/20a_all.pdf#zoom=50 2ページ目かつ、ズームを50%としたいなら、
[CSS]HTMLを診断するスタイルシート -CSS Diagnostics
NealGrosskopf.comのエントリーから、HTML 4.01で非推奨とされる要素や空の要素、空の属性などをピックアップするスタイルシートの紹介です。 CSS Diagnostics - Find Depreciated Elements Using CSS CSS Diagnosticsは、meyerweb.comのCSS Tools: Diagnostic CSSの影響を受けて作成されたもので、非推奨の要素・属性、要素・属性が空の箇所などにボーダーを表示します。 Depreciated Elements：非推奨の要素 <textarea name="code" class="css" cols="60" rows="5"> applet, basefont, center, dir, font, isindex, menu, s, strike, u { border: 5px
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
worldending.jp
http://www.design-tools.com/specialcharacters/
ants Lab. | Web制作 | 【アリンコWeb標準】XHTMLの使ってよい要素・属性をガイドライン化しよう（1/2）