「端っこ」におけるスクロールの挙動を制御する overscroll-behavior プロパティ

※この記事の内容は、まだブラウザに実装されていない内容を含みます。また、勧告前の仕様について言及しているため、最新の仕様では変更になっている場合があります。

要約

overscroll-behavior プロパティを使うと、スクロール境界(端っこ)におけるブラウザデフォルトの挙動を上書きすることができます。例えば、ブラウザが持っている「下方向に引っ張ってリロード」する機能や、スクロールが親要素に伝わる「スクロールチェーン」の挙動を無効化することができます。

はじめに

主にタッチデバイスにおいて、無効化したいのにできない、スワイプ操作やスクロールにまつわる困った挙動が3種類ありました。

  1. 「もうこれ以上スクロールができない」ことを表すインタラクション
  2. スクロールが親に伝播してしまう「スクロールチェーン」
  3. 左右へのスワイプで行う履歴の前後ナビゲーション

もっと読む

細かすぎるけど伝わってほしい私的BEMプラクティス30(ぐらい)

BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。

レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。

BEMを使いはじめてかれこれ3,4年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。

ただし、それはBEM的にはオッケーなのである。もともと「正しいBEMの書き方」というものはなく、みんなの中にそれぞれのBEMがある、という捉え方でオッケーなのだということだ(みたいなことが実は公式にも書いてある)。

少し長くなるけれど、私がいつも使っているプラクティスを紹介する。

もっと読む

絵文字😇を含むテキストを表示する @font-face 設定(Unicode 10.0対応版)

CSSで絵文字を表示するための @font-face 設定を紹介します。この方法はモダンな閲覧環境ではほぼ問題なく表示できます。またJavaScriptを使用して絵文字を画像に置換するタイプ(EmojiOneTwemoji)と比較して、表示速度や利便性などの面で大きく有利です。

絵文字を含むテキストを表示する @font-face 設定(Unicode 10.0対応版)

デモページもご覧ください。

以下のCSSを指定すると絵文字がきれいに表示されます。
もっと読む

「モーダル」と読んでもいい、という話

UI用語で、「モーダルウィンドウ」や「モーダルダイアログ」という言葉があります。これらのことをまとめて「モーダル」と読んでも差し支え無い時代になりました、ということを書きます。

もっと読む

マークアップのいらない未来を考える

みなさん、マークアップ好きですか? 私はまあまあ好きです。デザインされたパーツをHTMLでどう組むかを考えたり、他の開発者と意見を戦わせたりするのは楽しいですよね!

ただ、自分はマークアップ行為そのものについて、「ここにそんな拘る意味あるのかな?」と疑ってしまうことがあります。<dl> を使うか使わないか、とか、パンくずナビはどうマークアップするか、とか、少しでも良いマークアップをするために切磋琢磨するのはきっと楽しいことなのでしょうが、エンジニアとしての自己満足に陥ってはいないだろうか? と我に返る時があるのですよね。その時の感情を掘り下げてみようと思ったことが、この記事を書くきっかけとなりました。

この記事で私が最終的に述べたいことは、近い将来の標準的なWebプロジェクトにおいて、緻密なマークアップ作業の重要性は極めて低下するだろうということです。なぜ私がそう思うか、妄想を交えつつまとめてみようとおもいます!

なお、筆者は一人のWebエンジニアに過ぎません。これから少し触れる人工知能や機械学習の専門家でなければ、アクセシビリティの専門家というわけでもありません。いーかげんなことを述べているかもしれない点はご承知おきください。

もっと読む

デザインPSDからコーディングHTMLを自動生成してくれるサービスAUTOCODINGを使ってみた

株式会社プレートさんが、AUTOCODINGというサービスを開始されました。デザインファイルからコーディングを自動生成してくれるというサービスですが、さわりだけ聞くといかにも眉唾な感じです。ほんまにちゃんと作ってくれるんかいな? ということで試してみました。

もっと読む

WebStorm/PhpStormが備える差分抽出(Diff)機能まとめ

WebStorm/PhpStorm(というかJetBrains製のIDE全般)には多彩なバリエーションの差分抽出(Diff)機能が搭載されているのだけど、あまりにも多彩なのでいったんまとめてみることにした。

まとめてみた結果、これはもう外部の差分抽出・マージ専用ツールは不要だなと思えるほど充実していた。

もくじ

  1. 特定の2つのファイルを比較する
  2. 現在開いているファイルと、特定のファイルを比較する
  3. クリップボードの内容と、ファイルを比較する
  4. クリップボードの内容と、ファイル内の特定領域のテキストを比較する
  5. 特定の2つのディレクトリを比較する
  6. リモートファイル(サーバー上にあるファイル)と比較する
  7. リモートファイル(サーバー上にあるファイル)と複数ファイル同時に比較する
  8. ローカル履歴と現在のファイルを比較する
  9. Gitのブランチどうしを比較する
  10. 現在開いているファイルと、Gitの別ブランチにある当該ファイルを比較する
  11. 現在開いているファイルと、Gitの同一バージョンのファイルを比較する
  12. 現在開いているファイルと、リポジトリの最新バージョンのファイルを比較する
  13. 現在開いているファイルと、リポジトリの特定バージョンのファイルを比較する
  14. 特定の2つのコミットを比較する
  15. おまけ

もっと読む

あと一歩のところでうまくいかないCSSグリッドシステム

しばらく前からわたしはCSSグリッドシステムに取り憑かれたようになっている。このせいで成仏できないので取り憑く側といったほうが正しいのかもしれないが。

わたしが夢想しているグリッドシステムは以下の要件のもの。

  • HTMLとCSSだけで動く。JavaScriptに依存しない
  • リキッドレイアウトである
  • 行ごとに要素で囲む必要がない
  • グリッドの内容は、%指定でフレキシブルにすることもできるし、固定サイズにしておき領域幅をオーバーしたら改行するようにもできる
  • 使用があやういハックは使いたくない
  • IE8以上に対応する

もっと読む

連番の静止画をコマ送りでアニメーションさせた話

問題です。とあるアニメーションデータの各フレームを静止画として書き出した200枚前後のPNGファイルがあったとします。この連番の静止画を秒間30コマでアニメーションさせてください。さあ、どうしますか?

この問題にたいして、自作の画像生成ツールを作って解決したというお話です。

もっと読む