[CSS]パンくずの実装はどのようにするのがよいかの考察
パンくずは何要素で実装していますか？ ul要素？ ol要素？ p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul
[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></
グーグルがHTML5のMicrodataに早くも対応
Microdataは、HTMLにメタデータを埋め込むための記述方法です。HTML5の仕様の一部として策定が開始され、現在はW3CのHTML5仕様からは独立した仕様となっています。 そのMicrodataをグーグルが読み取って「リッチスニペット」に利用すると、ブログ「Google Webmaster Central Blog」のエントリ「Microdata support for Rich Snippets」で明らかにしました。 リッチスニペットのデータとしてMicrodataを読み込み リッチスニペットとは、検索結果に表示される情報です（ただしすべての結果に表示されるわけではありません）。 上記の例（グーグルのリッチスニペットのページから）では、ネット上のレビュー記事をグーグルが自動的に集計して、星の数を表示しています。 このリッチスニペットを構成するために、グーグルはネット上のさまざまな
HTML5のMicrodataとは何か？
HTML5では、HTML文書の中にメタデータを埋め込むための「Microdata」という仕様が含まれています。 最初に簡単なMicrodataの具体例を紹介します。HTML文書の中で明示的に人名であることを示したい内容があるとき、Microdataでは次のように書くことができます。 <div itemscope> <p>僕の名前は<span itemprop="name">山田太郎</span>です。</p> </div> この文書をWebブラウザで表示しても、 僕の名前は山田太郎です。 と表示されるだけで、特に何か変わったことが起きるわけではありません。しかし、このHTML文書を検索エンジンが読み込むと「山田太郎という文字列はnameである」と理解してインデックスしてくれる、といったことができるようになります（というのはあくまで例です）。 Microdataとは、文書の内容に対して機械に
[JS]限られた領域内で大きい画像をドラッグでスライドできるスクリプト -SpryMap
大きい画像を限られた領域内に表示し、Googleマップのようにマウスのクリックとドラッグでその画像をアニメーションでスライドできるスクリプトを紹介します。 SpryMap デモページ [ad#ad-2] スクリプトはjQueryなどの他のライブラリは必要とせず、単独で動作します。 SpryMapの特徴 他のライブラリに依存せずに動作する超軽量（3KB）のスクリプト。 画像を表示する領域はピクセル単位で指定が可能。 画像を最初に表示する座標を設定可能。 スクロールのアニメーションの時間を設定可能。 SpryMapの実装 実装は簡単で、画像にidを指定して使用します。 HTML スクリプトでラッパーとなるdiv要素を追加します。divのclassはオプションで設定できます。 <img id="worldMap" src="map.jpg" alt="A map of the world." /
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
