タグ

chromeとHTML5に関するkathewのブックマーク (2)

  • HTML5のアウトライン構造だけでなくセクションもチェックできるChrome拡張&Firefoxアドオン

    HeadingsMapとは HeadingsMapは、HTMLドキュメントの「HTML5アウトライン」や「見出し構造」のナビゲートマップを表示してくれるブラウザ拡張です。 HeadingsMapは、Chrome拡張版と、Firefoxアドオン版があります。 これまでよく利用されていたHTML5 Outliner(Chrome拡張)等のツールは、アウトライン構造のみが表示されていましたが、HeadingsMapは、アウトライン構造に加えてセクション情報も表示してくれます。 例えば、HTML5 Outlinerで、表示させた場合は、単にアウトライン構造だけが表示されていました。 一方、HeadingsMapで表示すると、見出しで使われているタグまで見ることができ、構造をより詳細に表示することができます。 また、section、nav、article、asideのようなセクション要素が利用されて

    HTML5のアウトライン構造だけでなくセクションもチェックできるChrome拡張&Firefoxアドオン
  • HTML5でルビ付き表示を行う方法(FirefoxとChromeのルビの扱い) - 結城浩のはてなブログ

    ケイクスでのWeb連載『数学ガールの秘密ノート』が始まりました。ところで記事の中で、ルビの扱いがブラウザで微妙に違うことにお気づきでしょうか。まずはこちらをご覧ください。 第1回 文字と恒等式(前編) はじめの方に、女子高生テトラちゃんのセリフ「……先輩は恒等式(こうとうしき)のお話をしてくださいましたよね」が出てきます。この「恒等式」の部分は、以下のようにマークアップしています。 <ruby> 恒等式 ←1. 単語 <rp>(</rp> ←2. カッコ開き <rt>こうとうしき</rt> ←3. ルビ <rp>)</rp> ←4. カッコ閉じ </ruby> ルビに対応していないブラウザ(Firefox)では、上記の1,2,3,4が表示されます。 ルビに対応しているブラウザ(Chome)では、上記の1,3を使ってルビ付きで表示されます。 その結果、以下のように表示されます。Firefox

    HTML5でルビ付き表示を行う方法(FirefoxとChromeのルビの扱い) - 結城浩のはてなブログ
  • 1