html/css カテゴリの記事一覧。（1 / 9 ページ）
ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen （Editor's Draft） が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。
例えば HTML5 で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、フルスクリーン （全画面） 表示に関しては機能として含まれていませんでした。Fullscreen API は、JavaScript を使用して、video 要素や、canvas をはじめ、任意の要素内をフルスクリーン表示することを可能にしてくれます。
「HTML5 でコーディングしたら SEO （検索エンジン最適化） 的に有利になりますか？」 っていう質問、たまに聞かれるんですけどね。
個人的には "SEO のために" HTML5 にするか XHTML にするかなんて悩んでる暇があったら利用者に役に立つコンテンツの 1つでも考えた方がいいよと思うわけですし、聞かれたときはそのように答えているわけですが、折角なので簡単に考えをまとめて Blog に書いておいてみようかなと思ってダラダラと書き始めていたら、自分が書こうと思っていた内容をすべて言ってくれてしまっている記事が Impressive Webs で 10倍わかりやすく書かれていたので引用しつつ紹介してみようと思います。
ちょっといつもと趣が異なる記事として、HTML5 Doctor で 「HTML5: briefing notes for journalists and analysts」 という記事が上がっていましたのでまたまた稚拙ではありますが翻訳など。
今回の記事は、ジャーナリスト、アナリスト （つまり、あまり技術的な話に精通していない人） 向けに、よくある質問とその答えをまとめたものです。技術者以外の人に 「HTML5 って何？」 って聞かれたときの参考になるかも。
いや、これは単純に私が知らなかったというか、普通に使えると思い込んでいただけなんですけどね。
前のエントリで 「HTML5 + CSS でコバトン描いてみた」 っていうお遊びを紹介したのですが、その後 iPhone / iPad で確認してみたらコバトンさんのお顔が四角い顔になっていて、そこで初めて気がつきました。結論から言ってしまえば単なる勘違いという間抜けなお話ではありますが、メモ代わりにエントリ。
なんか、CSS で色々描いてみた的なやつを見てたら自分も描いてみたくなったので、埼玉県民にはおなじみの鳥さんマスコット 「コバトン」 を HTML5 と CSS で描いてみるテスト。
単純に 空の div 要素を並べて CSS で整形して position: absolute; でもいいんですが、今回は CSS 無しの、HTML としてもある程度意味のわかる文書になるように、元の HTML も書いてみました。
あまり時間をかけずにとりあえずという感じで描いて、細かい検証とか、ソースコードのブラッシュアップとかしていませんので、絵としての再現度やソースコードは微妙なところも多々あります。また主要なブラウザの最新版ならほぼ問題なく表示できると思いますが、Chrome、Safari などでは顔がちょっと崩れていたり、IE は text-shadow が効いてなかったりと一部おかしい部分もありますが、その辺はご愛敬と言うことで。
ちなみにコバトンが浦和レッズバージョンなのは個人的な趣味の問題です...
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。
翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではありません。正しくは原文を見てください。ちなみに 「注）」 として書いてあるのは私の補足です。参考まで。
最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。
アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。
Twitter でも書きましたが、CSS 2.1 が W3C 勧告になりました。
ということで、6月7日付けで下記の通り公開されています。
去年、9月に HTML5 の Last Call（最終草案）に向けたスケジュール案が発表され、
さらに、今年に入って 2011年5月に Last Call を出すよというスケジュールが発表されていましたが、
本日（米国時間 25日）、予定通り、HTML5 及び、関連仕様 5つの Lasc Call が宣言されました。
去年、W3C が公開していた 「W3C Cheatsheet」 ですが、今回更新されて HTML5 にも対応し、より使いやすくなったので紹介してみます。
残念ながら CSS3 のプロパティには未対応なのですが、HTML や CSS 等に関してさっと調べたいときにはとても便利だと思いますよ。iPhone や Android 携帯などでは Web アプリケーションとして動作するように作ってありますので、それらモバイル機器をお持ちの場合は、ブックマークしておくといいと思います。（iPhone なら 「ホームに追加」 しておくといいですよ。）