普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
フォントの読み込み完了を検知する
TypeKitとかがやってるWebフォントの読み込みが終わったらhtml要素にクラス名を振るアレの話。TypeKitがオープンソースでリリースしているWebFont Loaderを使う方法が安全で安定。Googleがホスティングしているのもあるので手軽でもある。でも読み込み完了の検知以外にも機能があってパワフルすぎる気がするので、Adobe Blankを使って自前で書いてみることにした。 Adobe Blankのサイズ削減 Adobe Blankはそのまま使うと30KB以上ある。読み込み完了検知だけなら幅0のグリフが1つあればそれで良いので、まずはサブセット化してサイズを抑えることから。aだけのWOFFなAdobe Blankを作ればちょうど1KBくらいになる。 Download: adobe-blank.woff @font-face定義の追加 外部リクエストにすると意味が薄れるのでDa
Sassで文字列の置換を行うユーザー定義関数
Sass 3.3で入る予定の文字列関数の使い道を色々考えているけど、まったく「これは！」みたいなのが思いつかない。なので、実際に利用しがいがあるかどうかは置いておいて、色々作ってみようかなと考えている。まずは文字列の置換。 // str-replace() - Replace in a string // // @param {string} $string String that you want to replace // @param {string} $substr String that is to be replaced by `$newsubstr` // @param {string} $newsubstr String that replaces `$substr` // @param {number*} $all Flag for replacing all (1+)
Node.jsパッケージ: xml2js
Node.jsでRSSを処理するの何がいいのかなーと色々試していた。その中で一番考えなくて済みそうなのがxml2jsだった。XMLをparseString()に渡すと、コールバックの引数にオブジェクトに変換して渡してくれる。 このウェブサイトのフィードをパースして標準出力に吐くならこんな感じで簡単。 var http = require('http'); var parseXML = require('xml2js').parseString; http.get('http://hail2u.net/feed', function (res) { var chunks = ''; res.setEncoding = 'UTF-8'; res.on('data', function (chunk) { chunks += chunk; }); res.on('end', function (
jQueryプラグイン: Harmonize Text
親要素の幅に収まるようにフォントサイズを変更するjQueryなJavaScriptコードを、Harmonize Textという名前のjQueryプラグインにしました。FitTextを見て「コード短くて凄い！」とか思ったんですけど、自分の求めているものとはずいぶん違ったので、自分で書いたのをjQueryプラグインにしようというモチベーションが湧きました。 Repository: hail2u/jquery.harmonize-text 内容はリサイズに対応するようにした以外は特に変わっていないので、スクロールバーの有無によってぴったり収まらないバグは直っていません。リサイズは重いし、遅延させた方が良さそうな気がするので、そこら辺のオプションを指定できるようにしようかなと考えています。-1を引数として渡すとでリサイズに対応しない、正の整数ならそのミリ秒だけ遅延させてからリサイズ処理を行うとかで
枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！ みよう！ みよう！ Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;
iOSのホーム・スクリーンのアイコンをCSSでパクる
iOSはホーム・スクリーンにアプリケーションのアイコンを置く時、いくつかエフェクトをかけて配置する。そこら辺の話はiOS Human Interface Guidelinesに載っているので詳しくはそちらを参照。それぞれのエフェクトはCSS3ならできそうな感じのものだったので、パクっと。 Demo: iOS Home screen icon effect with CSS デモでは左から順になし→角丸→影→反射光とエフェクトを加えていっている。 iOSがかける(ような)エフェクトはそれぞれ、 角の丸め: border-radius 影: box-shadow 反射光: radial-gradient() で(ほぼ)実現することができる。といっても角の丸めと影については全く難しいことはなく、 .shadow { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 1)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
