日本語のウェブサイト向けのフォントスタックの現状と無難な設定についてまとめた。sans-serif、serif、system-uiのそれぞれの総称フォントファミリーに基づいて、主要な端末（Windows、Mac、iOS、Android）のフォントの搭載状況を整理する。 sans-serif ま…

前回の記事で紹介した:focus-ringのポリフィルはイマイチだった。element.focus()で制御したときにいい感じにならないというつぶやきを見て知った。 具体的な例として、モーダルを閉じた後の挙動について考えたい。 モーダルを閉じた後は、フォーカスはモー…

次のようなスタイルが指定されたサイトを見かけることがある。 * { outline: none; } ボタンなどの要素をクリックしたときに、格好の悪いアウトラインが表示されてしまうのを打ち消したい、という意図だと思われる。 だが、上記のような指定をしてはいけない…

追記： IE以外の主要ブラウザでは scroll-margin-top が利用できる。 固定ヘッダーがあるサイトだと、ページ内リンクをクリックしたときに対象の要素が固定ヘッダーと被ってしまうことがある。 固定ヘッダーがあるサイトの例としてVue.jsとかBootstrapのドキ…

プロジェクトの雛形を雑に作ると開発でかなりストレスを抱えることになる。仮に小規模な静的サイトであっても。 とはいえ開発環境を作ることをがんばりすぎてもコストに見合わないこともある。コストを軽減するために各々ボイラープレートを作ってたりもする…

最近、Normalize.cssがいろいろ揉めてた。 ある日、Normalize.cssには純粋な正規化以外のコードは含むべきでないとして、破壊的な変更を含むリリースがあった。html { font-family: sans-serif; }やbody { margin: 0; }などのいわゆるopinionatedなスタイル…

昨日書いた記事はあまりに雑だった。それに対するつぶやきを見て、思考が整理されたので改めて書く。 ピクセルパーフェクトが正しくないのは、カンプの時点ではまだデザインは未完成であるからだ。つまりは、未完成なデザインをそのまま形にすることを強制し…

カンプは実装するために作る中間成果物 実装時にはスタイルにブレがあると都合が悪い。デザインとしても破綻している 余白やフォントサイズのルールなど、デザインツールでは一律再現するのが難しい スタイルシートという概念を持ってすることで、デザインツ…

スタイルはシンプルなものから宣言していく方が無駄がない。 レスポンシブデザインにおいては、小さい画面のほうがより簡素な画面構成であることが多い。そのため、小さい画面から順に大きい画面まで設計したほうが理に適っている。例えば以下のようなコード…

趣味で会社の人のサイトを作った。縦書きでレスポンシブなブログ。prismic.ioとNext.jsで作った。 ウェブデザインに縦書きを活かすことは難しい。部分的に取り入れることはできても、縦書きの文章を主要な要素として扱うのはかなり難がある。というのも、ウ…

ウェブサイトのタイポグラフィのルールは一貫性を欠いてしまいがちだ。 単純にページやコンポーネント単位でデザインしていると、その周辺の要素だけで判断することになるので、全体として見ると一貫性を失ってしまう。 僕が考える解決策は、コンポーネント…

font-familyのベストな書き方20XX年みたいな記事が毎年出るけど、実際のところケースバイケースで、唯一のベストな解があるというわけでない。なので個人的な理解に基づいたパターンの分類をメモとして書いておく。特に目新しいことはない。 日本語環境で、…

一般的にはアニメーションは高パフォーマンスであることが良しとされる。が、あえてFPSを下げたアニメーションにしたいことがあった。レトロゲームのような世界観を表現したいというやつだった。 tween.jsは、ユーザーがアニメーションの更新タイミングを制…

レスポンシブデザインの最適なブレイクポイントは何pxなのかという話題をよく見る。既存のデバイスのサイズを比較することで答えにたどり着こうとするアプローチがほとんどだが、それらは間違っている。 ブレイクポイントは、コンテンツの見た目が切り替わる…

本文のline-heightを基数としたVertical Rhythmは、値が大きくなりすぎるのでどうしても細かい調整がしたくなってうまくいかない。 それに悩んでいて@terkelに聞いてみたら、「本文のline-heightより細かい数字を基準にしてる、4pxとか。Material Designも多…

地味な土台の部分をきちんと作った上に、いわゆるエモさみたいなものが積み上げられた形のウェブサイトを作りたいなというのをずっと思ってる。 地味な土台というのは、アクセシビリティやパフォーマンス、サイト全体を通してのスタイルの一貫性など、ウェブ…

欧文はウェブフォント、和文はユーザーエージェントのデフォルトにするというのがベスト。 html { font-family: Lato, sans-serif; } というのも、ローカルの欧文フォントを指定するためにはプラットフォームごとにインストールされているフォントを把握して…

スプライトアニメーションをコンテンツの背景にフィットさせる - ライデンの新人ブログ こういうやつを複数回やりたかったのでmixinにした。普通にやるとキーフレーム名がかぶるので、mixinを呼び出すたびにIDをインクリメントさせるようにしたらいけた。 $_…

去年の今頃ってなにしてたんだっけって思ったら、倒れて手術してたんだった。これを機に、人はいつでも死ぬのでなんかやるなら早めが良さそうという気持ちになったんだった。 この頃の僕には、自分のフロントエンドの専門性を高めたいという目標があった。と…

const TWEEN = require('tween.js') const [tween] = [...document.querySelectorAll('.animate')] .map(el => { const state = {x: 0} return new TWEEN.Tween(state) .to({x: 300}) .onUpdate(() => { el.style.transform = `translate(${state.x}px, 0)` …

Browserifyでrequireじゃなくて単にconcatしたいときがある。UMD対応してないライブラリを読み込むときとか、必ず最初に実行したい処理（ポリフィルとか）がある場合だ。 Webpackだと、以下のようにentryに配列を指定すればconcatできる。 module.exports = …

Issue#2604にあった。割れ窓っぽい雑な手なので、使うのはその場凌ぎ的にやっていい場面だけに留める。 const fs = require('fs') const pug = require('pug') const result = pug.renderFile('test.pug', { require }) fs.writeFileSync('test.html', resul…

ググったらmiddlewareで処理する方法しか見つからなかったけど、ドキュメントを見ていたらrewriteRulesというそれっぽいオプションがあった。レシピとしてそれっぽい方法で使うサンプルがあったけど、バージョンが古いし、SSIのシンタックスが違った。自分で…

業務内容に合わせたCSSの書き方が大方定まってきた感じがあるので書く。 ビルド SassのSCSS記法で書いて、ポストプロセスとしてAutoprefixerとCSSOあたりを通すという風にしてる。 プリプロセッサーとしてPostCSSを使うのは難があって、利用できる機能を独自…

ポケモンgoがリリースされ、翌日である昨日にフルコミットして得た知見をメモしておく。 ※後日追記 以下の情報は無駄で大幅に死んだ可能性がある。 方針 序盤は効率よくレベル上げするついでに素材を集めつつ、軌道に乗ってきたら厳選してパーティを作ること…

4月になってしばらくしてから新卒として内定が決まって、5月中旬頃から今の会社で働いている。 就職が決まった時期としてはかなり遅い。ギリのタイミングまで自分のレベル上げをしたかったというのと、最悪就職できないはずもないだろうと社会をなめていたこ…

BrowserSyncでサーバーを立ち上げると、http://localhost:3000/とかルートのURLで指定したディレクトリが開くようになっている。 でもたまにパスの指定の関係で、ルートでなくて下層のディレクトリでファイルを開きたいというときがある。http://localhost:3…

JSバリバリじゃない、いわゆる普通のウェブサイトでもモダンなJSを書くためのボイラープレートを作った。 最近のJSの文脈的には、browserifyでモジュール分割してes2015で書きたい。 でも、browserifyは全部のモジュールをひとつのファイルにまとめるという…

前に作ったウェブサイトギャラリーで使ってるサムネイル画像の取得を自動化した。 それまでは、URLを渡すとサムネイル画像を提供してくれる外部のAPIを使ってたけど、Node.jsでフォルダ内の全HTMLをキャプチャし画像化という記事を見て、おもしろそうだった…

Velocityっていうアニメーション用のライブラリがある。 最初からいろんなイージングが使えて、jQuery UIのイージングの一部が入ってるんだけど、Back系、Elastic系、Bounce系のやつは入ってない。 Velocityは独自にイージングを拡張することもできるので、j…