リンクの隣りにfaviconを表示する
Favicons Next To External Links | CSS-Tricksという、リンクの左側にリンク先のfaviconを表示するというテクニックが紹介されていて、試してみました。簡単にできて、見た目にも華やかになるので面白い(個人的に)。
⛰ 塵が積もって山とならないメモのログ 👄
Favicons Next To External Links | CSS-Tricksという、リンクの左側にリンク先のfaviconを表示するというテクニックが紹介されていて、試してみました。簡単にできて、見た目にも華やかになるので面白い(個人的に)。
Performance Calendar » CSS Selector Performance has changed! (For the better)にWebkitでCSSのマッチングの最適化が進んでいるという話が掲載されていて、下記の4つ最適化方法について紹介しています(via * { box-sizing: border-box } FTW « Paul Irish)。という話の紹介。
HTML for Icon Font Usage | CSS-Tricksでアイコン用フォントを使用して、対象の左側にアイコン画像を表示するという方法が紹介されているのですが、その中でスクリーンリーダー対策として「aria-hidden」という属性を入れている。
(追記 2013/1/30)Packageの名前がZen Codingから「Emmet」に変わっていました。ので、Packageの名前をEmmetに差し替えました。あわせて最後に書いていたスニペットの変更方法もちゃんとした(?)方法に書き換えました。
(そのままではないか)
たとえば以下のようなHTMLがあるとして、
いまさらながらのfloatとwidth:autoの話。
Building a modern grid system | Tutorial | .net magazineにwidthをパーセントで指定したresponsiveなgrid(で、かつネストできてサイズの変更が簡単で..云々)を作成するという話が掲載されている。
gem installするだけで簡単だろうと思って始めてみたら意外と面倒だったのでメモ。RubyはRubyInstallerのDownloadページから「Ruby 1.8.7-p358」をダウンロードしてインストールしました。
Responsive.isというサイトで 自分のサイトがiPhoneやiPadなどでどのように表示されるかを疑似体験することができます(via Responsive.is: Display and present responsive web designs | Konigi)。実際には解像度の違いがあるのでiPhone4以降や最新のiPadでは画像の解像感に違いはありますけど、手元にiPhoneやiPadがない場合に、レスポンシブデザインに対応した自分のサイトがどのように見えるかを確認するには十分かなと思います。