たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方
短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃい
Flexboxが便利すぎる！要素を自在にソートできるjQueryプラグイン作ってみた
Flexboxを使えば要素の並び替えはとても簡単。そこで、カスタムデータ属性をうまく使って、Flexboxの内容でソートできるjQueryプラグインを考えて作ってみました。 この記事では、カスタムデータ属性の値をもとに要素をソートする簡単なjQueryプラグインの作成方法を順を追って説明していきます。 どのようなプラグインかは、CodePenのデモを参照してください。 注：この記事では、jQueryプラグインの開発方法develop jQuery pluginsとflexboxの基本的な知識を持った読者を想定しています。知識が十分でない場合は、リンク先を参照してください。 アクセシビリティの問題 プラグインを作成するのに、flexboxを利用します。 デフォルトでは、flexアイテムはソースの順番に配置されていますが、orderプロパティで親要素のflexコンテナ内での順番を変更できます。
脱ネイティブ！Googleが推進する「PWA」にたった数時間で対応する方法
Googleが昨年発表した、Webアプリをネイティブアプリのように使えるようにするしくみ「PWA（Progressive Web Apps）」が話題です。既存サイトをPWA化する方法をサンプルコードをもとに解説します。 ここ最近はプログレッシブWebアプリ（Progressive Web Apps、PWA）の話題をよく耳にするとともに、これが未来のWebなのかどうかが議論の的になっています。ネイティブアプリ vs PWA論争に加わるつもりはありませんが、PWAがモバイルデバイス対応を強化し、ユーザーエクスペリエンスを向上することだけは確かです。2018年までにはモバイルからのアクセス数がほかのすべてのデバイスからのアクセス数を上回ると予測されるなかで、どうしてこの流れを無視できるのでしょうか。 良いニュースは、PWAの作成は難しくないということです。実際のところ既存のサイトをPWA化するこ
消えゆく日本文化、若者につなげ ニコニコ動画に“再生”の灯 (1/4)
今年で5周年を迎えた投稿動画サービス・ニコニコ動画。日常のクスッと笑ってしまう場面から、自作の歌や曲、ダンスや演奏など、数えきれないほどのジャンルの作品が投稿され、10～20代の支持を受けて成長してきた。 そんなニコ動で今、面白い現象が起こっている。若者文化とは縁遠そうな伝統芸能系動画が驚くほど支持されているのだ。中でも最も有名なのは、昨年8月に投稿された「【邦楽BadApple!!】傷林果」（しょうりんか）だ。 三味線の杵家七三（きねいえ なみ）さんをはじめ、箏、尺八、太鼓という和楽器で構成された「杵家七三社中」が、ニコニコ動画で非常に人気の高い同人ゲーム「東方Project」（以下“東方”）のBGMをアレンジした「Bad Apple!! feat. nomico」を演奏している。なぜ伝統芸能のプロが同人ゲームのBGMなのか。そしてなぜ音もPVもこんなに“本気”なのか。 その「先生、なに
Web制作に超便利！無料のプロトタイプ作成ツール
本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。 FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。 使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。 プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を
Google Chromeよりも速いブラウザーが登場 (1/2)
先々週登場したグーグルの新ウェブブラウザー「Google Chrome」は速かった（関連記事）。その記事で、今後のブラウザー戦争はますます熾烈になってくると書いたが、その予想は正しかった。早くも強力なライバルが登場したのである。しかも、意外なところから。 これまで、PC向けのウェブブラウザーといえば、海外の開発元から登場するのが常だった。だが、日本にも世界に誇れる強力なブラウザーがあるのを忘れていないだろうか。「Lunascape」である。世界最速のJavaScriptエンジンを搭載した「Lunascape5.0α」（コードネーム：Genesis）が本日公開されたのだ。 なんとトリプルエンジン化 Lunascapeといえば、かゆいところに手が届くカスタマイズ機能を搭載して、ハードコアなネットユーザーの間で支持されているタブブラウザーだ。しかし、「Lunascape？ ちょっと待て！」と考え
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
