はてなブックマーク

wp_nav_menu 関数はカスタムメニューを表示するための関数(テンプレートタグ)です。 メニューの前後に表示する(HTML)テキストを指定したり、メニューを覆うラッパーの要素を指定するなど、細かな制御が可能です。 しかしながら、schema.org が提唱するような、itemprop などを用いたメタデータを埋め込むための機能は用意されていません。 nav_menu_item_id などのフィルタにフックすれば、class 名や id 名を細かく制御することができますが、 いずれの方法でも、class 名や id 名以外を設定することはできません。 したがって、メニューに関する独自のデータや、あるいはメタデータを埋め込みたい場合には、 wp_nav_menu 関数が出力する HTML テキストを独自にカスタマイズする必要があります。 幸いなことに wp_nav_menu 関数は、独自

Wordpress のテーマなどでは　<link rel="profile" href="http://gmpg.org/xfn/11" />　のようなコードがみられます。 これは XFN フォーマットを取り入れたページであることを伝えるメタデータです。 XFN(XHTML Friends Network) とはマイクロフォーマットの 1 つで、他者(他のサイト)との関係を示すものですが、現状では役に立つようなシチュエーションが存在しません。 したがって積極的に削除するべきです。 XFN 公式サイト http://gmpg.org/xfn/ HTML5 においては誤った構文 HTML5 においては、rel 属性に与えられる値は制限されています。また rel 属性を指定することができる要素も link, a, area 要素に限定されています。 したがって rel="profile" は H

パフォーマンスを低下させる CSS の設定を排除して最適化することで、ページの描画速度を改善し、データサイズを小さくすることができます。 ここではパフォーマンスを低下させる CSS の設定例と、それを改善するための設定例を一覧します。 スタイルの値 数値の指定は小数点で 色の設定はできるだけ短く 継承を活用する セレクタ 基本ルール id セレクタは使わない id, class セレクタとタイプセレクタを組み合わせない 全称セレクタは使わない 制限されないセレクタは使わない 子孫セレクタを多用しない セレクタの階層を深くしない 連結したセレクタは使わない 命名規約 クラス名の単語はハイフン 省略形の名前 参考資料 スタイルの値 数値の指定は小数点で データサイズを小さくするため、0.8 などの 0 ~ 1 の値は .8 で指定します。0 はなくても小数点で解釈されます。 ただし、YUI C

図のように、IE10 や IE11+ ではコンテンツ (HTML の要素) とスクロールバーが重なってしまう (= オーバーレイする) ことがあります。 設定によっては、スクロールバーは一定時間が経過した後に自動的に隠れますが、 スクロール中にテキストが読みにくくなったり、リンクやボタンがクリックしにくくなることは問題です。 ここでは、この問題について解決します。 原因はビューポートの設定 IE でスクロールバーが重なる原因は、(ほとんどの場合に)ビューポートの設定です。ビューポートとは、ページが描画される領域です。 ビューポートの設定を変更するときは、meta 要素を使って指定するか、CSS を使って指定します。 ビューポートの設定を変更することで、デバイスの解像度が変化したときに、ビューポートの大きさも変更することができるようになります。 言い換えれば、レスポンシブデザインにすることが

role 属性は、要素が示す役割を明確にするための属性です。 例えば、header 要素はコンテンツの header か、あるいはサイト全体の header を示すことなどができますが、 どちらの header であるかを明確に区別する手段はありません。 しかしながら、role 属性の値 banner によって、コンテンツ固有の header ではなく、サイトの持つ header であることを示すことができます。 HTML5 以降の HTML は、ある役割を示す要素が多く存在しますが、role 属性はより強く役割を示します。 role によって役割を明確にする意味 role 属性は HTML などで使いますが、role 属性に与える値や役割は HTML とは切り離された ARIA と表記される区分に定義されています。 Accessible Rich Internet Application