Google Chrome 65 が Beta リリース、CSS Paint API、display: contents のサポートなど
Google Chrome 65 が Beta リリース、CSS Paint API、display: contents のサポートなど Google Chrome 65 がベータリリースされ、モダンブラウザでは初めて、CSS Paint API を実装した他、Server Timing API への対応、display: contents のサポートなどが行われています。 CSS Paint API とは Houdini Task Force （CSS Houdini） という取り組みがあります。Houdini Task Force は、超簡単に言ってしまえば、JavaScript によって CSS を拡張し、より自由に操作するための各種 API 群を標準仕様として策定しましょうという開発者の集合体で、Mozilla、Apple、Opera、Microsoft、HP、Intel、Goog
Google Chrome でシマンテック （旧ベリサイン） 発行 SSL 証明書の有効期限が強制的に短縮されたり、EV （拡張認証） が無効になるかもという話
Google Chrome でシマンテック （旧ベリサイン） 発行 SSL 証明書の有効期限が強制的に短縮されたり、EV （拡張認証） が無効になるかもという話 最大手の認証局 （CA：Certification Authority） であるシマンテック（旧ベリサイン）が、適切な認証手続きを行わずに SSL 証明書を発行していたとされる問題で、Chrome チームが提案した証明書有効期限の段階的な短縮や EV 証明書の無効化についてまとめます。 週末に某 2ch まとめサイトで取り上げられて話題になっていましたが、Google Chrome において、シマンテック - Symantec （旧ベリサイン - Verisign） 発行の SSL 証明書がブロックされるかもという話。 まとめサイトで書かれていたような 「問答無用でブロック」 というのは煽りタイトルなのであまり真に受けるのはやめた
Firefox Nightly が position: sticky; に対応
Firefox Nightly で position: sticky; がサポートされたので紹介。指定することで特定の要素を相対位置に固定表示することが可能です。 ちょっと前の話になってしまいますが、現在、Firefox Nightly としてリリースされている、Firefox 26 で、CSS の position プロパティに対する新しい値、position: sticky; がサポートされました。 今のところ、Firefox Nightly でもデフォルトでは無効になっていますが、layout.css.sticky.enabled を true にすることで試すことができます。 h2 {position: sticky} ： Air Mozilla Sticky Positioning position: sticky; とは 簡単にいってしまえば、position プロパティの値と
Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる
Windows で 「游ゴシック」 フォントを使用すると細字で表示されちゃって困るという問題について、CSS の仕様を基に考えてみたいと思います。 Windows で 「游ゴシック」 フォントを使用すると細字で表示されちゃって困るという話、なんか Twitter で下記の記事が回ってきたので、あぁそういえばそんな問題がありましたよねと思い出したのですが、ちょっと気が向いたのでこれを CSS の仕様を基に考えてみたいと思います。 Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！ ： Cherry Pie Web 要するに上記の記事の方が言うように制作者サイドの問題なのか、それとも Windows のレンダリングが悪いのかという話ですが、結論から言えば Windows が悪いってことでいいんじゃないかと思います。あと気になって自分の環境で調べてみたら、少なくとも Wi
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 がサービス開始した年らしい。テレビやラジオをつければ小室哲哉氏プロデュースの曲ばっかり流れていた記憶が。 当時、専門学校でメカトロ
5分でわかる正しい Web サイト常時 SSL 化のための基礎知識
Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめてみました。メリットやデメリット、証明書の種別からリダイレクト設定などについても解説しています。 HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの SSL 対応、特に Google が推奨している Web サイトをすべて HTTPS で配信する、所謂 「常時 SSL 化」 についての話を聞いたり、実際にお客様から相談されたりするケースが増えてきました。 そこで、いい機会だしその辺に関する情報をまとめておこうかな～ と思って書いてみた、恒例の （？） 5分でわかるシリーズ。書き終わって見たところ絶対に 5分じゃ無理っていう文章量になっててどうしようかなぁとも思ったんですが、気にせず公開してみます。 常時 SSL
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
吹き出しやリストマーカーに使える三角形を CSS で作る
特に目新しい方法ではないですが、デザイン内に出てくることの多い三角形のあれ （謎） を簡単に CSS で作る方法について。 しばらく CSS ネタ的なの書いていませんでしたので書いてみようと思います。 三角形のあれというのは、よくリスト型メニューにアイコン的に使われていたり、メインメニューでアクティブな項目に付けたり、Tips などを表示する際に吹き出し的な見た目を作る場合に使われたりする、下記のような部分のことです。 これを CSS のみで簡単に再現する方法を解説してみます。CSS は class の付け方でカラーやサイズなどを簡単に適用できるようにしてみましょう。また、今どきっぽく Sass 向けに mixin （ミックスイン） のサンプルも紹介しておきますので参考まで。 CSS による基本的な三角形の作り方 いまさら詳しく解説するまでもないですが、下記のように border プロパテ
CSS filter プロパティで 「半透明ガラス」 効果を再現してみる
2つ前の記事、「Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に」 で、::backdrop 疑似要素に色々スタイル当てて遊んでたとき、::backdrop 疑似要素に対しては半透明の白いレイヤーになるようにスタイル当てて、その上で、CSS filter プロパティを使って画面全体をぼやかしたら、iOS 7 （Windows Aero ...） とかで使われてる、所謂 「半透明ガラス」 っぽい効果が出せるんじゃね？ と思ってやってみました。 実際に iPhone の Safari で表示してみた例が下記の画像です。 ただし、dialog 要素や ::backdrop 疑似要素を使っちゃうと、現時点では Chrome Canary で、さらにフラグを立てないと動作しないっていう、ほとんどの人が試せない状態になってしまうので、今回は div 要素を J
livedoor 相互 RSS を使ってアンテナページ作ってみた
livedoor 相互 RSS という、フィードを登録して簡単にお気に入りの Web サイトの更新情報を自分のページに表示できるサービスを使って、リンク集を作ってみました。 ホームページの時代が去って、ブログの時代になると、独立したリンクページを置くサイトは減った。僕はリンク集の代わりに、好きなアカウントの「はてなアンテナ」から良サイトの情報を得た。「あの人がアンテナに登録して更新チェックしているサイトなら、面白いはずだ」と判断して、新しいサイトに次々と出会えたのだ。 だが、今や独立したリンクページを持つサイトは少なく、あってもまず更新されない。はてなアンテナも、リンク切れサイトの名前が並ぶ廃墟と化している。 2013年の今こそ、ブログにリンク集を設置してほしい ： 幻視球ノート から引用 これ、今だとリンク集ではなくて相互RSSなんだと思う。「相互RSS」を知らない人も多いと思うが、2ち
Selectors Level 4 の Working Draft が更新される
5月 2日付けですが、Selectors Level 4 の Working Draft （草案） が更新されました。 Selectors Level 4 自体は 2011年 9月 29日の Selectors Level 3 仕様の勧告とあわせて最初の Working Draft が公開されていますが、そこから今回で 2回目の更新となります。 Selectors Level 4 W3C Working Draft 2 May 2013 Working Draft 内の、「Selectors Overview」 に Selectors Level 4 を含めた、セレクタの一覧がありますので、下記に引用しつつ簡単に日本語での解説も付け加えておきましたが、Selectors Level 4 ではセレクタがより一層便利になっていますので、早いところブラウザ側で実装されるといいですね。 ちなみに、
hgroup 要素が HTML5 勧告候補から削除される
今さら感がハンパないのと、ちょっと前の話になってしまいますが、hgroup 要素が HTML5 の勧告候補 （Candidate Recommendation） から削除されるようです。 WG Decision on request to drop hgroup from HTML5 ： W3C Mailing lists plan on removing hgroup from spec ： W3C Mailing lists as per the chairs decision I plan to remove hgroup from the HTML5 spec. It will be made non conforming, but the implemented parsing rules and user agent CSS rules will remain (as is u
jQuery Core 1.9 アップグレードガイド 日本語訳
ちょっと話題としては乗り遅れた感が漂いますが、先月末に jQuery 1.9 の正式版、および jQuery 2.0 のベータ版がリリースされました。 jQuery 1.9 final, jQuery 2.0 beta, Migrate final released ： Official jQuery Blog これに際して公開された、jQuery 1.9 への移行ガイド 「jQuery Core 1.9 Upgrade Guide」 を翻訳してみたので下記に公開してみます。 jQuery 1.9 / 2.0 とは？ jQuery 2.0 は IE 6/7/8 への対応をやめることで、より軽量で高速、そして安定化を目指した jQuery のメジャーバージョンアップ版ですが、jQuery 1.9 は 2.0 と 完全な互換性を持ちつつも、レガシーブラウザへの対応が可能なバージョンで、IE 8
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
