遅延読み込み用のぼやけた画像
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
GitHub Pagesへ移行した
好みの問題でJekyllはどうしても使う気になれないのでビルド・システムはそのままに、ホスティング先をGitHub Pagesに移動した。DNS設定もTTL通り5分で反映され、www付きのリダイレクトもうまくいっているようだ。 ビルド・システムは変えないと決めたので、今まではrsyncでリモート・サーバーにミラーしていたのを、そのままbuildという名前のサブディレクトリーにミラーするように変える方法にした。その後常にgh-pagesブランチをチェックアウトしているbuildディレクトリーで全追加(add --all)してからコミット、そしてpushするという形で公開する。 記事ファイルの作成 ウェブサイト管理用リポジトリー(プライベート)にコミット HTMLとRSS、およびサイトマップの生成 rsyncで必要なファイルだけサブディレクトリーにミラー ウェブサイト公開用リポジトリーにコミッ
無印良品 オーブントースター・縦型
今年買ったもので最も良かったのなんだろうなとか考えてた。いくつか候補があったけど、無印良品のオーブントースター・縦型が一番だった気がする(KOIZUMIのKOS-1011/Wの別デザインっぽい)。もちろん占有領域が狭いのがすごく良い。ネットストアでは売り切れてるけど店舗にはそこそこ在庫があるので、最寄りの店舗で頼めば取り寄せてくれると思う。 そもそものサイズが小さいのもあるけど、電源コードも真後ろに飛び出る形じゃないので、場所をとりにくくなってる。正面から見て奥右後ろから奥中央へ向けて電源コードが伸びるので、コードの根本の硬い部分が後ろに飛び出ない。コードを無理やり折り曲げたりしなくても取り回ししやすくもなってる。 デザインも前面がほとんど全部ミラーガラスなのですっきりキレイ。汚れも落ちやすい。本体の色はネットストアの写真だとベージュぽく見えるけど真っ白。下のパンくずトレイも写真だと邪魔そ
pushState()とhead要素の子
ページの一部だけ差し替えてpushState()で表示されるURLだけを更新という手法が広まりしばらく経った。全般的に素晴らしい仕組みで、みんなどんどん使えば良いと思うのだけど、head要素の子のことをちょっと気にして欲しいかなと思う。 よく見る駄目なケースはRSS Auto-discoveryが死ぬもの。例えばMediumのトップページにはRSS Auto-discoveryはないので、Firefoxの購読ツールバー・ボタンはもちろん無効のまま。そこからカテゴリやユーザーのページに移動しても無効のままなので、RSSが無いように見えるが実際はある。コンテンツ部分の差し替えのみで、rel="alternate"を指定したlink要素が追加されないため、有効にならない。これではRSSを購読しようと思ってもなかなか難しい。 また、FirefoxでMediumで特定のカテゴリを直接開いた場合は購読
初期プロフィール・アイコン
最近はどのウェブサービスでもプロフィール・アイコンを設定できる。そこで問題になるのが、とりあえず設定されるデフォルトのプロフィール・アイコン。全ユーザー共通であったり、Gravatarであったりするのがメジャーだけど、一部では登録時に取得したユーザー名等から生成されて設定されたりもする。 GitHub プロフィール・アイコンにはGravatarが使われている。ただし、GitHubの登録用の(公開される)メールアドレスと、Gravatarで使うメールアドレスが別々に設定できるようになっているので、一手間ある。デフォルトのアイコンは、少し前にOctocatからユニーク生成の、一般的にIdenticonなどと呼ばれるものに変更になった。 GitHub Identicon for "hail2u" ユニークでカワイくはあるけど、特に意味はない。 Delicious Deliciousでは画像をアッ
Sassの存在意義
SassはCSSの貧弱さを補うような便利機能について取り上げられることが多い。そのためその機能の奥に隠れているものについて触れられることはあまりない。例えば変数や四則演算、関数によって値に論理的な意味を持たせることができることとか。そういうCSSに足りない概念の導入できることとかももちろん周知させたいけど、それ以上にHTMLとCSSによるWebサイトの作成に新たなアプローチが加わることを周知させられればいいなぁと最近思う。Sassの存在意義というのはその辺りに見いだせるんじゃないかと考えているので。もう「CSSグラデーションのミックスイン！」とかスニペットでやれるようなことを推すのはやめたい(やめてほしい)。 現状ではWebサイトは以下の2つのアプローチでしか作成(更新)できない。 HTMLで文書をマークアップして、それに合わせてCSSにセレクターを書く CSSでデザインを定義して、それに
デバイスを回転させた時の話
少し前に回転させた時にフォント・サイズを変えるとまずいんじゃないかというようなエントリーを書いたんだけど、同じような事を取り上げつつまったく逆の結論にたどり着いてるFluid grids, orientation & resolution independenceというエントリーを見つけたので読んだ。2か月ほど前のエントリーなので、筆者も今はもう違う意見を持っているのかもしれないけど、ざっと要約してその感想を書く。 Fluid～では、Responsive Web Designでは回転により描画領域が拡大した時に画像等のサイズを追随させるがフォント・サイズはそのままなことが多いため、画像と文字のレイアウトのバランスが崩れるという問題が起きることを指摘している。この問題は16:9の縦横比を採用しているタブレット(例えばGalaxy Tab)などで顕著になり、Media Queriesで細かくレ
Fusion 5+1 vs. Quattro4
結構長い間Schick派でQuattro4を使ってたんですが、半年くらい前にFusion 5+1に乗り換えて結構快適な感じです。色々違いはあると思うんですけど、一番気に入ってるのはカミソリの裏側がすっきりしてて、ちょっと強めに水で流せば汚れが溜まらないところ。 切れ味 Fusion 5+1のが上な気もするけど、刃の切れ味自体は余り変わらないんじゃないかと思う。Quattro4はワイヤーのせいで切れ味が悪く感じるだけな気がする。Fusion 5+1のがシュルシュル剃れてる感じがするので剃ってて気持ち良い。 耐久度 Quattro4のが倍近くもちが良かった気がする。これもワイヤーのせいというかおかげか。Fusion 5+1はもたない。冷蔵庫で保管するともちがよくなるとか本当なのかな……。 持ちやすさ 使ってる時は気づかなかったんだけど、Quattro4は重さのバランス悪い気がする。Fusion
フロートした要素に続くリスト
通常フロートした要素とデフォルトの文書フローで配置された要素は重なります。CSS 2.1仕様書のフロートの解説にある図Dがその例です。なので、通常フロートした要素に続くリストはそのブレット(や数字等)がフロートした要素の下に隠れてしまいます。この挙動には結構困らされることが多いですが、実はoverflow: autoとすると簡単に回避できます。 Demo: ul after floated element デモのようにリストにoverflow: autoするだけで、キレイにリストが配置されるようになります。overflow: autoを使った場合と使わなかった場合でどう重なりに違いが出るかわかるように、outlineプロパティーでピンクの線を引いておきました。 これはブラウザの挙動がたまたまそうなったということではなく、実にさり気なくCSS 2.1仕様書にも記述があります。 The bor
&だけ別のフォントで置き換える
Google Web Fonts APIのtextパラメーターを利用すると、ダイナミックにフォントのグリフを削減できます。本来はファイルサイズを軽減してモバイル向けに最適化するというような目的で設けられているパラメーターのようですが、これを利用して&だけ他のフォントから持ってくるなどということができます。昔どっかで書いた奴の焼き直しです。 Demo: Google Web Fonts' text Parameter このデモではOpen Sans Condensedをベースにして、&だけRochesterで置き換えています。 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rochester&text=%26"> <link rel="stylesheet" href="http://fonts
M+ * Latin
Webフォント遊びの一環として、M+ Outlineの1cと1mのRegularからLatin付近、つまり半角英数と記号を抜き出してサブセット化し、WOFFを作ってみました。M+ Outlineの半角英数はかなり好きなので、Windowsのブラウザでもそのあたりを満喫できたらなぁという感じです。 Demo: M+ 1c Latin & M+ 1m Latin WOFFファイルとして公開するのは後のメンテナンス的に面倒そうなのでData URI化してHTMLにぶち込んでいます。欲しい人はアレをアレしてアレからアレで保存してください。ライセンスはM+ Outlineと同じです。 Google Web FontsからPT Sansなどを使うくらいなら、メイリオやヒラギノとの相性的にM+ 1c Latinの方が良い感じなんじゃないでしょうか？ Regularだとちょっと負けるかもしれないので、Me
Style Guideを作った
今年の24 Waysの7日目のエントリー、Front-end Style Guidesを読んで触発されたので、このサイトのStyle Guideを書いてみました。元々テストするためのHTMLを書いてからスタイルを書くという手順をとっていたので、文言を無意味なLorem Ipsumからスタイルの簡単な解説文に変えただけですけど。 また少し前からCSSにコンパイルする前のSCSSファイル群をGitHubで公開し始めたので、コードそのものについてはそっちを参照すると、CSSにおいてもSCSSにおいてもなにか発見があるかもしれませんね。例えばSCSSでの論理的なファイルの分割とインポートであるとか。normalize.cssをベースにした形で書き直し終わったので、リセット系から乗り換える場合の参考とかにもなるかもならないかも。 こういう形のスタイル解説ならテストが即ドキュメントになるので、未来の自
Google Web Fontsにあるお気に入りのフォント5つ - Weblog - hail2u.net
Google Web Fontsのフォント登録数も随分増えてきてチェックするのが大変になってきました。一応絞り込みとかそういう機能もありますけど、Typekitのようにかゆいところに手が届く感じではありません。そこで……というわけではないですけど、なんかの参考にでもなればと僕のお気に入りを5つだけ簡単な説明付きで紹介してみます。 Demo: Five Favorite Google Web Fonts Amaranth Amaranthはゆるやかにカーブのかかったグリフが特徴です。比較的小さなサイズからその特徴がはっきりと出るので、ロゴ以外にもナビゲーションなどでも使えると思います。斜体ではそのゆるやかなカーブがセクシーに強調され、また違った味わいがあります。 Arvo Google Web Fontsにはあまりスラブ・セリフがないですが、Arvoは唯一まともに使えそうなそれです。評価の高
:targetでpadding-top
ちょっと何を言っているのかよくわからないですね。つまり:target擬似クラスでpadding-topを使うことによって、アンカーでページ内ジャンプ(<a href="#foo">...</a>とかで飛ぶやつです)した時に上部に余白をとってやろうというアイディアです。こうすることによって上部にメニューを固定していても重ならなくすることができるでしょうし、そうでなくても多くの場合ジャンプした先のコンテンツに対してキレイに余白が確保できるんではないかと。 Demo: Refine Anchor Jump with :target Section #4に飛ぶリンクはデフォルトのもので、描画領域の上端に見出しが来てしまっています。Section #7に飛ぶリンクが:targetを使って改良したもので、上部に少し余白が確保されていることと思います。 #test7:target { padding-t
mit-license.org
Open Source InitiativeのMITライセンスのページのURLを使ってMITライセンスと明示している人は結構多いと思います。ライセンス全文コピペするの面倒ですしね……。ただその場合は権利者の名前等を予め書き、ライセンス条項については以下のURLを参照……などと注意書きも含めた方が無難です。そういうのを「忘れるし！ 面倒だし！」と思ったRemy Sharpがmit-license.orgというウェブサービスを作ってくれました。 登録するとユーザー名をサブドメインとしたURLが確保されます。例えば僕の場合はhail2u.mit-license.orgです。このページを見るとわかるように権利者の名前と発行年、オプションとしてWebサイトのURLにリンクを張れたりもします。 curlでJSONを送りつけるという方法でも登録できるみたいですが、JSONファイルの登録とバッティングした
Reset vs Normalize
CSSの記述法として、ブラウザごとの違いを「Reset」して一から指定するという方法が長らくマジョリティを占めていました。まだまだその方向で書いている人が大半ですが、「Normalize」するという方法を採る人達も増えています。なぜリセットではなくノーマライズなのかというような話をなんとなくダラダラ書いてみたい感じです。 以下、リセットはYUI 2のCSS Resetを、ノーマライズはNormalize.cssをイメージして読んでみてください。 リセットとノーマライズ まずは両者の違いから。リセットはなかったことにするというもので、ほぼ全ての要素に対するスタイル指定を排除しブラウザごとの違いを吸収するものです。対してノーマライズはブラウザのデフォルト・スタイルシートを生かしつつ、各ブラウザ間の挙動を擦り合わせるものです。リセットが負の方向で統一しているとすれば、ノーマライズは正の方向で統一
lorempixel
簡単なクエリー・パラメーターで好きなサイズのランダムな画像を返してくれるlorempixelというウェブサービスを見つけた。主にウェブサイトのプロトタイピングに使うことになると思う。多少遅い気もするが、それに目をつぶってでも使いたくなる簡便さ。 クエリーは非常に簡単で、横320px・縦180pxのランダムな画像が欲しいなら以下のようにする。 http://lorempixel.com/320/180/ このエントリの最初の画像はこのクエリーでリクエストしたもの。指定できる縦横のサイズは最大1920pxまでのようだ。縦横のサイズ以外にもいくつかパラメーターがあり、 http://lorempixel.com/320/180/abstract/ とテーマ名を最後に付けると、 テーマで絞り込みができる。 http://lorempixel.com/g/320/180/ 縦横サイズの前にgを挟むと
ナビゲーションのアクティブな項目をマークする
ウェブサイトのナビゲーションでよくある、アクティブ、つまりユーザーが閲覧中のページに対応する項目にマークを付ける場合、画像ファイルでやることが多い。最近はCSSグラデーションを使ってアクティブな時にへこませたような効果を与えたりすることもあるが、よく見かける三角のマークを付けるとなるとやはり画像で……となってしまう。しかし、単純な形に限ってなら枠線付きの吹き出しでも利用した:before又は:after擬似要素を使えば実現できる。 Demo: Pure CSS Navigation Indicator CSSのコードは吹き出しとほとんど変わらない。ただし、位置合わせの方法が異なる。 nav #example1 li a:after { margin: -8px auto 0 auto; border-top-width: 0px; border-right-width: 8px; bord
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
What Does It All Mean? - Dive Into HTML5の日本語訳
多くの人がDive Into HTML5のコンテンツの中で最も気になるであろう(X)HTML( 4)からHTML5への移行を題材として、HTML5の書き方や新しい要素などの説明したWhat Does It All Mean?の日本語訳、「結局どうすればいいの？」を公開した。前に二度全部訳そうと思って、言い回しの複雑さにさじを投げたが、今回はとりあえず自分が一番最初に熟読したWhat Does It All Mean?に絞って訳した。 この章は既存のウェブページのHTML5への移行を題材としているだけで、移行法についての解説とは少し違う。そう読んでもそんなに期待外れではないが、脱線が特に序盤に多いので、細かいことに興味はないならHeadersあたりから読んでも良いかも。もちろんこの文書はHTML5の完全な解説ではないので、例えばaside要素やsection要素の詳しい説明などは欠けているし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
