HTML5 + WAI-ARIA: 入門篇
このサイトを HTML5 でリニューアルした際に保留としたまますっかり忘れかけていましたが、ようやく WAI-ARIA を導入してみました。 WAI-ARIA は W3C の Web Accessibility Initiative (WAI) が公開している技術仕様で、Web コンテントや Web アプリケーションのアクセシビリティを強化することを目的としています。具体的には、Web ブラウザや支援技術 (AT) がコンテントのセマンティクスをより適切に認識できるよう、HTML ドキュメントに要素の「役割」や「状態」といった詳細な情報を付与するものです。名称に RIA とあるように、Ajax などによるリッチ・インターネット・アプリケーションをおもな対象とした仕様ですが、HTML5 によるシンプルな Web ページに取り入れることもできます。ここでは WAI-ARIA の HTML5 へ
文書の先頭へのリンク
文書の特定箇所をターゲットとするハイパーリンク、いわゆる「ページ内リンク」で、<a href="#top">Top of the Page</a> のように top というフラグメント識別子を指定すると、それは文書の先頭へのリンクになります。このとき top という名前を持った要素がページの先頭に存在する必要はありません (もし存在すればその要素へのリンクになる)。 …という仕様があることを、つい最近 MDN 経由ではじめて知りました。どうやらもともと一部のブラウザーの独自仕様だったものが HTML5 において仕様に定められた、という経緯のようです。 文書の先頭へのリンクの実装方法としては、コンテンツ全体をラップする #wrapper や #container、あるいは文書の最上部に位置する #header といったフラグメントへのリンクというかたちで実現する例がよく見られます。しかしこれ
Sass のカスタム関数の書き方
Sass は ネイティブ関数 のほかに、@function ディレクティブ を使ってカスタム関数を自由に定義することができます。僕もより共有や再利用のしやすいものを作るべく試行錯誤していますが、ここではそのうち最近試しているいくつかのパターンについて書いてみました。ご意見求む。 接頭辞 attr() や calc() など CSS のネイティブ関数や percentage() や type-of() といった Sass のネイティブ関数と名前が衝突するのを防ぐため、カスタム関数の関数名に接頭辞をつけることを検討しています。現行の CSS/Sass だけではなく将来追加される新しいネイティブ関数も考慮するとやはり何らかの対策をしておきたいところで、接頭辞は現実的な解であるように思います。Sass リファレンスの 関数ディレクティブの項 でも以下のように接頭辞の採用を勧めています: It is
CSS ボタンのグラデーションとボーダーをグレースケールの RGBA で
CSS でボタンを作るとき、背景のグラデーションとボーダーをグレースケールの RGBA にしたものをもとにすると、背景色やフォントを変えるだけでバリエーションが作れるので便利です。 button { background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); background-origin: border-box; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0.25em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px rgba(255, 255, 255, 0.1); cursor: pointer; display: inline-block; line-he
キャプションの幅を画像の幅に合わせる
Fig 1: Wikipedia のキャプションつき画像の例 ちょっとわかりにくいタイトルになってしまいましたが、つまり Wikipedia のやつ (Fig 1) みたいに、「画像 (またはビデオなどの埋め込みコンテンツ) の下にキャプションをレイアウトするとき、キャプションが複数行にわたる場合は画像の幅に合わせて折り返したい (ただし画像の幅はバラバラ)」というのをシンプルかつ汎用的なかたちで実現する CSS を考えてみました。というか、このブログのレイアウト用にけっこう長いことあれこれ考えてたもののこれといった手が思いつかなくて放置していたんですが、上手い解決を Stack Overflow でみつけた のでパクった、という話です。 <figure> <img src="/img/photo.jpg"> <figcaption>Lorem ipsum dolor sit amet</
Open Sans
このサイトのボディの欧文フォントとして Google Web Fonts で提供されている Open Sans を使ってみることにした。Chrome ウェブストア とかで採用されてるので見たことある人も多いんじゃないでしょうか。 比較的ニュートラルだけど、g や t やイタリックの f あたりのクセが好み。5 ウェイトでそれぞれにイタリックがあり、計 10 通りのバリエーションがあるのもいいです。とは言え実際にはそこまで必要ないので、このサイトでは 400、400 のイタリック、700、700 のイタリックという 4 種に絞って利用。 Google Web Fonts のフォントファイルを読み込むには CSS の @import ルールや JavaScript の API を使う方法もあるけど、おそらく link 要素でのインクルードがいちばん手軽で速いと思います。 <link rel="
Google Web Fonts が IE で適切に読み込まれない
Google Web Fonts のウェブフォントには IE 8 以下でちょっとしたバグがある。このサイトでもずっと放置してたのをようやく直しました… <head> ... <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700"> ... </head> たとえば上記のように書けば、Open Sans のウェイト 400 (ノーマル) と 700 (ボールド)、そしてそれぞれのイタリックの計 4 書体が読み込まれる。あとは CSS でふつうに h1 { font-family: "Open Sans", sans-serif; font-weight: bold; } みたいな感じで指定が可能。 Fig 1: Open Sans on
text-rendering: optimizeLegibility
WordPress の次期デフォルト・テーマ、Twenty Twelve の CSS を見ていたら、body 要素に text-rendering: optimizeLegibility という見慣れないプロパティが指定されていたのでちょっと調べてみました。 The ‘text-rendering’ property – SVG 1.1 (Second Edition) text-rendering | Mozilla Developer Network Cross-browser kerning-pairs & ligatures CSS Text-Rendering | Trent Walton text-rendering プロパティは CSS ではなく SVG の仕様に定義されています。現在のところ利用できるブラウザは Firefox、Chrome、Safari。指定できる値は a
jQuery Image Rollover
jQuery Conference で発表されたらしい、Douglas Neiner さんの Contextual jQuery 3 というスライドが興味深かったので、参考にしながらためしに画像ロールオーバー (マウスが乗っかると画像が差し替わるあれ) の jQuery プラグインを書いてみました。ワーク・イン・プログレス。 terkel/jquery-imagerollover · GitHub この手のスクリプトでよくあるのが、$(document).ready() のタイミングで各画像に .each() で処理をバインドするというやり方で、僕もその方法で書いたプラグインを使っていました。たとえば .rollover というクラスを持った画像を対象にする場合、だいたいこんな感じです: $(document).ready(function () { $('.rollover').each
画像置換のあれへの補足
先月あたり、CSS による画像置換テクニックの話題がにわかに盛り上がりを見せていました。その経緯について まとりさんの記事 で紹介されていますが、僕からも簡単に補足してみます。 まず、よく知られた画像置換のテクニックとしていわゆるファーク式がありました: /* Phark method */ .ir { height: 100px; width: 400px; background: url(image.png) no-repeat 0 0; text-indent: -9999px; } このテクニックは長らく利用され続けてきましたが、その代替として、パフォーマンス面でより良いとされる Scott Kellum さんのテクニック (ケラム式) が Jeffrey Zeldman さんの記事 で紹介されました: /* Kellum method */ .ir { height: 100px
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
