帰ってきた彼

姿を消したのは一夜の夢だったかのように、僕はあのころと何も変わらない彼と話をしていた。慣れというのは恐ろしいものだ。彼は再び当たり前の存在に舞い戻った。 「今でもそれを転がしているし、それなりに好きだよ」という話を聞いた。昔の僕は少し気負い…

より良いリンクの下線の実装

前回、リンクには下線を付けようという記事を書いた。が、実際のところ、デフォルトのリンクのスタイルはあまりイケてないと思ってる。リンク色と同色の下線は視覚的な主張として強すぎるし、下線の位置が文字の下端に隣接し過ぎていて見づらい。 幸いにも、…

:hoverの誤用について

ある要素がマウスオーバーされたことを伝える。それ以上の役割を:hoverに紐付くスタイルに持たせるべきではない。マウスオーバーするまでその要素のインタラクションがわからないデザインにしてはいけないのだ。 マウスオーバーするまでその要素がリンクであ…

Web Componentsを待ち望んでいる話

某所でWeb Componentsについて少し話す機会があったんですが、下調べが不十分で誤った意見を述べてしまってました。代わりにこの記事を出すことで訂正とさせてください、という意味で書きます。 コンポーネントを実装するための基盤となる仕組み Web Compone…

彼がいたジム

腹筋を鍛えることにおいて、BIG3に取り組むことは安全かつ必要十分なトレーニング効果をもたらす最良の方法である。腹筋は背骨を安定させるための筋肉だ。スクワットやデッドリフトで大きな重量を扱うことによって、姿勢を安定させるため腹筋には大きな負荷…

状態遷移時にアニメーションを伴うUIのアクセシビリティ周りの実装について

ディスクロージャーの開閉時やモーダルダイアログが表示される瞬間など、あらゆるUIは状態遷移のたびにアニメーションを伴う。にも関わらず、アクセシブルなUIを実装するための手法について書かれた文献で、アニメーションを伴う状態遷移時におけるWAI-ARIA…

【お蕎麦】富士そばへ行く!【安い・早い・うまい】

どうもー! フロントエンドエンジニアのゆうへいでーす! 僕実はですね、今日まだ何も食べてなくて、すごくお腹が減ってるんですよ。ということで今回はね、行きつけの近所の富士そばに行ってみたいと思います! いやー、それにしても冬は寒くてついつい出不…

Reactコンポーネントを単独で使うための細かいテク

前回のReactコンポーネントを単独で使うに書いたようにしばらくやってみて、細かいところのいい感じのやり方がわかってきた。 ディレクトリ構成 └── src/ ├── components/ │ ├── react/ │ │ ├── AwesomeApp.js │ │ └── Disclosure.js │ ├── AwesomeApp.js │ …

Reactコンポーネントを単独で使う

普通の静的なHTMLのサイトの中で、限定的に複雑になる部分だけをReactの小さいアプリとして実装するというパターンを個人的によくやる。その際に、Reactの中でもそれ以外の部分でも使うコンポーネントがあって、どう実装すればいいかと悩んだ。 というのも、…

フォーカスリングの役割とマウスユーザーに向けた対応について

ブラウザは、フォーカスされた要素を可視化するためにフォーカスリングを実装している。青や黒のフォーカスされた要素を囲う枠線のことだ。outlineプロパティで表現される。これは主に、ウェブページをキーボードで操作可能にするためにある。 例として、ウ…

cssnextを使うべきか

cssnextは、未来のCSS構文を今のブラウザでも解釈できるようにトランスパイルするPostCSSプラグインだ。そう聞くとさも、将来のCSSの書き方をそのまま先取りできる素晴らしいツールであるような印象を抱く。だが実際は、cssnextで表現できる形と標準の仕様は…

日本語向けフォントスタックの現状

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

:focus-ringの代用としてwhat-inputを試す

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

outline: noneをやめよう、focus-ringを使おう

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

ページ内リンクへの移動時にスクロール位置が固定ヘッダーと被らないようにする方法

固定ヘッダーがあるサイトだと、ページ内リンクをクリックしたときに対象の要素が固定ヘッダーと被ってしまうことがある。 固定ヘッダーがあるサイトの例としてVue.jsとかBootstrapのドキュメントを見ると、この問題は起こらないようになっていた。調べてみ…

静的サイト開発のための最強のボイラープレートを作った

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

Normalize.cssの意図(想像)

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

Re: なぜピクセルパーフェクトは筋が悪いのか

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

なぜピクセルパーフェクトは筋が悪いのか

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

シンプルなレスポンシブデザインを実現するためのメディアクエリの考え方

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

縦書きでレスポンシブなブログを作った

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

ウェブサイトにおけるタイポグラフィのパターンの設計

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

font-familyに指定するフォントスタックの一般的なパターン

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

わざと引っかかりのあるアニメーションを実装する

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

ブレイクポイントは端末のサイズに依存させない

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

もっと細かい値を基準にしたVertical Rhythm

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

エモさ on 地味な土台 in ウェブサイト

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

CSSにおける和欧混植のベストプラクティス

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

Sassのmixinでユニークなキーフレーム名を宣言する

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

2017年に向けてやってきたこと

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