July 2016
Intermediate to advanced
384 pages
10h 11m
Japanese
Content preview from CSSシークレット ―47のテクニックでCSSを自在に操る
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
課題
2つの画像の違いを示したいことがあります。何らかの出来事の前後を
比較するという利用例が一般的です。例えばフォトギャラリーで画像処理
の結果を示したり、エステティックサロンでの施術の効果を紹介したり、
災害の前後の航空写真を比較するなどの目的で使われています。
最もよく使われているのは、単に2 つの画像を横に並べるやり方です。
しかしこの方法には、人間の目はとても明白な違いにしか気づかず、細か
な違いは見逃してしまう問題があります。比較が目的ではない場合や違い
が明白な場合にはこれでもかまいませんが、その他の場合にはより効果的
な方法が求められます。
ユーザーエクスペリエンスの観点からこの問題にアプローチした、さま
ざまな解決策が考えられています。アニメーション GIF やCSSアニメーシ
ョンを使い、同じ位置に 2 つの画像を交互に表示するテクニックがよく使
われます。画像を並べて表示するよりはずっと優れたアイデアですが、
ユーザーの負担は高くなります。すべての違いに気づくためには、しばら
く画像を見続けなければなりません。
これよりもさらにユーザビリティが高いのが、「画像比較のスライ
ダー」と呼ばれるウィジェットを使った解決策です。ここでは両方の画像
が同じ位置に表示され、分割位置を表すバーをドラッグすることによって
画像の表示が切り替わります。もちろん、このようなウィジェットは
HTMLには用意されていません。既存の要素を使い、同等の機能を実現す
る必要があります。近年ではさまざまな実装が登場しています
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.