はてなブックマーク

BEMおよびその命名派生としてのMindBEMdingで使われるfoo__barやfoo--barというようなハイフン、アンダースコアを重ねた命名はキモいし冗長だと嫌われがちだ。僕自身も初見ではそのように思っていた。しかしこれは本当に良いアイデアだと思うし、実務でも僕は採用している。 CSSの設計、その命名のときに考えるのは、それがいかに明白であるかということと、汚染されるリスクを抑えられるか、ということだ。ワードを明確に区切ることによって、その機能・カテゴリを区別するという点においては、別に単一記号であろうが、キャメルケース、スネークケースであろうがなんでもいいかもしれない。しかしスタイルが汚染されるリスク、という点でこの珍妙な命名は優秀だ。 プロジェクトに関わる開発者が多いほど、その書き方にブレは生じる。もちろんコーディング規約なり、スタイルガイドなりであらかじめルールを共有しておけば

23 Jan 2013 WebkitもといMobile Safariで、ビットマップ画像をtransform: rotate(deg)したときにフチがジャギー出てしまう現象についてのお話。とりあえず、iPhone+iOS前提で説明していく。 transform: rotate(10deg)みたいな半端な角度でrotateさせたときに確認できる。 transform: rotate(45deg)単位の場合にはこのようなジャギーはほぼ無い。ちなみにWebkitとタイトルにあげたが、新しめのデスクトップのGoogleChromeやSafariでは、中途半端な角度でもジャギーは見られない。古いものだとジャギーが出るはず。正確なバージョンで確認できていないが、それも今回の方法で解決するかもしれないし..しないかもしれない。 デスクトップの話はさておき、Mobile Safariとしての話に戻る。 結

# コメント。これは無視されます *.a # .a ファイルは無視 !lib.a # しかし、lib.a ファイルだけは .a であっても追跡対象とします /TODO # ルートディレクトリの TODO ファイルだけを無視し、サブディレクトリの TODO は無視しません build/ # build/ ディレクトリのすべてのファイルを無視します doc/*.txt # doc/notes.txt は無視しますが、doc/server/arch.txt は無視しません

01 Dec 2012 Joshua Hibbert氏の記事、Don’t Forget the CSS Value ‘inherit’ - Joshua Hibbertでは忘れられがちなinheritによる値の継承について説明している。 inheritを使えば親要素のスタイルの継承ができるが、これは要素とその擬似要素の関係においても、擬似要素が継承させることができる。 で、この記事における本題としては、Bonus transition trickとして紹介されている、inheritを使えば、擬似要素でもCSSアニメーションが有効になるという話のこと。 擬似要素では”基本的に”アニメーションが無効となる Hibbert氏の記事にあるbasic sampleを見てもらうとわかるのだが、右側（赤い方）では擬似要素に大しては継承を使っておらず、そのためアニメーションになっていない。大して一方では擬

30 Nov 2012 デザインカンプとして作られた画像のグラデーションをCSS化するために、PhotoshopやらFireworksで色を抽出してつくるは面倒くさい。単純にfromからtoまでの色を指定するだけであればそうでもないかもしれないが、すこし複雑な形状をしたグラデーションだと、正確に再現するのはむずかしい。 ただPhotoshopであれば、.psdファイル上でスタイルを取得するスクリプトがあったり、Fireworks CS6でもオブジェクトのCSSを取得できるらしい。 しかしこれらのような元のデザインデータが無いとか、基本的なフィルタのみで作られていないオブジェクトであればうまく抽出することができないこともあるので、画像（画像ファイル）そのものから抽出するツールを紹介する。 画像ファイルをアップロードして抽出する Ultimate CSS Gradient Generator

29 Nov 2012 ターミナルからSublime Text2を起動する OS X Command Line - Sublime Text 2 Documentation ここ見れば分かるって話なんですが、なんのこっちゃ、っていう人もいるでしょうから、日本語で解説していくことにする。 CSSプリプロセッサをコマンドラインツールで実行してたり、Gruntを使い始めたー、GitもGUIは使ってませんー、という人で、なおかつSublime Text2を使っている人、という狭いんだか広いんだかわからない層向けになるのはご容赦ください。 Sublime Text2でプロジェクトディレクトリをどう展開してますか？ 多くの場合、さぁ作業するぞ、となると該当のプロジェクトの作業ディレクトリの中にあるファイルをいじくるわけですが、Sublime Text２ユーザーの人はどのようにはじめてますか？ ディレク

28 Nov 2012 Sass、LESS、StylusといったCSSプリプロセッサには、色を扱うビルトインファンクションがある。 それらの機能はプリプロセッサごとにさまざまだが、共通して存在するファンクションの一つとして、lighten(color,percentage)、darken(color,percentage)といった引数に指定した色を明るく/暗くするというのがある。 明るく/暗く、といっても単純に明度を操作するのか、色々とごにょごにょしているのかは分からないが、とりあえず同じ書き方をするなら同じ値を返すだろう、という期待をしたくなるが、実際のところどうだろうか。 ところでこれらの使い所はある？ 結論からいうと、実務では色系のファンクションなかなかお世話になることはない。というのも現状Photoshopのデザインカンプを元に、そのカンプ上の色を抽出して、文字色や背景色とする。

27 Nov 2012 Zen CodingはHTML/CSSなどを簡易的な記法で展開・記述することでコーディング効率を上げるツール。Zen Codingについては、公式のGoogle codeのページか、以前に書いた記事を参照してもらえればと思う。 がしかし、このZen CodingはEmmetという名前でバージョンアップされているので、実際にZen Codingをこれからはじめる！という人は、Zen Codingではなく、Emmetをお使いのエディタなどにインストール、セットアップする必要がある。 Zen Codingをほどほどに使っている自分も、使っているSublime text2のプラグインとしてEmmetに移行することにした。 Zen codingパッケージのDisable/Remove Sublime text2のパッケージ（プラグイン）管理については、他の方が書かれた記事など