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
Google Chrome でシマンテック （旧ベリサイン） 発行 SSL 証明書の有効期限が強制的に短縮されたり、EV （拡張認証） が無効になるかもという話
Google Chrome でシマンテック （旧ベリサイン） 発行 SSL 証明書の有効期限が強制的に短縮されたり、EV （拡張認証） が無効になるかもという話 最大手の認証局 （CA：Certification Authority） であるシマンテック（旧ベリサイン）が、適切な認証手続きを行わずに SSL 証明書を発行していたとされる問題で、Chrome チームが提案した証明書有効期限の段階的な短縮や EV 証明書の無効化についてまとめます。 週末に某 2ch まとめサイトで取り上げられて話題になっていましたが、Google Chrome において、シマンテック - Symantec （旧ベリサイン - Verisign） 発行の SSL 証明書がブロックされるかもという話。 まとめサイトで書かれていたような 「問答無用でブロック」 というのは煽りタイトルなのであまり真に受けるのはやめた
Twitter アプリで投稿する画像に代替テキストを追加できるようになった件
Twitter の iOS 及び Android アプリを利用している場合、アクセシビリティ設定から 「画像の説明を追加」 機能を有効にすることで、投稿する画像に説明文を追加することができるようになりました。 この記事を書いた当時はオプション扱いだったのですが、現在はデフォルトでこの機能が有効になっています。文末に追記してありますのであわせてご確認ください。 Twitter から公式にアナウンスがありましたが、Twitter の iOS 及び Android アプリを利用している場合、アクセシビリティ設定から 「画像の説明を追加」 機能を有効にすることで、投稿する画像に説明文を追加することができるようになったそうです。 「画像の説明」 として入力したテキストは、タイムラインに表示される際、画像の代替テキスト （alt 属性値） として利用されますので、読み上げ環境を利用している人でも投稿さ
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
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
jQuery は次期リリースから 1.x 系、2.x 系共にメジャーバージョン番号を jQuery 3.x で統一へ
jQuery 公式 Blog は、10月 29日付けで投稿された記事「jQuery 3.0: The Next Generations」 で、次期リリースから現状の jQuery 2.x 系の後継を 「jQuery 3.0」、1.x 系の後継を 「jQuery Compat 3.0」 と名称変更し、今までメジャーバージョン番号が異なっていた 2つの jQuery を、jQuery 3.x に統一すると発表しました。 jQuery 3.0: The Next Generations ： Official jQuery Blog 該当の Blog 記事が公開されたときに Twitter でもつぶやいたんですが、簡単に言えば下記のようなメジャーバージョン番号の統一と、名称変更が、次のリリースから行われます。 2.x系 → jQuery 3.0、1.x系 → jQuery Compat 3.0 に
SSL 3.0 の脆弱性 （POODLE） 対策で Web サーバの SSL 3.0 を無効にした件とブラウザ側の対処まとめ
SSL 3.0 の脆弱性 （POODLE） 対策で Web サーバの SSL 3.0 を無効にした件とブラウザ側の対処まとめ SSL 3.0 に存在する脆弱性、通称 「POODLE」 に関連して、自分が管理している Web サーバ （Apache） の SSL 3.0 を無効にした際の設定方法と、各ブラウザごとに SSL 3.0 を無効にする方法などをまとめています。 2014年 10月 14日 に発表された「Secure Sockets Layer（SSL）」のバージョン 3.0 （SSL 3.0） に存在する脆弱性 （CVE-2014-3566）、通称 「POODLE （Padding Oracle On Downgraded Legacy Encryption）」 ですが、これに関連して、自分で管理している Web サーバ （Apache） の SSL 3.0 を無効にしました。 そ
Happy birthday CSS - CSS が最初の提案から 20周年
1994年 10月 10日に、Opera Software 社の CTO、ホーコン・ウィウム・リー （Håkon Wium Lie） 氏によって CSS が提案されてから今年で 20年が経過したそうです。 Web のフロントエンド界隈の方々におかれましてはほぼ毎日書いているであろう CSS （Cascading Style Sheets） ですが、1994年 10月 10日に、Opera Software 社の CTO、ホーコン・ウィウム・リー （Håkon Wium Lie） 氏によって提案 （Cascading HTML Style Sheets -- A Proposal） されてから今年で 20年が経過したそうです。 Dev.Opera Blog では、CSS 20周年に際して、リー氏のインタビューを掲載しています。 CSS: It was twenty years ago tod
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
吹き出しやリストマーカーに使える三角形を CSS で作る
特に目新しい方法ではないですが、デザイン内に出てくることの多い三角形のあれ （謎） を簡単に CSS で作る方法について。 しばらく CSS ネタ的なの書いていませんでしたので書いてみようと思います。 三角形のあれというのは、よくリスト型メニューにアイコン的に使われていたり、メインメニューでアクティブな項目に付けたり、Tips などを表示する際に吹き出し的な見た目を作る場合に使われたりする、下記のような部分のことです。 これを CSS のみで簡単に再現する方法を解説してみます。CSS は class の付け方でカラーやサイズなどを簡単に適用できるようにしてみましょう。また、今どきっぽく Sass 向けに mixin （ミックスイン） のサンプルも紹介しておきますので参考まで。 CSS による基本的な三角形の作り方 いまさら詳しく解説するまでもないですが、下記のように border プロパテ
Facebook、ウォールの投稿を外部サイトに埋め込む機能を限定で提供開始
Facebook が、まだ利用できるユーザーは限定されているものの、ウォールの投稿を外部サイトに埋め込む機能を提供開始しました。Twitter の投稿を埋め込むのと同じように、埋め込んだ投稿に直接いいねしたり、シェアしたりすることもできるようです。 Introducing Embedded Posts ： Facebook Newsroom Introducing Embedded Posts ： Facebook Developers Today, we are beginning to roll out Embedded Posts to make it possible for people to bring the most compelling, timely public posts from Facebook to the rest of the web. Embedded
はてなブックマークが直したらいいところ
@Hamachiya2 さんが 「はてなブックマークのだめなところ」 って記事を書いてたんですけども、これ、はてブの方でちょっと HTML のコーディング （CSS の方でもいいけど） を修正するだけで簡単に直るんですよね。 なので簡単にソースコードの修正案を挙げてみるっていう余計なお世話。 これ、文字と文字のあいだ、行間に、けっこう大きな「すきま」があるんですね。で、そこをクリックしてしまう。 はてなの皆さんは、MacBookとかタブレットばかり使っているリア充オシャレメガネスタバ野郎ばかりだからきっと気づかないのかもしれませんが、ぼくみたいにふつうのVAIOとかマウスとか使ってる人がいることも忘れないでほしいです。 はてなブックマークのだめなところ ： ぼくはまちちゃん！(Hatena) から引用 画像は Hamachiya2 さんのサイトから引用しますが、こんな感じで行間をクリックす
iPhone や iPad がクレジットカード決済端末になる 「Square」 のアカウント作ってみた
Twitter 創業者、Jack Dorsey 氏が創業した 「Square」 は、スマートフォンをクレジットカード決済端末にする画期的なサービス。米国では 2010年からすでにサービスが提供開始されていて、当時、日本でもすげーって話題になりましたが、それから 3年、ついに日本でも三井住友カードとの業務提携により Square が利用できるようになりました。 Square − あなたのビジネスがうまくいく、いちばんスマートな方法です で、早速アカウントを作成してみましたよ。 Square とは 冒頭で書いたとおり、Square はスマートフォンを決済端末にして、個人やお店が簡単にクレジットカードによる決済を行えるようにする仕組み。 通常は加盟店審査を経て、その後、決済用の端末を導入するなんていう面倒な手続きが必要なため、個人や小さい店舗でクレジットカード決済を導入するのは敷居が高かったわけ
CSS からベンダプレフィックスという仕組みが消える日
Google Chrome が採用する新しいオープンソースレンダリングエンジン 「Blink」 のプロジェクトページの記述や Mozilla の方針から、今後ベンダプレフィックスがなくなるかもというお話 本の虫さんで、「Blink、新機能に対して新たなベンダープレフィクスを追加しない決定」 という記事が上がっていた （ちなみに border-radius は現状、-moz- も -webkit- も不要で使えますよ） のですが、これ、確か Blink レンダリングエンジンが発表された時から FAQ とかに書かれていましたよね？ なので今さらだと思いますが、当 Blog では当時触れていなかったし、いい機会ですので簡単に書いてみたいと思います。 Google の Chromium プロジェクトにおいて、レンダリングエンジンを Webkit から、Webkit をフォークして開発された新しいオ
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
右クリックで画像保存ができない時のもっと楽な方法 | WWW WATCH
ライフハッカーさんで、Web ページ内の画像を右クリック保存できないときに、Google Chrome や Firefox のインスペクタから、該当のソースコードを見つけて云々みたいな方法が紹介されていたんですが、インスペクタ開くところまで行ったなら、もっと簡単に Web ページ内で読み込まれてる画像を見る方法があるので書いてみます。 右クリックで画像保存ができない時はこの方法を試すべし！ : ライフハッカー Google Chrome の場合は 「インスペクタ」 → 「リソース」 タブ Google Chrome の場合は、ページ内で右クリックしてコンテキストメニューを表示、「要素を検証」 までは記事で書かれている通りでいいんですけども。 その後、要素を見るんじゃなくて、そのすぐ横にある 「Resources」 タブをクリックして、ちょいとを見ると、「images」 ってところに見ている
Google Reader 終了で FeedDemon に戻った...しかし...
Google Reader 終了のお知らせを受け、移行先を探した結果、Web サービスとして提供されている RSS リーダーはやめて、デスクトップアプリに戻るという選択をしましたが、そこにも Google Reader 終了の余波が... いや～ 昨日は Google Reader 終了のお知らせで Web 界隈は賑やかでしたが、皆さん代替サービスへの移行具合はいかがでしょうか。 A second spring of cleaning ： Official Blog 長年、しかもほぼ毎日使ってるツールが突然終わります宣言されるっていうのはかなりキツイもんですが、サービス提供側にも色々な事情がおありでしょうから、終わること自体は仕方ないです。なので、私も昨日、PC で使う場合に関してだけ取り急ぎ別の環境に Google Reader で取得していたフィードをすべて引っ越しました。 結果として
5分でわかる Livefyre コメントの導入方法と使い方
Livefyre コメントシステムの導入方法から実際のコメント方法、さらに管理画面からのコメント管理方法まで 5分でわかるように解説します。 1つ前のエントリーで TechCrunch がコメントシステムを Facebook コメントから、Livefyre に変更した件について書いたんですが、その最後に、当 Blog もちょっと前から Livefyre に切り替えてるんで、その導入方法とか書きます予告をしました。 Facebook コメントにしたら荒らしと同時に有益なコメントまで減ったらしい なので、予告通り、Livefyre の導入から設定、実際にコメントを投稿するまでの流れについて解説してみます。久しぶりの 5分でわかるシリーズ。 Livefyre とは？ まずは Livefyre についてですが、日本語での紹介記事としては TechCrunch Japan の下記の記事が特徴的な部分
Facebook コメントにしたら荒らしと同時に有益なコメントまで減ったらしい
数日前に TechCrunch がコメントシステムを Facebook コメントから、Livefyre に変更しましたっていう記事を上げてて、その理由が、荒らし対策に記名制の Facebook コメントを導入して、「荒らしを減らす」 って意味では効果は出たんだけど、同時にそれまで寄せられてた有益なコメント、コメント欄での活発な議論的なものまで減っちゃったから って書いてて、そういうこともあるのねと興味深かったので紹介してみます。 Commenters, We Want You Back ： TechCrunch It was early 2011 and TechCrunch's comment section was overrun with trolls. Bullies and asshats were drowning out our smart commenters. We ha
W3C が HTML5 仕様策定完了を発表
日本時間では昨日の深夜でしたが、W3C が HTML5 （および、Canvas 2D） に関する仕様策定完了を発表いたしました。両仕様とも、勧告候補 （Candidate Recommendation） となり、実装、運用テストによる検証段階に入ります。 また、同時に HTML 5.1、HTML Canvas 2D Context, Level 2 の草稿も公開され、次バージョンの仕様策定がスタートします。この辺は以前から発表されていた予定 （こっちも参照） に則っています。 W3CがHTML5仕様策定完了を発表、相互運用性テストおよびパフォーマンス向上へ ： W3C プレスリリース なお、勧告候補になっても、以前から続いている、例えば hgroup 要素どうすんの？的な議論は継続していますが、こういう個々の機能の話が全体の仕様策定を遅延させないように、仕様をモジュール化する、拡張仕様 （
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
