pixivのCSSで使われるクラス名ルールという命名規則の記事を読んでいた。初見では大規模だとBEMの衝突が絶対に起きない書き方の方が優れているように思えた。しかし衝突するであろうことに警報を出すという形にゆるくすることで、開発者たちに自由を与えるというような目的でこうなっているようだ。ちょっと興味深い。 規模が大きくなると制約を厳しくして安定性を重視する一辺倒だったが、こういう自由さをうまく提供しようという考え方をすることはあまりなかった。具体的にも、変更されることがあまりない、またはわかっている人だけが行うひとまとまりのルートにのみ特殊な命名(_で始める)というのはバランスが良さそうに思える。 コードだけを見てみるとうまくいっているというのは少し驚く。_で始まるところはあまり触らない人と_で始まるところを触る人、と人的リソースが能力や職掌に応じてうまく振り分けられているのかなと想像して

Appleの新ウェブサイト(2014年9月)では狭い画面の時にグローバル・ナビゲーションを出す二本線のアイコンが表示される。それをタッチするとナビゲーションが表示されると同時に回転しながらバツ印に変化する。同じようなアニメーションをCSSでやってみると意外に面倒くさかった。 Demo: Sandwich 二本線は以下のように擬似要素を2つ使って作った。コンテナーに対して幅を半分のサイズ、高さを6%とした。サイズと位置は全て%で統一したので、コンテナーの幅と高さを指定すれば以下のCSSは変えることなくスケールする。 .sandwich::before, .sandwich::after { box-sizing: border-box; display: block; position: absolute; left: 25%; width: 50%; height: 6%; content

wildfire.vimという、カーソルがある辺りのテキストオブジェクトをなんとなく選択してくれるVimプラグインを使い始めた。Vim力が下がる代わりに魂の平穏が得られる。ような気がする。 デフォルトではノーマル・モードで<Enter>を押すとカーソルのある辺りのテキストオブジェクトを選択してくれる。HTMLファイルを編集中なら属性値の上で発動させると、クオートの間を選択してくれる。その状態でもう一回<Enter>を押すとその上位にあるテキストオブジェクトをなんとなく選択してくれる。属性値のクオートの間を選択した状態だと、HTMLタグで括られた全体(など)まで拡大される。 逆方向に縮小することも出来るので、適当にタカタカ<Enter>を押して拡大しつつ、広げ過ぎたら<BS>で狭めるみたいな感じで使えて、とてもいい加減に使える。僕は狭める方だけを<S-Enter>に変えて、サクサク感を上乗せ

Webフォントの読み込みは@importだと色々まずいので、主にlink要素を使って並列に読み込むわけだけど、これもまた貴重なHTTPリクエスト数を消費するとか、CSSのパース完了が少し遅れるなどあって、完璧な解というわけじゃない。それを非同期にWebフォント定義の含まれるCSSファイルを読み込むようにして、Webフォントのロードをページのレンダリングと並行して行わせるのはどうか、という試み。 非同期化することによりWebフォント定義の含まれるCSSファイルのリクエストとパースが、ページのレンダリングと並行して行われるようになる。head要素内でlink要素を直接書いた場合は、Webフォント定義の含まれるCSSのリクエストとパース後にページのレンダリングが始まることが多いので、体感速度(ページのレンダリングの開始までの所要時間)は向上する可能性が高い。 動的なlink要素の追加 いわゆるソ

CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な気がする。Disallow IDs in selectorsではIDの問題点として以下のようなものを取り上げている。 However, IDs have a downside: they are completely unique and therefore cannot be reused. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス

配列をシャッフル、つまりランダムに要素の位置を入れ替えるというのを、sortメソッドを使ってやってみたのだけど、明らかにダメダメなものになってしまった。その後、あーでもないこーでもないと考えたのだけど、算数が得意すぎて頭が痛くなった。ということを某所でぼやいたらはてのくんがコードを見つけてくれた。どうやらFisher-Yatesという有名なアルゴリズムでやると良いらしい。 最初に書いたコードは、 var a = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9); a.sort( function (a, b) { return Math.ceil(Math.random() * 3) - 2; } ); というもの。sortメソッドは、パラメータに与えられた関数が負の値・0・正の値を返すことによって要素の順序を決定するので、その関数がランダムに値を返せばランダ

スクリーンサイズに応じたフォントサイズの変更はかなり読みやすくなるアイディアだと思っていて、ここでもずいぶん前から使っている。が、ブラウザーのズームと相性が非常に悪く、縮小したつもりが文字サイズが大きくなったみたいなことがよく起こる。このウェブサイトでもネタ元のウェブサイトでも起こる。 最初はMedia Queriesのブレークポイントでem単位を使うとおかしくなるのかと思ってて、その気になればすぐ直せると思ってたけど全然違った。ズーム機能によって閲覧領域自体が仮想的に変化するということが原因だった。 以下の様な簡単なフォントサイズ調節CSSを例にする。数字にはあんまり意味はない。 @media (min-width: 960px) { html { font-size: 20px; } } このCSSが指定されているHTMLページを900pxの幅で開いてからズームで90%に縮小するケース

CSSの記述法として、ブラウザごとの違いを「Reset」して一から指定するという方法が長らくマジョリティを占めていました。まだまだその方向で書いている人が大半ですが、「Normalize」するという方法を採る人達も増えています。なぜリセットではなくノーマライズなのかというような話をなんとなくダラダラ書いてみたい感じです。 以下、リセットはYUI 2のCSS Resetを、ノーマライズはNormalize.cssをイメージして読んでみてください。 リセットとノーマライズ まずは両者の違いから。リセットはなかったことにするというもので、ほぼ全ての要素に対するスタイル指定を排除しブラウザごとの違いを吸収するものです。対してノーマライズはブラウザのデフォルト・スタイルシートを生かしつつ、各ブラウザ間の挙動を擦り合わせるものです。リセットが負の方向で統一しているとすれば、ノーマライズは正の方向で統一

SVGやMedia Queriesのサポートのこととか考えて嫌になってきたので、<link media="only all">でばっさりすることにした。media="not print"にした時に思いつかなかった……。456 Berea Streetでも@mediaディレクティブの方でonly screenを利用することで簡単な分岐を実現するというほぼ同じアイディアがつい最近取り上げられており、こちらもかなり便利。 <link rel="stylesheet" media="only all" href="style.css"> とするとonlyキーワードを解さないブラウザーは読まなくなる。media="not print"と違って印刷用スタイルシートを混ぜても大丈夫。 The keyword ‘only’ can also be used to hide style sheets fro

ぶら上げるってなんだ。段落の一文字目だけを左に飛び出して配置するというテキスト・レイアウトの話。margin-leftプロパティーで負の値を使っても良いのだけど、文字によって要調整なので面倒くさい。position: absoluteを使う場合は、親でposition: relativeが必須になるのでこれもちょっとアレ。他にもいくつかあったと思うけど、floatとmargin-right: 100%を組み合わせて行うのが一番位置合わせが簡単になる。 Demo: Hanging :first-letter 英文ではメジャーなドロップキャップをアウトデントするもの。たまに見る気がするけど気のせいな気もする程度のタイポグラフィー知識……。 .test::first-letter { margin-right: 100%; margin-bottom: -999em; float: right;

段落の区切りに使うhr要素をちょっと凝ったデザインにするという話は以前書きました。似たような話はCSS-Tricksでも最近取り上げられていますね。しかしこれらはhr要素でのテクニックです。では、例えばsection要素の最後にこういったちょっと凝った感じの区切り線をつけるにはどうすれば良いのでしょうか？ 結論としては::beforeと::after擬似要素を組み合わせて頑張るということになります。例えば上記CSS-Tricksのサンプルの最後の例やCekerholicなどで見られるセクション記号(§)の左右に罫線がつくようなデザインを作ってみます。 Demo: Section/Paragraph Divider hr要素の場合は結構簡単なものです。 hr { border: none; border-top: 1px dotted #666; position: relative; he

Chrome 20からviewportを制限または拡張できるOverride device metricsというオプションがデベロッパーツールについていたことを今さら知った。キモはどっちかって言うと自分の使っているマシンよりも高解像度な環境をFit windowオプションでなんとなくざっと確認できるとかそっちなのかも。2048x1536とかまぁアレでコレでソレですよね。20からなので2012-05-17現在の安定版にはまだない。 縦横サイズを入力する横に付いている⇄ボタンはデバイスの回転……というか縦横入れ替えのボタン。 もうひとつchrome://inspect/とか言うのが結構前からあったのも知った……。昔は右クリックからとかで簡単にできてたデベロッパーツールのインスペクトとかそういうのが簡単にアクセスできる。ああいうの覗くとちょっとだけFirefoxのDOM Inspectorを思い

リストを横並びにしてセンタリングというのはよく使う。ただよく使う(われる)わりには「これ！」というようなテクニックがないような気がする。inline-blockで並べた場合は項目の間に隙間ができ、floatで並べた場合はセンタリングがトリッキーすぎる。気分で色々使い分けてたけど最近はdisplay: inline-tableをよく使うようになって、これで良いかなーという感じ。 <nav class="paging"> <ul> <li><a href="foo">Prev</a></li> <li><a href="bar">Next</a></li> </ul> </nav> というようなマークアップの一般的なページング・ナビゲーションだと、 .paging { text-align: center; } .paging ul { display: inline-table; } .pa

v6.15とかでちょっとem単位を使うようにした話を書いた。そこで書いたのは「描画領域に収まるレイアウト」ではなくて「文章の収まりを意識したレイアウト」にしたかったとかそういう話だった。id:vantとかu:studiomohawkなどがブックマークしてたThe EMs have it: Proportional Media Queries FTW!ではもうひとつのem単位を使うメリット、Media Queriesでem単位を使うとユーザーのズーム(スケーリング)に対応できる点を解説していた。 em単位をMedia Queriesで使うとpx単位と違いユーザーのズームが考慮されて計算される(ただしウィンドウサイズを変更した時などとは違い即座に反映されるわけではないのでリロードが必要)。1emが16pxな環境で200%にズームしていると1emが32px相当になり、それを基準にMedia Qu

Twitter APIのusers/showは認証なしで手軽に最新のツイートのみを拾えるので、JavaScriptでウェブサイトにツイートを表示するなどといったケースに適しており、使っている人も多いと思う。が、最新のツイートがリツイートの場合はAPIが返すJSONからstatus以下がバッサリとなくなってしまうため、最新のツイートを拾うことができなくなってしまう。これに対処するためにもっと柔軟にツイートを拾えるstatuses/user_timelineを使ってcount=1にした……が、それだけではうまくいかなかったという話。 最新のツイートだけを拾いたかったので、単純にcount=1を指定してみた。 http://api.twitter.com/1/statuses/user_timeline.json?screen_name=abcde&count=1 しかし、最新のツイートがリツイ