Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に
CSS の calc() 関数は、サイズや形状を決定する値の指定を計算式で書くことができる仕様で、現時点では IE （IE11）や Edge を始め、Firefox、Chrome、Safari など、ほぼすべてのモダンブラウザがサポートしています。 8.1. Mathematical Expressions: calc() ： CSS Values and Units Module Level 3 ちょっとした計算を簡単に書けるので私もよく使用する記述なのですが、現在、Beta リリースの Firefox 48 は、この calc() 関数の入れ子記述に対応しました。後述しますが、CSS Variables （CSS カスタムプロパティ） と組み合わせるときにかなり便利になりました。 968761 - Support nested CSS calc() calc() 関数の基本的な記述 例
GitHub が新料金プランを発表ということで新旧料金プランを比較してみた
GitHub がアムステルダムで開催したイベント 「GitHub Satellite」 において新しい料金プランを発表したとのこと。 プライベートリポジトリ数が無制限になり、個人ユーザーにとってはうれしい一方で、ユーザー数が多い組織向けアカウントにとっては値上げになる可能性もありと、反応が分かれる料金改定になったようです。 ［速報］GitHub、月額7ドルでプライベートリポジトリを無制限に作成可能に。新料金プランを発表 ： Publickey Introducing unlimited private repositories ： GitHub ということで、簡単に新旧料金プランを比較してみました。 新しい料金は下記の通り。詳しくは 「GitHub - Pricing」 を参照。 詳しくは後述しますが、設定できる 「プライベートリポジトリの数」 で細かく料金が分かれていた旧料金プランに対し
Google Search Console に AMP の項目が追加される
Google Search Console （サーチコンソール） に新たに 「Accelerated Mobile Pages （AMP）」 の項目が追加され、AMP のインデックス状況やエラーレポートを確認することができるようになりました。 ちょっと前の話なんですけどね。Google Search Console （サーチコンソール、元々はウェブマスターツールって呼ばれてたあれです） に新たに 「Accelerated Mobile Pages （AMP）」 の項目が追加され、インデックス状況やエラーレポートを確認することができるようになりました。 Google Search Console AMP について、および実際に AMP を出力する方法については下記の記事を少し前に書いていますので参考まで。 AMP （Accelerated Mobile Pages） HTML を出力するよう
AMP （Accelerated Mobile Pages） HTML を出力するようにしてみたけど面倒くさかった話
Movable Type で運用している Blog の記事を AMP （Accelerated Mobile Pages） HTML で出力するようにしてみたけれど、とある自分の書き方の癖により既存の記事を AMP HTML に自動変換するのは結構面倒くさかったという話。 Google が発表したプロジェクト、Accelerated Mobile Pages （AMP） は、モバイル端末における Web ページの表示を高速化する取り組みで、超簡単に言ってしまえば、オープンソースで公開されるフレームワーク、AMP HTML の仕様に従って Web ページを作ってくれれば、その表示を大幅に高速化できますよという仕組み。 単にファイルサイズ的に軽いよというような単純な話だけではなく、キャッシュなど様々な技術を組み合わせることでページのロード時間を大幅に短縮する仕組みで、制作者側が AMP HTM
1990 年代後半から CSS を触っている私が当時の記憶を振り返る、CSS 昔話
この記事は CSS 昔話 Advent Calendar 2015、10日目の記事です。 面白そうなんで参加してみましたが、CSS ハックとかバグの話は他の方々が、色々面白い記事を書いてくださると思いますので、ここは少し外して、とりとめもない感じになってしまうのは覚悟の上で、空気を読まずに本気で昔の話をしてみようと思います。 私が CSS を触り始めた頃の記憶を辿りつつ。そう、あれはもう 20 年近く前の話...... もう昔過ぎてあまり明確には覚えてないんですけども、私が CSS というか、HTML をはじめとした、今でいう Web サイト制作関連の技術に興味を持ちだしたのは 1996年ごろ。 アトランタオリンピックが開催された年で、Yahoo! Japan がサービス開始した年らしい。テレビやラジオをつければ小室哲哉氏プロデュースの曲ばっかり流れていた記憶が。 当時、専門学校でメカトロ
「アクセシビリティ」 を当たり前にするために制作者はどう考えればよいのか
Web Accessibility Advent Calendar 2015、3日目の記事として、Web アクセシビリティを制作者サイドはどのように捉えて制作業務に組み込めばいいのかという考え方のお話。 この記事は、Web Accessibility Advent Calendar 2015、3日目の記事です。 技術的なお話は別の人がするからもう俺はいいやってことで、毎年恒例だし、今年は技術的なところにはあまり触れずになんか書こうかなーと軽い気持ちで参加表明しちゃった Web Accessibility Advent Calendar なんですが、忘れてただけで去年、すでに今年考えてたような内容で書いてたことに気がついてネタがありません。どうしましょう。 ということで今回は完全に技術的な話は排除して、ゆる～くにアクセシビリティについて思うところを書いておくことにしました。とはいっても啓蒙的
5分でわかる正しい Web サイト常時 SSL 化のための基礎知識
Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめてみました。メリットやデメリット、証明書の種別からリダイレクト設定などについても解説しています。 HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの SSL 対応、特に Google が推奨している Web サイトをすべて HTTPS で配信する、所謂 「常時 SSL 化」 についての話を聞いたり、実際にお客様から相談されたりするケースが増えてきました。 そこで、いい機会だしその辺に関する情報をまとめておこうかな～ と思って書いてみた、恒例の （？） 5分でわかるシリーズ。書き終わって見たところ絶対に 5分じゃ無理っていう文章量になっててどうしようかなぁとも思ったんですが、気にせず公開してみます。 常時 SSL
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた Google がモバイル検索の順位決定時に 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表したことに関連して、そもそも Google は何を根拠に 「モバイルフレンドリー」 かどうかを判断しているのか、という点について調べてみました。 先週ですが、Google が Official Google Webmaster Central Blog で、2015年 4月 21日 （米国時間） から、モバイル検索の順位決定時に、その Web サイトが 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表しました。 Finding more mobile-friendly search results ： Official Google Webmaster
SVG のフォールバックは結局 Modernizr に落ち着いた件
タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 （IE8 以前とか、旧 Android の標準ブラウザとか） に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript （とりあえず jQuery） 書いて SVG 未対応ブラウザに対しては代替画像に差し替えるっていう手で落ち着きましたというお話。 SVG を使うにあたって、どの程度古いブラウザまで対応するかっていうのはありますが、今回対象にしている SVG は、ページ内で通常の画像 （普通の JPEG とか PNG） と同じように使われるものを想定していますので、いくら古いブラウザはサポート対象外とは言っても、文書内で大切な意味を持つ画像が表示されないのはまずいだろと。 あわせて対象となる SVG 内
ブラウザから 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
GIF に変わると噂の XNG という新しいアニメーション画像フォーマットを調べてみた
ネタにマジレスな感じもしないでもないですが、GIF に変わるという新しいアニメーションフォーマット、「XNG」 が開発されたなんて話題になっていましたので、簡単にその仕組みを調べてみたのと、実際に XNG ファイルを作ってみたので書いています。 ネタにマジレスな感じもしないでもないですが、GNOME （X Window System 上で動作するデスクトップ環境） の開発者である Jasper St. Pierre 氏が、GIF に変わるという新しいアニメーションフォーマットを開発したとのことで話題になっていました。 彼自身の Blog でも書いているほか、日本語では GIGAZINE さんが取り上げていましたが、興味本位からちょっと中身を調べてみたので書いてみます。ついでに実際に XNG ファイルを作る方法にも簡単に触れています。 XNG: GIFs, but better, and a
Dropbox Pro が大幅機能追加。ディスク容量もお値段そのまま 1TB まで拡大
Dropbox の有料プラン、Dropbox Pro に共有リンクの有効期限設定やパスワードロック機能などの機能追加が行われたほか、ディスク容量も 1TB （1,000GB） に増強されるとのこと。お値段は据え置きです。 Dropbox の有料プラン、Dropbox Pro （$9.99 / 月 もしくは $99.00 / 年） に共有リンクの有効期限設定やパスワードロック機能、共有フォルダの閲覧専用権限機能に加え、Dropbox にリンクしたデバイスを紛失したり、盗難にあった場合に、そこからのデータ流出を防ぐ、遠隔削除機能などが追加されました。 また、Pro アカウントで使用できるディスク容量も現在の 100GB から、一気に 10 倍となる 1TB （1,000GB） に増強するとのこと。今後数日中に Pro アカウント利用ユーザーには適用される旨、公式 Blog でアナウンスされてい
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
Surface Pro 3 買ったら Surface Pro 2 で不満だったところをほとんど解消してくれた件
メモリが 4 GB となるのは、Pro 2 / Pro 3 共にストレージが 128 GB モデルのみです。256 GB ストレージモデル以上は メモリが 8 GB になります。 あと、Surface Pro 3 ではプロセッサが Intel i5 か Intel i7 の 2タイプになっていますが、128 GB ストレージモデルでは Intel i5 のみ。256 GB ストレージモデルは Intel i5 / Intel i7 から選択可能。512 GB モデルでは Intel i7 のみというラインナップになっています。 この辺は個人の好みでいいと思いますが、私が購入したのは、256 GB / Intel i7 搭載モデルです。 画面サイズがもうちょい大きかったらなぁの件 Surface Pro 2 のディスプレイがアスペクト比 16：9 の FHD （1,920 × 1,080）
jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」
jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js （jquery-latest.js を使うな）」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 （公開している Web サイト） で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ
SVG と背景色を使ってサイズやカラーが自在な汎用性のあるアイコンボタンを作る
SVG によるアイコンデータと CSS による背景色の指定を組み合わせてサイズやカラーを自在に変更可能なアイコンボタンを作るお話。あわせて主要 Web サービスのロゴデータを SVG で用意する方法や注意点なども。 透過 GIF や PNG 画像に背景色を組み合わせることでアイコンボタンのカラーバリエーションを簡単に作るっていうやり方は昔からありますが、これを SVG （Scalable Vector Graphics） でやることでサイズ変更にも対応しやすいやつを作るっていうお話。 手法的には目新しいことは何もありませんが、この前この Blog のデザインをリニューアルしたときに視覚的に左側サイドメニュー上部 （スマートフォン表示だと隠れてると思いますが） にある 「Follow」 メニュー部分で使ったので紹介。 やってることは簡単です。白抜きにしたい部分をそのまま白色、背景は透過するよ
iddy 終了について補足
えっと、もう長いこと新しい開発も行わず放置だったので、「やめますわ」 → 「あっそ」 で終わると思ったんですが、開発者ブログの方で書いた終わります報告がはてブでホットエントリーなやつに入ってしまったりしているので、簡単にですがここで補足しておきます。 【重要なお知らせ】iddyサービス終了のお知らせ ： iddy 開発者ブログ 【重要なお知らせ】誠に勝手ながら、2014年2月28日をもって iddy はサービスを終了いたしますのでお知らせします。詳しくはリンク先をご確認ください http://t.co/cEYqkhFzMn — iddy (@iddyjp) 2014, 2月 18 なぜやめるのか 単純に開発や保守にかけるリソースがないからです。このサービスは私が所属して （いた | いる） デジパ株式会社名義で公開していますので、会社の事業として運営されているような印象をお持ちの方もいらっ
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向
HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様が年明け、1月 2日に公開されましたので簡単に紹介。 所謂、レスポンシブ・イメージ （Responsive images） のお話ですが、HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様 （Editor's Draft） が年明け、1月 2日に公開されました。 ちょっと時間が経ってしまいました （10日以上、下書きのままで放置されていたのはナイショ） が紹介と、レスポンシブ・イメージ関連の最新動向を簡単にまとめてみます。 The picture Element, Editor's Draft, 2 January 2014 ちなみに、1つ前の仕様は下記になります。 The picture elemen
CSS Flexible Box （Flexbox） を使ってみよう - 最新仕様対応版 | WWW WATCH
スクリーンサイズや可変するウィンドウサイズなどに柔軟に対応するレイアウトが可能な CSS Flexible Box について、最新の W3C 仕様に基づいた解説をサンプルソースを使いながらやってみます。 CSS3 のモジュールとして策定されている CSS Flexible Box （CSS3 Flexbox） は、CSS によるレイアウトを実現するための仕組み。 レイアウトのための CSS プロパティは他にもありますが、CSS Flexible Box は特にスクリーンサイズや可変するウィンドウサイズなどに柔軟に対応した、その名の通りフレキシブルなレイアウトが可能です。 現在最新の仕様書は下記。2012年 9月 18日付けで勧告候補になっています。 CSS Flexible Box Layout Module - W3C Candidate Recommendation, 18 Septe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
