CSS Values and Units Module Level 5 に追加された random() 関数が面白そう
CSS Values and Units Module Level 5 の Editor's Draft を眺めていて気になった、ランダムな値を生成するための random() と random-item() 関数について簡単に紹介してみます。 昨日、CSS Values and Units Module Level 5 (Editor's Draft) が更新されたのに気がついたんですけども、今ってどんな内容になってんの...... と思いつつなんとなく眺めてたら、ランダムな値を生成するための random() と random-item() 関数ってのが入ってました。 Editor's Draft （編集者草案） ってのは、W3C の仕様策定プロセスにおいてはまだ非公式、非承認のドキュメントですから、あまりここに書いてある内容を Web 標準仕様になるとか、ブラウザの実装が進む前提で話
CSS 条件付き規則 （CSS Conditional Rules） Level 5 仕様 （草案） に追加された @when と @else 規則について
CSS 条件付き規則 （CSS Conditional Rules） Level 5 仕様 （草案） に追加された @when と @else 規則について つい先日、最初の草案が公開されたばかりですが、CSS 条件付き規則 （CSS Conditional Rules） の Level 5 仕様に、新たに加わった @when、および @else 条件付き規則について面白そうだったので簡単に紹介。 つい先日、最初の草案が公開されたばかりですが、CSS 条件付き規則 （CSS Conditional Rules） の Level 5 仕様に、新たに @when、および @else 条件付き規則が加わりました。 CSS Conditional Rules Module Level 5 - W3C First Public Working Draft, 21 December 2021 CSS
リアルタイム画像処理機能が充実した CDN、「imgix」 を試してみたらとても簡単で便利だった件
画像処理に関する機能を豊富にそろえ、画像の配信に特化した CDN である 「imgix」 を導入してみたらとても便利だったので、導入の手順から実際の利用方法などについて簡単にまとめました。 リアルタイム画像処理機能が充実していて、画像ファイルの配信向けに特化した CDN （Content Delivery Network / コンテンツ・デリバリ・ネットワーク） として 「imgix」 というサービスがあります。存在自体は結構前から知っていたんですが、一度試してみようと思っていたものの長いこと手つかずでいました。 今回ちょっと時間ができたので、試しにこの Blog で導入してみてどんな感じか探ってみたんですが、導入も簡単で、かなり便利だったので導入方法を含めて紹介してみようと思います。 imgix - Real-time image processing and image CDN img
Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる
Windows で 「游ゴシック」 フォントを使用すると細字で表示されちゃって困るという問題について、CSS の仕様を基に考えてみたいと思います。 Windows で 「游ゴシック」 フォントを使用すると細字で表示されちゃって困るという話、なんか Twitter で下記の記事が回ってきたので、あぁそういえばそんな問題がありましたよねと思い出したのですが、ちょっと気が向いたのでこれを CSS の仕様を基に考えてみたいと思います。 Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！ ： Cherry Pie Web 要するに上記の記事の方が言うように制作者サイドの問題なのか、それとも Windows のレンダリングが悪いのかという話ですが、結論から言えば Windows が悪いってことでいいんじゃないかと思います。あと気になって自分の環境で調べてみたら、少なくとも Wi
HTML 5.1 が今年 9月の勧告に向けて勧告候補への移行検討段階へ、HTML 5.2 の策定も開始
今年 4月6日に 「Working on HTML5.1 - W3C Blog」 というエントリーが W3C 公式 Blog に投稿され、2016年 9月には HTML 5.1 を勧告として公開する計画がアナウンスされましたが、これに関連して先週末、下記の通り、現在最新の HTML 5.1 Working Draft を勧告候補（CR - Candidate Recommendation） に移行する提案（CFC - Call For Consensus）がされた旨、公式 Blog にてアナウンスされました。 Finishing HTML5.1 ... and starting HTML 5.2 ： W3C Blog 元々、HTML5 の勧告スケジュールとして公開されていた 「Plan 2014」 内で、HTML 5.1 については 2016年第4四半期 （2016 Q4） に勧告というス
5分でわかる Blog を Facebook インスタント記事 （Instant Articles） に対応させる方法
運営中の Blog などから Facebook インスタント記事 （Instant Articles） 向けの RSS フィードを配信してインスタント記事に対応させる手順を解説しています。 Facebook インスタント記事 （Instant Articles） は、インターネットメディアなどが、Facebook 内で自分たちの記事を配信することができる仕組み。ユーザーは Facebook アプリ内で記事を受け取り、閲覧してそれをシェアしたりすることができます。 簡単に言ってしまえば、Facebook アプリ自体がニュースリーダーになるような感覚で、ユーザーは Facebook の外に出ることなく、記事を読むことができるのと、記事自体も専用フォーマットによって読み込み速度が速く、快適な閲覧ができるというのが売りになっています。 元々は一部の限られた大手メディア （例として The New
Twitter アプリで投稿する画像に代替テキストを追加できるようになった件
Twitter の iOS 及び Android アプリを利用している場合、アクセシビリティ設定から 「画像の説明を追加」 機能を有効にすることで、投稿する画像に説明文を追加することができるようになりました。 この記事を書いた当時はオプション扱いだったのですが、現在はデフォルトでこの機能が有効になっています。文末に追記してありますのであわせてご確認ください。 Twitter から公式にアナウンスがありましたが、Twitter の iOS 及び Android アプリを利用している場合、アクセシビリティ設定から 「画像の説明を追加」 機能を有効にすることで、投稿する画像に説明文を追加することができるようになったそうです。 「画像の説明」 として入力したテキストは、タイムラインに表示される際、画像の代替テキスト （alt 属性値） として利用されますので、読み上げ環境を利用している人でも投稿さ
pa11y のレポートを日本語で表示したかったので HTML_CodeSniffer の日本語版作った
pa11y っていうオープンソースのアクセシビリティチェックツールがあります。 これのコマンドラインツールはコマンドラインから簡単にアクセシビリティレポート （もちろん機械的なチェックなのであくまで参考レポートなんですが） を簡単に出力できるってことで、ちょっと仕事の関係で使ってみようと思いましてちょっと前に色々と試していました。 で、結構使えそうだということで本格的に使い始めたんですが、そうなるとやっぱりレポートは日本語で出力されないとってことになります。pa11y はアクセシビリティチェックやレポート出力に HTMLCodeSniffer っていう Squiz 社 （Squiz Pty Ltd） が開発しているアクセシビリティチェック用の JavaScript を使用しているため、これを翻訳した、HTMLCodeSniffer-ja を作成し、公開しました。 HTML_CodeSnif
Pushnate を使用して Web サイトにプッシュ通知 （Web Push notifications） を楽々導入する
Pushnate を使用して Web サイトにプッシュ通知 （Web Push notifications） を楽々導入する Web プッシュ通知に関する基本的な知識と、Web プッシュ通知配信サービス、Pushnate を使用して Web サイトにプッシュ通知を導入する手順についてまとめています。 Push API （Service Worker） を利用したプッシュ通知は、まだ正式版としてリリースされている対応ブラウザが Google Chrome （v.42 以降 / PC or Android） しかないため、現状では一般的ではありませんが、予定では本日正式版がリリースの Firefox 44 も Service Worker に対応したため、少しずつですが利用機会が増えそうな感じになってきました ※。 で、試しにこの Blog でもプッシュ通知を導入して、どんな感じになるのか実験
Firefox 40 が正式リリース、text-decoration 関連プロパティからベンダプレフィックスが削除されるなど
Firefox 40 のリリースからちょっと時間経っちゃってるんですが（現在 Firefox 40.0.2 が提供されています）...... Firefox の最新版、Firefox 40 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。 Firefox 40.0 リリースノート Android 版 Firefox 40.0 リリースノート Firefox 40 for developers ： MDN text-decoration-color プロパティなどからベンダプレフィックス付きのサポートが削除 今回、HTML、CSS 関連だとそれ程大きな変更はなかったんですが、text-decoration-color、text-decoration-line、text-decoration-style の各プロパティからベンダプレフィックス付きの記述に対するサ
jQuery 3.0 および jQuery Compat 3.0 のアルファ版が公開される
jQuery 3.0 および jQuery Compat 3.0 のアルファ版がリリースされました。主に .show()、.hide() メソッドに対して行われた仕様変更について触れてみたいと思います。 米国時間の 13日付けで、jQuery 公式サイトにてアナウンスされましたが、jQuery 3.0 および jQuery Compat 3.0 のアルファ版がリリースされました。 現行版の jQuery 2.x 系の後継が 「jQuery 3.0」、1.x 系の後継が 「jQuery Compat 3.0」 と名称変更されてのリリースになります。大きいところだと .show()、.hide() メソッドの仕様が変わったみたい。 jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released ： Official jQuery Blog jQ
当 Blog を SSL 対応させたので手順や修正が必要になった点などをまとめ
10年間運営されてきた自分の Blog を SSL 対応させるにあたって、その手順や、SSL 化したことで修正をしなければならなくなって大変だった点などを簡単にまとめてみようと思います。 なぜか先週末の夜中に急に思い立って、この Blog のドメイン用に SSL 証明書を購入し、急遽 SSL 対応 （HTTPS でアクセスできるように） してみたわけですが、その手順やら、SSL 化したことでちょっと手直ししないといけなくなって大変だった点などをまとめて見ようと思います。 ちなみに、まだリダイレクトや HSTS （HTTP Strict Transport Security） はドメインに対して有効にしていないので、現状は HTTP / HTTPS どちらでもアクセスできる状態。もうちょっと検証した上で HSTS を有効にして所謂、常時 SSL 化する予定。 10年間以上運営してきた Web
SVG のフォールバックは結局 Modernizr に落ち着いた件
タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 （IE8 以前とか、旧 Android の標準ブラウザとか） に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript （とりあえず jQuery） 書いて SVG 未対応ブラウザに対しては代替画像に差し替えるっていう手で落ち着きましたというお話。 SVG を使うにあたって、どの程度古いブラウザまで対応するかっていうのはありますが、今回対象にしている SVG は、ページ内で通常の画像 （普通の JPEG とか PNG） と同じように使われるものを想定していますので、いくら古いブラウザはサポート対象外とは言っても、文書内で大切な意味を持つ画像が表示されないのはまずいだろと。 あわせて対象となる SVG 内
LINE のビジネス向けアカウント 「LINE@」 が誰でも無料で使えるようになったので試してみた - アカウント開設から基本設定まで
LINE、実は私今まで使ったことなかったんですけれども、今日、その LINE のビジネス向け公開型アカウント 「LINE@」 が誰にでも無料で使えるようになり、LINE@ のアカウント管理や運用のための専用アプリもリリースされたということで、ちょっと試してみました。 LINE@ 公式サイト 【LINE】公開型アカウント「LINE@」をグローバルでオープン化 法人・個人問わず、月額無料でLINEを対外的なコミュニケーションやビジネスに利用可能 LINE@ 自体は以前から主に店舗など、実店舗を持ってローカルビジネスを展開している人たち向けに月額費用 5,000 円ちょいの有料サービスとして提供されていました。ですので、以前からビジネスに活用されている企業さんなどは多かったと思いますが、それが今回、店舗の有無などの制約がなくなり、誰でも無料で使えるようになったというお話ですね。 通常の LINE
ブラウザから SVGO で SVG ファイルを最適化できる 「SVGOMG」
SVGO は SVG ファイルから不要なデータを取り除いたりして最適化してくれる便利なソフトウェアですが、これをブラウザの画面から使えるようにしたのが、「SVGOMG」 です。 SVGOMG SVGOMG ： GitHub 例えば JPEGmini の Web 版とか TinyPNG のような画像最適化ツールがありますが、これの SVG ファイル向けですね。ブラウザから簡単に操作できますし、最適化オプションの適用も画面上で SVG ファイルの変化を確認しながら行えますのでわかりやすいと思います。 SVGO には下記のようなオプションが用意されていますが、 cleanup attributes from newlines, trailing and repeating spaces → 属性値内の重複する空白や改行を削除 remove doctype declaration → DOCTYP
5分でわかる正しい Web サイト常時 SSL 化のための基礎知識
Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめてみました。メリットやデメリット、証明書の種別からリダイレクト設定などについても解説しています。 HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの SSL 対応、特に Google が推奨している Web サイトをすべて HTTPS で配信する、所謂 「常時 SSL 化」 についての話を聞いたり、実際にお客様から相談されたりするケースが増えてきました。 そこで、いい機会だしその辺に関する情報をまとめておこうかな～ と思って書いてみた、恒例の （？） 5分でわかるシリーズ。書き終わって見たところ絶対に 5分じゃ無理っていう文章量になっててどうしようかなぁとも思ったんですが、気にせず公開してみます。 常時 SSL
Google アナリティクス個人認定資格 （GAIQ） が日本語化されていたので受験してみた
Google Analytics の習熟度を認定する資格として Google が公式に提供している 「Google アナリティクス個人認定資格 （Google Analytics Indivisual Qualification / GAIQ）」 は元々、英語での受験が必要で、さらに受験にも費用がかかっていたのですが、つい最近これが日本語化され、さらに受験も無料になった案内が来ていた （来ていたというか、Google Analysis にログインすると通知が出てた） ので、年末年始のお休みでちょっと時間ができたついでに受験してみました。 結果は無事合格できたのですが （下記が認定書）、せっかくですので受験の仕方などについて簡単にまとめておきたいと思います。 Google パートナーへの登録 まず、Google アナリティクス個人認定資格を受験するには、Google パートナーへの登録が必要
Firefox 36 が unicode-range デスクリプタをサポート、文字コード範囲を指定してフォントを適用可能に
現在、Firefox Nightly としてリリースされている、Firefox 36 で、unicode-range デスクリプタがサポートされました。unicode-range は @font-face デスクリプタで、読み込んだフォントの適応範囲を指定します。 例えば、ある要素内のテキストのうち、特定の文字のみ、あるいは特定の文字コード範囲に含まれる文字のみを、別のフォントで置き換えたい場合などに、unicode-range でその文字や文字コード範囲を指定することができます。 4.5 Character range: the unicode-range descriptor - CSS Fonts Module Level 3 Editor's Draft 27 October 2014 unicode-range デスクリプタの使い方 こういう指定が妥当というか実用的かは別として、
Firefox Nightly が CSS でスムーズスクロールを実現する scroll-behavior: smooth; をサポート
Firefox Nightly が CSS でスムーズスクロールを実現する scroll-behavior: smooth; をサポート 現在、Firefox Nightly としてリリースされている、Firefox 36 で、scroll-behavior: smooth; が実験的ながらサポートされました。CSS のみでスムーズスクロールを実現することができます。 現在、Firefox Nightly としてリリースされている、Firefox 36 で、scroll-behavior プロパティ、およびその値、smooth が実験的ながらサポートされました。 現状では、デフォルトで無効になっているため、about:config から layout.css.scroll-behavior.enabled、および layout.css.scroll-behavior.property-en
GIF に変わると噂の XNG という新しいアニメーション画像フォーマットを調べてみた
ネタにマジレスな感じもしないでもないですが、GIF に変わるという新しいアニメーションフォーマット、「XNG」 が開発されたなんて話題になっていましたので、簡単にその仕組みを調べてみたのと、実際に XNG ファイルを作ってみたので書いています。 ネタにマジレスな感じもしないでもないですが、GNOME （X Window System 上で動作するデスクトップ環境） の開発者である Jasper St. Pierre 氏が、GIF に変わるという新しいアニメーションフォーマットを開発したとのことで話題になっていました。 彼自身の Blog でも書いているほか、日本語では GIGAZINE さんが取り上げていましたが、興味本位からちょっと中身を調べてみたので書いてみます。ついでに実際に XNG ファイルを作る方法にも簡単に触れています。 XNG: GIFs, but better, and a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
