Microdata を使ってみよう。サンプルソースで学ぶ Microdata
HTML5 Advent Calendar 2012、7日目の記事として、Microdata （マイクロデータ） に触れてみます。サンプルソースを中心に、実際のページでどのように使えるのかを示しました。これから Microdata を使ってみたいという人に少しでも参考になればと思います。 HTML5 Advent Calendar 2012、7日目の記事です。なんか軽い気持ちで書いてみますとか言ってしまったんですが、緊張しますね… さて、タイトルの通りなのですが、HTML Microdata （マイクロデータ） について簡単に触れてみようかなと思います。この辺の話題に関して、Microdata とは何かとか、詳しい解説はすでに色々な方が書かれていますのでそちらを見ていただく （文末にまとめてあります） として、この記事では、そういう解説は置いといて、Blog や、企業の Web サイトなど
iframe 要素の seamless 属性を試してみた
WebKit Nightly Buildsが iframe 要素に追加された seamless 属性に対応したとのことなので、早速どんな感じになるのか確認してみました。 Last week in WebKit: Inspector's sources panel and private names ： Surfin' Safari Add seamless layout code (and pass most of the remaining seamless tests) ： Changeset 118291 WebKit 現在公開されている WebKit Nightly Builds の最新版、及び Google Chrome も、開発者向けビルド （Dev channel） の最新版 「21.0.1155.2」 で動作しているのが確認できました。インストール済みの方は下記にデモページ
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
RDF Semantics （RDF意味論） 入門
RDF関連の W3C 文書群の中でも重要度が高い、にもかかわらず日本語訳がなくて苦労していた RDF Semantics の日本語訳を小出誠二氏が公開し、さらにこの小難しい文書を読むにあたって非常に役立つ、「「RDF意味論」を読むために」という連載記事を公開されていますのでご紹介します。 RDF （Resource Description Framework） とか言ってもあまりピンとこない人の方が多いと思うのですが、これを基礎とした 「セマンティックウェブ」 は個人的にとっても興味のある分野で、色々と書籍だの、Web 上のドキュメントだのを読んだりしてるわけです。その中でも基本となる W3C の文書群は重要なんですが難しい…… そんな文書群の中でも重要度高い、にもかかわらず日本語訳がなくて苦労していた RDF Semantics の日本語訳を小出誠二氏が公開し、さらにこの小難しい文書を読
HTML5 でソースコード書いてみた
今のところすぐに HTML5 を使う理由もないので、実際に HTML5 でソースコードを書いてみるってことをしていなかったのですが、思い立って簡単に書いてみました。この Blog のトップページを HTML5 で再コーディングしたらどんな感じかなということで、今ある構成要素をほぼそのままに、HTML5 でサンプルを作ってみました。 今のところすぐに HTML5 を使う理由もないので、実際に HTML5 でソースコードを書いてみるってことをしていなかったのですが、思い立って簡単に書いてみました。この Blog のトップページを HTML5 で再コーディングしたらどんな感じかなということで、今ある構成要素をほぼそのままに、HTML5 でサンプルを作ってみました。 HTML5 サンプル 見ていただければわかりますが、超適当です。スタイルもさすがに全くなしっていうのもなんですので、最低限のレイアウ
CSS セレクタに関するおさらい 3
前回の続きです。今回が最終回、擬似要素を中心にまとめています。 擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関して... 前回の続きです。今回が最終回、擬似要素を中心にまとめています。 擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関しては、「:」 を 2回使って、「::」と記述することが定義されています。CSS2 までに準拠してコーディングする場合は従来どおり、「:」 1つの記述方法でも問題ありませんが、将来的にはこの記述方法が基本になる予定ですので、今回は仕様書に合わせて 「::」 と記述しています。 この 「::」 方式の記述ですが、実はモダンブラウザの多くはすでにこの記述方法に対応してたりしますので、今でも使えちゃいます。 擬似要素 (pseudo-element) E::first-line
CSS セレクタに関するおさらい 2 | WWW WATCH
前回の続きです。今回も引き続き、CSS3 で定義予定のものも含めて、CSS セレクタのリファレンスいきます。 今回は擬似クラスを中心に取り上げてみますが、CSS3 では擬似クラスが大幅に拡張されていますので、見慣れないものばかりかと思いますが、知っておくといいかもしれません。ただし、ブラウザのサポートはまだまだですので、実用性は高くないと思います。 擬似クラス (Structural pseudo-classes) E:root ドキュメント内のルート要素である E という要素にスタイルを指定します。CSS3 で定義。(X)HTML においては、ルート要素は html 要素になるので、 :root { margin:0; padding:0; } とすれば html 要素にスタイルが適用されます。XML の場合は、DTD で指定されたルート要素に対して適用されます。 E:nth-child
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
