たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方
短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃい
便利すぎる！さまざまなデバイスのサイズを同時に確認しながら作業できる、Web制作の連携支援ツール -Solis
最近のWeb制作では、異なるスクリーンサイズでの確認が欠かせません。 スマホ、タブレット、デスクトップ、それぞれに異なるスクリーンサイズが多数あり、これらを一つ一つ確認するのはなかなか大変です。 そこで作業しながら、同時に確認できるツールの登場です。 HTML, CSS, JavaScriptで使用しているエディタ、Photoshop, Illustratorなどの画像編集ソフトで作業しながら、異なるスクリーンサイズでシームレスに確認できるWeb制作の連携支援ツールを紹介します。 私もさっそく使用してみましたが、Web制作のワークフローが劇的に便利になります！ Solis -A Live Design Output Solisの大きな特徴は、さまざまなスクリーンサイズに対応したマルチビューポートのプレビューを備えていることです。デフォルトで主要デバイスのビューポートが用意されており、コード
セクション単位でアップダウンできる「jQuery Section Navi Plugin」 – bl6.jp
jQuery Section Navi Pluginは、コンテンツのセクション単位でアップダウンできるボタンを実装できるjQueryプラグインです。縦長ページなどで、区切りよくコンテンツを読み進めていきたい時なんかに便利ですね。 以下、jQuery Section Navi Pluginの実際のデモページになります。 デモ デモではセクションごとにコンテンツが縦に並べられていて、画面右下には「Down」と書かれたボタンが表示されています。ちなみに大きい画面でコンテンツが下まで見えている状態ではボタンが表示されないので、その場合は画面の横幅を縮小することでボタンが表示されるかと思います。 Downボタンをクリックすると、セクション単位でスクロールされます。下へスクロールされると「Down」の他に「Up」というボタンも表示されます。Down／Upボタンからセクション単位でサクサクと移動できるの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
