世界で最も美しくSEOに適した無限スクロールを実装するサイト、QUARTZ (qz.com)
[対象: 上級] この記事では、非常に華麗な無限スクロールを実装しているサイトを紹介します。 美しく、見やすい、SEOも考慮できた QUARTZ の無限スクロール そのサイトは、ニュースメディアサイトの QUARTZ です。 「百聞は一見にしかず」で、実際に QUARTZ に訪問して見てください。 注目してほしいのはブラウザに表示されるURLです。 無限スクロールで下がっていくと、今あなたが見ている記事に対応したURLに自動的に切り替わります。 下方向だけでなく上に戻ればまたそれに対応してURLが変わります。 titleタグももちろん切り替わります。 個別のURLをブラウザのアドレスバーに入れれば、直接そのコンテンツを閲覧できます。 そして、そこから無限スクロールが始まります。 記事に与えられた個別のURLは、そのURLできちんとGoogleにインデックスされています。 Mozのランドもイ
2013年現在にHTML5でサイトを作るときに気をつけたいポイント
新しい自作ブログテンプレートを作ることを決めて、「HTML5 + CSS3」というモダンな枠組みを選ぶことにした。当然Webで調べながら作業ということになるんだけど、そこには事前に予想していなかったトラブルが潜んでいた。一通り作業が終わってHTMLをチェックしていたら、後から手直しが必要だと必要とわかった場所が結構出てきてしまっていたのだった。 原因は参考にした記事の内容が（ブログでなくても）古くてアップデートされてないことがかなり多く、「使用した要素や属性が廃止されていた（正式には採用されなかった）」「新しい要素や属性が追加されていた」という事態が思いの外多かったこと。HTML5の最初のドラフト（草案）は2008年とかなり古く、それから今に至るまで様々な議論や検討などがおこなわれた結果、色々修正が加えられていたというわけ。 もちろん、元々が草案だったのだからしょうがないし、参考にした記事
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
HTML5+RDFaについて
このブログをHTML5に変更してみました。最近流行のFacebookのOGP（Open Graph Protocol）も設定しました。 HTML5に変更した理由は、OGP（Open Graph Protocol）を設置したときにvalidなHTMLにしたかったからなのですが、そもそもproperty属性はHTML5の属性ではなく、RDFaの仕様のようでした。勉強不足ですいません・・・。OGPを設置するにあたってHTML5にする必要はないようです。 ただしOGPを設置する場合、html要素に「xmlns:prefix」というネームスペースに対応した属性を設定する必要があります。FacebookのOGPに対応する場合は「prefix」に「og」を設定します。この設定はhtml5とかxhtmlには依存しません。 <html lang="ja" xmlns:og="http://ogp.me/ns
ちょっとしたメモ - The Web KANZAKI
主にセマンティック・ウェブ黎明期のできごとや実験文書などについて書いたメモです。 HTML5＋Microdataへの全面移行 (2012-09-21) 『セマンティックHTML/XHTML』例コードのテキストほか (2009-05-28) 『セマンティックHTML/XHTML』立ち読み用PDFの配布 (2009-05-18) 『セマンティックHTML/XHTML』予約開始 (2009-05-12) セマンティック・マーク付け本ようやく脱稿 (2009-04-05) FavikiとタグとDBpedia (2008-05-28) alt要素？ (2008-05-21) metaprofのブロックレベル要素処理を強化 (2008-01-30) SKOSの新草案 (2008-01-29) HTML5はモジュール化しないの？ (2008-01-23) SPARQLがW3C勧告に (2008-01-1
[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)
figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端：リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要
![[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)](https://cdn-ak-scissors.b.st-hatena.com/image/square/a4edf0eaf5e8f4c77408f10ba236c93f8031449d/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F03%2Fhtml5-right-figure-01-150x150.png)
HTML［figure要素］本文から参照される図版を表す - TAG index
figure要素は、本文から参照される図版（挿絵、図表、写真、ソースコード、等）を表します。 デフォルトスタイル（上下マージン、左右マージン） <figure> 参照される図版を表します </figure> figure要素は、自己完結した単独のユニットとして参照されます。離れた場所に配置した場合でも、本文には影響が出ない内容で使用することができます。 図版にキャプション（タイトルや説明）を付けたい場合は、figure要素内の最初か最後のどちらかにfigcaption要素を配置します。 次の例では、figure要素を切り離しても本文には影響が出ないことになります。（yamada.jpg は山田君の顔写真だと思ってください） <p>デザインは山田太郎が担当しています。</p> <figure> <p><img src="yamada.jpg" alt="山田太郎の写真"></p> </fig
『figure要素』 / HTML5新要素一覧 | HTML5でサイトをつくろう
figure要素 図画・写真・コードリストなど、自己完結しているメイン・コンテンツから参照されるようなコンテンツを表します。 figure要素の特徴 figure要素は、単体でもコンテンツとして成り立つ自己完結型になりますので、参照用の別ページにあった場合でもメイン・コンテンツが成立する内容に使用しなければなりません。また、オプションでfigcaption要素を使いキャプションをつけることが可能です。 figure要素のマークアップ(キャプション無し) キャプションが無い場合のサンプルソースを確認していきたいと思います。 【画像を使用した場合の例 】 <p>京都の三千院では、美しい紅葉が見られます。</p> <figure> <img src="kouyou.jpg" alt="三千院の本堂から見える美しい紅葉"/> </figure> <p>今年の紅葉は例年より色鮮やかとのことです。</
HTML5のカテゴリーについて / HTML5マークアップ時の基本 | HTML5でサイトをつくろう
HTML5のカテゴリーについて HTML5の各要素は、目的に応じた8っつのカテゴリーに属しています。 【カテゴリー一覧】 メタデータ・コンテンツ フロー・コンテンツ セクショニング・コンテンツ ヘッディング・コンテンツ フレージング・コンテンツ エンベッディッド・コンテンツ インタラクティブ・コンテンツ セクショニング・ルート ただし、各要素は1つのカテゴリーとはかぎらず、複数のカテゴリーに属することもあります。ってここまでだと何のことやらさっぱりですよね。 どうやらHTML4の時に、インライン要素の中にブロック要素が使えなかったのと同様で、属するカテゴリによってルールがあるようです。 そこで各カテゴリーを理解するために、いつも大変参考にさせていただいている『HTML5.jp』のサイトを基に各カテゴリー概要をまとめてみました。 メタデータ・コンテンツ ドキュメントの｢メタデータ・スタイル・
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
figure 要素 - コンテンツのグループ化 - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.4.11 figure 要素 カテゴリー: フロー・コンテント セクショニング・ルート パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所 コンテントモデル: 1 個の figcaption 要素の後にフロー・コンテントが続く、または、 フロー・コンテントの後に 1 個の figcaption 要素が続く、または、 フロー・コンテント、のいずれか。 コンテント属性: グローバル属性 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: あらゆるロールの値 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: HTMLElement を使う。 figure 要素は、いくつかのフロ
見出しとセクション - セクション - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.3.10 見出しとセクション h1–h6 要素は見出しです。 セクショニング・コンテントの要素の中にある最初のヘッディング・コンテントの要素は、そのセクションの見出しを表します。その後に続く見出しのうち、ランクが同じか高い見出しは、（暗黙的に）新しいセクションを開始し、低いランクの見出しは、一つ前のセクションの一部をなす暗黙の副セクションを開始します。いずれの場合も、この要素は、暗黙のセクションの見出しを表します。 h1–h6 要素は、新たなセクションまたは副セクションの見出しを意図していない限り、小見出し、サブタイトル、別表題、タグラインをマークアップするのに使ってはいけません。代わりに、本仕様の専用の要素を使わない共通のイディオムのセクションにあるマークアップパターンを使ってください。 一部の要素は、セクショニング・ルートといわれます。blockquote 要素 と td 要素が含
HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除
ちょっと前に 「hgroup 要素が HTML5 の勧告候補 （Candidate Recommendation） から削除されるようです」 って記事を書きましたが、実際に削除されたみたいですね （Editor's Draft では）。 ついでに、すでに HTML 5.1 Nightly にはすでに追加されていた、main 要素が、HTML5 勧告候補の方にも追加されたようです。 HTML5 W3C Candidate Recommendation 17 December 2012 hgroup 要素が HTML5 勧告候補から削除される main 要素とは？ main 要素は元々、Steve Faulkner 氏 （Web アクセシビリティ関連の方） が HTML5 の拡張仕様として提案し、HTML 5.1 に正式に取り入れられた要素で、その名の通り、文書内の、「主要な部分」 をマークア
HTML5の｢コンテンツ・モデル｣と｢カテゴリー｣を理解してマークアップするためのまとめ | Mnemoniqs Web Designer Blog
PCサイトのコーディングではまだまだHTML4で行うことも多いですが、最近ではスマートフォンの案件も増え、HTML5でマークアップする機会が多くなってきました。 先日の記事、「うやむやにしていたHTML5の文書論理構造をきちんと考えてみる」では基本的な文書論理構造のフローチャートを載せました。今回はHTML5をマークアップするうえで無視できない『コンテンツ・モデル』について、自分の理解を深める意味でも、改めてまとめてみようかと思います。 目次 『コンテンツ・モデル』を理解する必要はあるの？ 『コンテンツ・モデル』って一体なに？ 『コンテンツ・モデル』の主要カテゴリー 注意！「カテゴリー」＝『コンテンツ・モデル』ではない 『コンテンツ・モデル』をもとにしたタグの配置ルール トランスペアレント・コンテンツとは？ まとめ 『コンテンツ・モデル』を理解する必要はあるの？ HTML4でマークアップし
3分でわかるHTML5のコンテンツモデルとカテゴリー (1/3)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 前回のセクションに関する要素の解説では、「カテゴリー」や「コンテンツモデル」という単語が登場しました。カテゴリーとコンテンツモデルを理解すると、「要素の中にどの要素を入れられるのか」を、容易に判断できます。 「コンテンツモデル」は入れられるコンテンツのルール、 「カテゴリー」は詳細な分類 第1回の記事で、「a要素がブロ
コンテンツ・モデル
メタデータ・コンテンツ <base /> 空 <link /> 空 <meta /> 空 <noscript>-</noscript> スクリプトが無効な場合:0個以上のlink要素, meta要素, style要素 スクリプトが有効な場合:テキスト <script>-</script> src属性がある場合: 空、もしくは著作権情報やAPI 情報といったスクリプトの説明文 src属性がない場合: JavaScriptのコード等(text/javascript以外を用いるのであれば、type属性は必須) <style>-</style> CSSのコード等(text/css以外を用いるのであれば、type属性は必須) <title>-</title> テキストのみ 必須要素であり、必ず1個だけ定義 フロー・コンテンツ <a>-</a> トランスペアレント(ただし、インタラクティブ・コンテンツ
html5にrole属性やstate属性なるものがあると聞きました。その使いどころは・・・？ - 現状で使い道はあるのでしょうか... - Yahoo!知恵袋
state 属性なんてありましたっけ？ 規定書をざっと見た限り、見当たりませんが。 role 属性というのは、XHTML 2.0 に由来します。 ・本当は、こういうウィジェットを書きたい……。 <tablist> <tab id="tab1">タブ 1</tab> <tab id="tab2">タブ 2</tab> <tab id="tab3">タブ 3</tab> </tablist> <tabpanel labelledby="tab1">パネル 1</tabpanel> <tabpanel labelledby="tab2">パネル 2</tabpanel> <tabpanel labelledby="tab3">パネル 3</tabpanel> ・でも、HTML ではこう書くしかないし……。 <ul> <li>タブ 1</li> <li>タブ 2</li> <li>タブ 3</li
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
05step.com
http://blog.e-riverstyle.com/2011/01/rolewaiaria.html
