CSSで絵文字を表示するための @font-face 設定を紹介します。この方法はモダンな閲覧環境ではほぼ問題なく表示できます。またJavaScriptを使用して絵文字を画像に置換するタイプ(EmojiOne、Twemoji)と比較して、表示速度や利便性などの面で大きく有利です。
絵文字を含むテキストを表示する @font-face 設定(Unicode 10.0対応版)
デモページもご覧ください。
以下のCSSを指定すると絵文字がきれいに表示されます。
もっと読む
Webフロントエンドにまつわるいろいろな話
UI用語で、「モーダルウィンドウ」や「モーダルダイアログ」という言葉があります。これらのことをまとめて「モーダル」と読んでも差し支え無い時代になりました、ということを書きます。
みなさん、マークアップ好きですか? 私はまあまあ好きです。デザインされたパーツをHTMLでどう組むかを考えたり、他の開発者と意見を戦わせたりするのは楽しいですよね!
ただ、自分はマークアップ行為そのものについて、「ここにそんな拘る意味あるのかな?」と疑ってしまうことがあります。<dl> を使うか使わないか、とか、パンくずナビはどうマークアップするか、とか、少しでも良いマークアップをするために切磋琢磨するのはきっと楽しいことなのでしょうが、エンジニアとしての自己満足に陥ってはいないだろうか? と我に返る時があるのですよね。その時の感情を掘り下げてみようと思ったことが、この記事を書くきっかけとなりました。
この記事で私が最終的に述べたいことは、近い将来の標準的なWebプロジェクトにおいて、緻密なマークアップ作業の重要性は極めて低下するだろうということです。なぜ私がそう思うか、妄想を交えつつまとめてみようとおもいます!
なお、筆者は一人のWebエンジニアに過ぎません。これから少し触れる人工知能や機械学習の専門家でなければ、アクセシビリティの専門家というわけでもありません。いーかげんなことを述べているかもしれない点はご承知おきください。
レスポンシブテーブルという言葉をご存知でしょうか。テーブル(表組み)に対してレスポンシブデザインを適用する手法のことです。既存のものとは少し違った手法を考案したので記事を書きました。
株式会社プレートさんが、AUTOCODINGというサービスを開始されました。デザインファイルからコーディングを自動生成してくれるというサービスですが、さわりだけ聞くといかにも眉唾な感じです。ほんまにちゃんと作ってくれるんかいな? ということで試してみました。
WebStorm/PhpStorm(というかJetBrains製のIDE全般)には多彩なバリエーションの差分抽出(Diff)機能が搭載されているのだけど、あまりにも多彩なのでいったんまとめてみることにした。
まとめてみた結果、これはもう外部の差分抽出・マージ専用ツールは不要だなと思えるほど充実していた。
しばらく前からわたしはCSSグリッドシステムに取り憑かれたようになっている。このせいで成仏できないので取り憑く側といったほうが正しいのかもしれないが。
わたしが夢想しているグリッドシステムは以下の要件のもの。
問題です。とあるアニメーションデータの各フレームを静止画として書き出した200枚前後のPNGファイルがあったとします。この連番の静止画を秒間30コマでアニメーションさせてください。さあ、どうしますか?
この問題にたいして、自作の画像生成ツールを作って解決したというお話です。
ブラウザデフォルトの select
要素は、いろいろな事情で JavaScript でゼロから実装しないといけない場合はあるにせよ、特に理由がなければそのまま使うことが望ましい。独自に実装したものはどうしても、デフォルトのものよりユーザビリティーやアクセシビリティーの面で劣ってしまう。
とはいえそのまんま使うとデザインにそぐわない場面は少なくないし、デザイナーがゆるさんという場合だってある。見た目を変更しなきゃいけない時はよくある。
UA が提供する見た目があまりにもデザインとマッチしなければ select
の見た目を CSS を使って調整することになる。このやり方は最近では一般的になってきていて、Google などでも使われている(路線検索時)など。やり方をググればブログなどがいくつか引っかかる程度にはメジャーだ。が、これらは全部、幅を固定しなければいけないという制約がある。
そういうわけで、幅を可変にしつつ、select
の見た目を独自にデザインする方法を探った。
成果物はこちら。