絵文字😇を含むテキストを表示する @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コマでアニメーションさせてください。さあ、どうしますか?

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

もっと読む

select を JS と CSS で独自にデザインする方法(幅可変版)

ブラウザデフォルトの select 要素は、いろいろな事情で JavaScript でゼロから実装しないといけない場合はあるにせよ、特に理由がなければそのまま使うことが望ましい。独自に実装したものはどうしても、デフォルトのものよりユーザビリティーやアクセシビリティーの面で劣ってしまう。

とはいえそのまんま使うとデザインにそぐわない場面は少なくないし、デザイナーがゆるさんという場合だってある。見た目を変更しなきゃいけない時はよくある。

UA が提供する見た目があまりにもデザインとマッチしなければ select の見た目を CSS を使って調整することになる。このやり方は最近では一般的になってきていて、Google などでも使われている(路線検索時)など。やり方をググればブログなどがいくつか引っかかる程度にはメジャーだ。が、これらは全部、幅を固定しなければいけないという制約がある。

そういうわけで、幅を可変にしつつ、select の見た目を独自にデザインする方法を探った。

成果物はこちら。

もっと読む