ウェブ・フォントの読み込み - Weblog - Hail2u.net
ウェブ・フォントも完全に行き渡り、今はどう効率的に配信するかについて多くの時間を割くようになった。Google Fontsの低め安定路線を見限り、TypeKitやFonts.comへ鞍替えする人々も増えた。それと同時に自前でホスティングする人々も徐々にその数を増やしており、どれが最適解なのか一応の結論が出るにはもう少しかかるだろう。まず、ウェブ・フォントの読み込みにおいてどのようなアプローチがあり、どのようなメリット、そしてデメリットがあるのだろうか。 TypeKit等に頼るにしろ、自前でホスティングするにしろ、もちろん最終的にはウェブ・フォントをブラウザーに送りつける必要がある。読み込みとはまさにその部分の話だ。話がややこしくなるので、多様な実装を意識した安全な書き方などについては触れない。 普通に@font-face定義を利用 @font-face定義をただ普通に書く場合のメリットは、
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
URLUtils.hash (location.hash)とその返す値 - Weblog - Hail2u.net
URLUtilsインターフェイスのブラウザーにおける実装であるLocationオブジェクトのhashプロパティーによりURLのフラグメント識別子(と#)を取得・代入できる。最近のブラウザーは非ASCII文字列もURLエンコードせずに扱えるようになっているが、この辺りの挙動がFirefoxだけ少し違うようだ。それはhashプロパティーの返す値で、常にデコードされた形で返ってくるようになっている。 例えば適当なウェブページで開発者ツール(的なもの)を開き、コンソール(などと呼ばれてるもの)で以下を実行してみる。 > location.hash = '#' + 'あいうえお' < "#あいうえお" > location.hash < "#あいうえお" > location.hash = '#' + encodeURIComponent('あいうえお') < "#%E3%81%82%E3%81%8
Bitbucketでの執筆
WEB+DB Press Vol.81の特集はBitbucketでプライベート・リポジトリを使って書いた。最初はメールで詰めて、書く段階になってBitbucketへ作業場を移すという形だった。Gitを使った執筆のメリットはそこかしこで色々と触れられているので、実際に体験してのネガティブな感想を少しだけ書く。 最初からBitbucketが良かった メールだと後で読み返すのが非常に面倒くさいので、トピックごとに整理しながら最初からプライベート・リポジトリでやれれば良かった。特に書き始めから最初のレビューまでちょっと間が開いたので、記事がメールでのやりとりと矛盾しているかどうかを確認するのが大変だったため、参照しやすい形で残っていれば……と強く感じた。 また、トピック・ベースでの作業なら粒度も下げやすかったと思うので、コミットを追うのも楽だったはずだ。 レビュー BitbucketのDIFFビュ
CSSで画像を六角形にくり抜く - Weblog - Hail2u.net
Swarmで使われている六角形のプロフィール画像はちょっと流行りそう。CSSだけで行えるように考えておくとなんかの時に役に立つはず。難しく考えずに擬似要素で三角形を作るテクニックを反転させて重ねるだけでも良かったけど、CSSグラデーションで重ねた方がフレキシブルに作れた。 Demo: CSS HEX Clip 切り抜きはCSSグラデーションを上に重ねて行うので、何らかの要素で括る必要がある以外には特別なマークアップは必要ない。 .hexclip { display: inline-block; position: relative; line-height: 1; background-image: linear-gradient( 30deg, #fff 0, #fff 18%, transparent 18%, transparent 100% ), linear-gradient(
CSSで卵形と星形に切り抜く
CSSグラデーションを使った画像切り抜きの続編。卵形と星形では六角形みたいな三角形で端をカットすれば切り抜ける形と違ってもうちょっと工夫が必要になる。その工夫というのはbackground-sizeプロパティーでのサイズの制限。 Demo: CSS Egg Clip radial-gradient()では楕円は描くことができるけど、それを歪めるようなことはできない(と思う)。ので、径の違う楕円を半分ずつ組み合わせて卵形を作ることになる。基本的な部分は六角形のものと同じ。 background-image: radial-gradient( ellipse farthest-corner at 50% 100%, transparent 0, transparent 70%, #fff 70%, #fff 100% ), radial-gradient( ellipse farthest-c
ノイズありテクスチャをSVGで
PNGのようなビットマップ形式の方が向くサブトなんとかなノイズ付きのスキューなんとかなテクスチャを、SVGのfilter要素でfractalNoiseを利用して生成する試み。SVGだからというか、filterで生成する形なのでスケーラブル、ノイズの分布が平均的なのでおおまかにリピータブルにもなる。上記画像もSVGなのでそのソース見るとわかる。 Demo: SVG Noisy Background filter要素でfractalNoiseを利用しランダムにノイズを与えた矩形とそれに混ぜる単色透過付きの矩形を重ねて実現する。実装任せなのでソースはコンパクトで、URLエンコードのData URIなら557バイトで済んだ。密度の違うノイズを重ねて分布を偏らせることもできるはずなので、慣れてきちんと作れるようになったならサイズ的なメリットは大きい。 Demo: SVG Noisy Backgrou
Fragmentions
FragmentionsというChrome拡張がある。URLに##link-to-somethingと2個の#に続けて任意の言葉を指定すると、URLのコンテンツ内にあるその言葉へリンクを張れる。コンテンツ提供者が特別なマークアップを行わないでもページ内リンクが実現できるというわけ。Adactioの同名の記事で知った。 もちろんこの拡張が必要なので、どこでもだれでも使えるというわけではないけど、標準化されたらすごく良さそう。Media Fragments URIの文書向けみたいな感じと捉えるとわかりやすいかも。ID振られてない文書から引用する時にもきっと使いやすい。ソーシャルブックマークでブックマークする時にもうまく機能しそうな気がする。ブログのコメント機能に組み込んでも面白そう。 同様な仕組みとしてCSSセレクターを使ったページ内リンクの仕組みも考えられているらしいが、人として理解しやすい
アクティブなナビゲーション項目とmark要素
アクティブなナビゲーション項目、つまり現在のページへのナビゲーション項目はclass属性を使ってactiveなどと付けられることが多い。特に間違ってはいないんだけど、いまいちピンとこない。というかしっくりこない。大体は流されてそうしているけど、このウェブサイトではmark要素を使ってる。 HTML5仕様ではmark要素は以下のようになってる。 The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. mark要素が含まれる要素のコンテキストとは別のコンテキストでの関係性をハイライト等で表したい時に使うと解釈してる(同じコンテキストならemやstrong、そしてb
wildfire.vimでVim力を下げる
wildfire.vimという、カーソルがある辺りのテキストオブジェクトをなんとなく選択してくれるVimプラグインを使い始めた。Vim力が下がる代わりに魂の平穏が得られる。ような気がする。 デフォルトではノーマル・モードで<Enter>を押すとカーソルのある辺りのテキストオブジェクトを選択してくれる。HTMLファイルを編集中なら属性値の上で発動させると、クオートの間を選択してくれる。その状態でもう一回<Enter>を押すとその上位にあるテキストオブジェクトをなんとなく選択してくれる。属性値のクオートの間を選択した状態だと、HTMLタグで括られた全体(など)まで拡大される。 逆方向に縮小することも出来るので、適当にタカタカ<Enter>を押して拡大しつつ、広げ過ぎたら<BS>で狭めるみたいな感じで使えて、とてもいい加減に使える。僕は狭める方だけを<S-Enter>に変えて、サクサク感を上乗せ
Chrome 33でユーザー・スタイルシートが削除 - Weblog - Hail2u.net
色々仕込んでたのが全部消えてびっくりしたけど、どうやらChrome 33からユーザー・スタイルシートの機能が削除され使えなくなったようだ。Stylish使うか、ユーザー・スクリプトで強引に仕込むしかない。フォントの書き換えなんかはユーザー・スタイルシートでやりたい……。 ユーザー・スタイルシートを必要とする人が少ないのはわかるんだけど、ドキュメントに直接ではない形でCSSを注入する仕組みはあった方が望ましい気がする。ユーザーによる変更が、ページ制作者に認識できる、しやすい(style要素を数えるだけ)、やろうと思えば削除できるというのはアレな感じする。 Firefoxに舞い戻りたくなるけど、アレなのでWindowsのSafariをもう一回出して欲しい。あ、Opera使えば良いのか。
Chromeのデベロッパーツールのフォントを大きく
12pxでコードを読むの辛い感じがしてきたので、ユーザースタイルシートで大きくした。Chrome 32からデベロッパーツールに振られるIDとかも変わったので、そういう時の調べ方も含めてメモに。 /* Developer Tools */ #-blink-dev-tools .monospace, #-blink-dev-tools .source-code { font-size: 14px !important; } これでスタイルの検証ペインやコード・エディター、Networkのヘッダー検証ペインなどが14pxで表示される。一部行間が12pxに合わせてハードコーディングされているところがあって、ちょっと読みづらくなったりもするので、好みでもっと調節しても良いかも。 デベロッパー ツールなどのHTMLでできてるけど右クリックから要素を検証とか出来ないものも、やり方を知っていれば比較的簡単
Webフォントの非同期読み込み - Weblog - Hail2u.net
Webフォントの読み込みは@importだと色々まずいので、主にlink要素を使って並列に読み込むわけだけど、これもまた貴重なHTTPリクエスト数を消費するとか、CSSのパース完了が少し遅れるなどあって、完璧な解というわけじゃない。それを非同期にWebフォント定義の含まれるCSSファイルを読み込むようにして、Webフォントのロードをページのレンダリングと並行して行わせるのはどうか、という試み。 非同期化することによりWebフォント定義の含まれるCSSファイルのリクエストとパースが、ページのレンダリングと並行して行われるようになる。head要素内でlink要素を直接書いた場合は、Webフォント定義の含まれるCSSのリクエストとパース後にページのレンダリングが始まることが多いので、体感速度(ページのレンダリングの開始までの所要時間)は向上する可能性が高い。 動的なlink要素の追加 いわゆるソ
ShiroKuro Social Icons v1.5
このWebサイトのフッターで使用しているアイコン画像(PNG)の高解像度とPSDのセットをZIPにまとめました。白と黒それぞれ256pxのPSDと256/128/64/32pxのPNGが入っています。正方形に切り出してファイル名をちゃんと付けるのが面倒だったので縦長のスプライト画像です。 Download: ShiroKuro Social Icons v1.5 含まれるアイコンは、 フィード メール Webサイト Twitter はてなグループ GitHub Flickr Last.fm Delicious はてなブックマーク Facebook Wufoo Amazon Pinterest 以上の14種類です。増える予定はありません。 諸事情によりパブリック・ドメインやCreative Commonsにはできそうもなかったので、簡単な使用条件だけを同梱しておきました。リサイズとは言えない
たった一行で人生が変わった.vimrcでの設定とその意味 - Weblog - Hail2u.net
僕はVimを使うまでは秀丸エディタを長いこと使用していました。両者の間に設定の項目数やキーバインドに割り当てられる機能に大きな差があるとも思わなかったので、使い始めた当初は「そんな言うほど高機能でもないよなー」とか思っていました。しかし色々なプラグインを試したり、様々な設定を.vimrcに書いているうちに、Vim (やEmacs)がその他エディタと決定的に違うのは設定の豊富さではなく、設定の自由さがもたらすアプローチの多様性なのではないかと考えるようになりました。というわけでそういう設定の自由さを最初に実感した話をVim Advent Calendar 2011の6日目のエントリーとして書かせてもらいます。 昨今のWebサイトではCMSなどを利用することが多く、共通のHTMLコードはテンプレートとして作成されます。その場合そのテンプレートの利用されるパスが様々な場所や階層になりうるので、例
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
