W3C と WHATWG、HTML/DOMの仕様策定で協力し、共通の仕様を共同管理すると発表
HTML と DOM の標準仕様について、以前から W3C と WHATWG がそれぞれ別々に仕様策定していることが色々と問題視されていましたが、今回、W3C と WHATWG が協力して仕様策定を行っていくことで、HTML/DOMの仕様が一本化されることが正式にアナウンスされました。 HTML と DOM の標準仕様について、以前から W3C と WHATWG がそれぞれ別々に仕様策定していることが色々と問題視されていましたが、今回、W3C と WHATWG が協力して仕様策定を行っていくことで、HTML/DOM の仕様が一本化されることが正式にアナウンスされました。 形としては WHATWG Living Standard への統合で、今後はこの仕様のみ参照すればよいことになります。 W3C and WHATWG to work together to advance the open
Chrome 75 に HTML 側の指定のみで動作する画像遅延読み込み （loading="lazy"） が実装される
img 要素や iframe 要素などのリソースを、HTML 側の指定のみで遅延読み込みに対応させる loading 属性を、Chrome 75 が先行実装しましたので簡単に紹介。 本記事執筆時点において、loading 属性は Chrome の先行実装でしたが、その後、HTML Living Standard 仕様において定義されました。それに伴い指定可能な属性値などが変わっていますのでご注意ください。詳しくは「Firefox 75、HTML の指定のみで動作する画像遅延読み込み （loading="lazy"） に正式対応」をご覧ください。 画像など、Web ページで使用するリソースの遅延読み込みは、Web ページの体感的な表示速度を向上させるために利用されますが、現時点では JavaScript を使用した実装が一般的です。 これをブラウザ側でネイティブに実装し、HTML 側の指定の
Re: 「position: absolute; + display: table;の謎を解きたい」
Blog 「エンジニアをリングする」 さんで、下記の記事が上がっていて、要するに position: absolute; した要素には height プロパティでパーセンテージ値による高さ指定ができるはずなのに、display: table; するとそれが無視されるのはなぜ？ という話。 position: absolute; + display: table;の謎を解きたい ： エンジニアをリングする で、答えですが、仕様書の下記の辺りを読んでみたらいいんじゃないですかね。 17.4 Tables in the visual formatting model ： W3C CSS 2.1 Specification 17.4 Tables in the visual formatting model ...中略... The table wrapper box is a 'block' b
Web サイト作るお仕事をしている人向け gulp で作るフロントエンド開発環境
Web サイト作るお仕事をしている人向け gulp で作るフロントエンド開発環境 フロントエンドの開発を色々と捗らせてくれる gulp について、ここ最近、私が利用しているパッケージの紹介を中心に、主に Web サイトを制作するお仕事をしている方に向けた、なるべくわかりやすい解説としてまとめてみました。 gulp v4 が正式リリースされたため、本記事で紹介していた gulpfile.js ファイルの記述方法を v4 にあわせて修正しました。詳しくは 「gulp 4.0 が正式リリース、v3 からの移行に伴う gulpfile.js ファイルの修正点」 をご覧ください。 もう 4年くらい前になりますが Web デザイナーさん向けみたいな感じで、所謂 「黒い画面」 にあまり普段から慣れていない方向けの Grunt 導入記事を書いたんですけども、内容的にはもう古いし、Grunt いいよって紹介
Windows 10 で画面の一部をドラッグ & ドロップしてスクリーンショットを撮る方法
特に目新しい話ではなく、知っている人はすでに知っている機能だと思うのですが、今日たまたま仕事として人前で PC を操作しているときにやったら 「そんなことできるんですか？」 って驚かれたので、意外と知らない方もいるんだな、ということで書いてみたいと思います。 といっても数行で終わってしまうネタなんですけども。 で、早速結論からなんですが、Windows 10 （Creators Update 適用済み） では、ショートカットキーとして下記を押すことで、画面の一部をドラッグ & ドロップで選択してクリップボードにコピーする機能が標準で利用できます。 ⊞ Win + ⇧ Shift + S ショートカットキーを押すと、画面が全体的に白くなりますので、スクリーンショットを撮りたい部分をドラッグ & ドロップで選択してあげれば、その部分がクリップボードにコピーされます。 あとは画像加工するなり、メ
Edge が CSS カスタムプロパティ （CSS Variables） に対応したので試してみた
Windows 10 Creators Update の提供とあわせて、Microsoft Edge が build 15.15063 へとアップデート。これにより CSS カスタムプロパティに対応したので早速試してみました。どうやら content プロパティを変数から読み込めないようです。 先週、下記のエントリー内でも触れたのですが、2017年 4月 11日から、Windows 10 の大型アップデートである、「Windows 10 Creators Update」 の提供が開始されます。 このアップデートにより、同梱される Windows 10 標準ブラウザである Microsoft Edge が build 15.15063 にアップデート。CSS カスタムプロパティ （CSS Variables） に対応したので、早速どんな感じか確認してみました。 Windows Vista と
Windows Vista と IE9 のサポート終了 （2017年4月11日） まで 10 日を切った件
Windows Vista の延長サポート期間が 2017年 4月 11日で終了することに伴い、Windows Vista 上でのみサポート対象となっていた IE9 についてもサポート対象から外れることで、IE11 が利用可能な唯一の IE バージョンとなります。 2016年1月12日 （米国時間） から適用された新しい、Internet Explorer （以下、IE） のサポートポリシーに伴い、「サポート期間中の各 Windows OS にインストール可能な IE のうち、最新版以外のバージョンの IE」 のみがサポート対象になっています。 これを現時点でサポート期間中の Windows に照らし合わせると、Windows 7 以降の Windows は、すべて IE11 のみがサポートされるブラウザになるのですが、唯一、2017年 4月 11日まで延長サポート期間が残っている Win
normalize.css 6.0.0 がリリース、作者の意見的意味合いが強かったスタイル定義を削除
normalize.css 6.0.0 のリリースで、それまで入っていた、純粋なブラウザ間の差異を吸収する目的からは少し外れた "opinionated" なスタイル定義がすべて削除されました。 所謂、リセット CSS （Reset CSS） の一種である 「normalize.css」 は、Web 制作界隈の方々にとっては馴染みのあるスタイル定義集で、お世話になっている方も多いのではないでしょうか。 先日、この 「normalize.css」 の最新版として、「6.0.0」 がリリースされましたが、作者である Jonathan Neal 氏の意見的意味合いが強かったスタイル定義がすべて削除されるなど、比較的大きな修正が入っています。 Normalize.css : Make browsers render all elements more consistently. necolas/n
Microsoft Edge が build 15.15061 で CSS カスタムプロパティをサポート
Microsoft Edge が CSS カスタムプロパティ （CSS Variables） のサポートを発表しました。現時点では開発者向け実装のみ。build 15.15061 以降で利用することができます。 CSS カスタムプロパティ （CSS Variables） とは、CSS でカスタムプロパティを定義し、変数として使用できるようにするための CSS 仕様。定義した変数は他のスタイル宣言内で参照することができることで、より効率的な CSS の記述が可能になります。 現時点で、Edge 以外のモダンブラウザはすべてサポートの足並みがそろっていて （IE はもちろん対応していませんがもう機能的にアップデートされることのないブラウザなので除外）、Edge 待ちだったのですが、Edge も build 15.15061 で CSS でカスタムプロパティをサポートすることが公式にアナウンスさ
Chrome 56 に position: sticky; が戻ってきた
Chrome 56 が CSS position: sticky; に対応しました。画面からスクロールアウトする際に、そのまま画面上部に固定されてスクロールに追随してくるような要素の配置が CSS のみで実現可能です。 長いこと Blog の更新をサボっていたため、ちょっと無理矢理書いている感もありますが、タイトルの通り、米国時間の 2017年 1月 25日付けで正式リリースされた Chrome 56 が CSS position: sticky; に対応しました。 position: sticky; を指定することで、例えば画面からスクロールアウトする際に、そのまま画面上部に固定されてスクロールに追随してくるような要素の配置が CSS のみで実現可能です。 position: sticky; に関する詳しい説明は、もう 4年くらい前の古い記事にはなりますが下記の記事で解説していますので参
WordPress のユーザー名を隠してもセキュリティ対策に大きくは影響しない
WordPress のユーザー名が外部からわかってしまうのが問題だという指摘に関して、ユーザー名は秘匿できるならすればよいと思いますが、それ自体はセキュリティ対策として 「最重要」 ではありませんよと言うお話。 WordPress に登録されているユーザー名が外部からわかってしまうのは問題だという記事が話題になっていたようなので簡単にメモ。 もちろん、隠せるなら隠したらよいと思いますから、下記の記事の内容を否定するつもりはありませんが、ユーザー名が外部にバレるのは問題だという話については、それを言ったら世の中のほとんどのサービスが問題になっちゃうからさという話と、そんなことよりもやるべきことは沢山ありますよというセキュリティ対策の優先順位の話について。 実はWordpress利用ブログのほとんどがユーザー名もろバレな件 - 対処法 ： Tanweb.net ユーザー名はバレる前提が一般的
Google 透明性レポートに 「HTTPS の使用状況」 セクションが追加、日本は HTTPS の普及で遅れ気味
Google 透明性レポートに 「HTTPS の使用状況」 セクションが追加、日本は HTTPS の普及で遅れ気味 Google は、同社が公開している透明性レポートに、新たに 「HTTPS の使用状況」 セクションを追加したことを発表しました。データを見てみると、日本だけ他国に比べて HTTPS の利用率が低いことがわかります。 Google は、同社が公開している透明性レポート （Transparency Report） に、新たに 「HTTPS の使用状況 （HTTPS Usage）」 セクションを追加したことを発表しています。 このセクションには、HTTPS 使用状況が時間の経過とともにどう変化しているかがわかるデータが、Web 全体、および国別にまとめられています。 データを見ると、現時点でパソコン向けページについて、ユーザーが表示するページの半分以上が HTTPS 経由になって
Material design （マテリアル デザイン） カラーパレットのコントラスト比をチェックしてみた
Google が公開しているマテリアル デザイン ガイドラインにあるカラーパレットの、各背景色と文字色を 「JIS X 8341-3:2016」 に基づいてコントラスト比をチェックし、結果としてまとめてみました。 Material design guidelines （マテリアル デザイン ガイドライン） は 2014 年に Google が発表した、Google が提唱する UI/UX デザインの概念をまとめた 「ガイドライン」 で、これについては今さら説明する必要もないと思います。 このマテリアル デザイン ガイドラインのスタイルガイド内に、「Color」 という項目がありますが、そこにマテリアル デザインで利用する色の一覧、「Color palette （カラーパレット）」があって、自分の Web サイトとか、ちょっとしたデザインを作成する際のカラー選択に結構重宝しています （Ill
Let's Encrypt （無料 SSL サーバ証明書） の設定が超簡単になったと聞いて試してみた件
Webセキュリティの小部屋さんで下記の記事が公開されていて、無料の SSL （TSL） サーバ証明書を提供する認証局 「Let's Encrypt」 からの証明書取得がとっても簡単になったということなので、ちょっと試してみましたが、とっても簡単だったのでメモ。 無償SSL/TLS証明書の Let's Encrypt の設定が劇的に簡単になっていた ： Webセキュリティの小部屋 Certbot たった 2コマンドで SSL 証明書の取得が完了 Let's Encrypt は元々簡単な処理でドメイン認証 （Domain Validation / DV） 証明書を取得することができて、私もテストで何度か設定してみたりしていたのですが、ある程度触ったところで、簡単そうだし手が空いたら本番サーバでも設定して使ってみようかな～ なんて思っていたらそのまま手つかずという感じで時間が経っていました。 と
5分でわかる Blog を Facebook インスタント記事 （Instant Articles） に対応させる方法
運営中の Blog などから Facebook インスタント記事 （Instant Articles） 向けの RSS フィードを配信してインスタント記事に対応させる手順を解説しています。 Facebook インスタント記事 （Instant Articles） は、インターネットメディアなどが、Facebook 内で自分たちの記事を配信することができる仕組み。ユーザーは Facebook アプリ内で記事を受け取り、閲覧してそれをシェアしたりすることができます。 簡単に言ってしまえば、Facebook アプリ自体がニュースリーダーになるような感覚で、ユーザーは Facebook の外に出ることなく、記事を読むことができるのと、記事自体も専用フォーマットによって読み込み速度が速く、快適な閲覧ができるというのが売りになっています。 元々は一部の限られた大手メディア （例として The New
AMP （Accelerated Mobile Pages） バリデータの Web 版が公開される
AMP HTML の文法が妥当かを検証するバリデータに Web 版が新たに追加されました。AMP の URL を入力、またはソースコードを貼り付けることで、その AMP が文法的に妥当かを簡単にチェックすることができます。 AMP （Accelerated Mobile Pages） の文法が妥当かを検証 （バリデーション） する機能としては、#development=1 を付与した上で開発者ツールによる検証を行う機能が当初から AMP フレームワークの標準機能として提供されていましたが （参考記事）、もっと簡単にバリデーションを行うため、Chorme 拡張が今月に入ってリリースされています。 A Chrome extension to help validate your AMP pages ： Accelerated Mobile Pages Project 今回は、この AMP バリ
jQuery 3.0 が正式リリース、通常の Web サイト制作で利用するなら軽量版 「Slim build （スリムビルド）」 が便利
jQuery 3.0 が正式リリース、通常の Web サイト制作で利用するなら軽量版 「Slim build （スリムビルド）」 が便利 jQuery 3.0 の正式版がリリースされました。次バージョンからはバージョン番号を統一して 3.0 にすると発表されてから 1年半後、やっとの正式リリース。Ajax モジュールなどを省いた軽量版 「スリムビルド」 も提供されています。 米国時間の 6月 9日付けで、jQuery 公式サイトにてアナウンスされましたが、jQuery 3.0 の正式版がリリースされました。 jQuery 3.0 Final Released! ： Official jQuery Blog 2014年の 10月に jQuery 公式 Blog に投稿された記事 （参考エントリー） で、次期リリースから現状の jQuery 2.x 系の後継を 「jQuery 3.0」、1.x
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） に勧告というス
GitHub が新料金プランを発表ということで新旧料金プランを比較してみた
GitHub がアムステルダムで開催したイベント 「GitHub Satellite」 において新しい料金プランを発表したとのこと。 プライベートリポジトリ数が無制限になり、個人ユーザーにとってはうれしい一方で、ユーザー数が多い組織向けアカウントにとっては値上げになる可能性もありと、反応が分かれる料金改定になったようです。 ［速報］GitHub、月額7ドルでプライベートリポジトリを無制限に作成可能に。新料金プランを発表 ： Publickey Introducing unlimited private repositories ： GitHub ということで、簡単に新旧料金プランを比較してみました。 新しい料金は下記の通り。詳しくは 「GitHub - Pricing」 を参照。 詳しくは後述しますが、設定できる 「プライベートリポジトリの数」 で細かく料金が分かれていた旧料金プランに対し
Grunt 1.0.0 がついに正式リリース、0.4.5 のリリースから約 2年
0.4.5 を最後に 2年近く開発が止まってしまっていた JavaScript タスクランナー 「Grunt」 ですが、今年 2月の 1.0.0 RC1 リリースに続き、正式リリース版の 1.0.0 が公開されました。 JavaScript タスクランナー 「Grunt」 は、0.4.x までは順調にリリースを重ねてきていましたが、2014年 5月の 0.4.5 リリースを最後に開発が止まり、その間に同じタスクランナー 「Gulp」 などの台頭によって徐々に存在感が薄まると 「Grunt おわた」 的な空気と共にフェードアウト気味でした。 そんな中、2年近くが経った今年 2月に、Grunt 1.0.0 の RC1 （リリース候補版） がリリースされ、その際、jQuery Foundation の協力によって再出発する旨がアナウンスされていましたが、昨日、正式リリース版の 1.0.0 がつい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
