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.
知っておくべきポイント
基本的な3次元トランスフォームプロパティ、 P.120の「平行四辺
形」
課題
平行四辺形をさらに一般化したのが台形で、向かい合う辺のうち 1 組だ
けが平行です。もう1 組の辺については、平行でなくてもかまいません。
台形はしばしばタブなどに利用されていますが、CSSを使って生成するの
がとても難しい図形として知られていました。手間をかけて背景画像を用
意するか、長方形の左右に擬似要素を使ったボーダーとして三角形を加え
る（図3.39 ）といった方法がとられていました。
このボーダーによるアプローチでは画像が必要ありません。そのため
HTTPリクエストの回数を節約でき、異なるサイズの台形にも対応できま
す。しかし、理想的なアプローチとは言えません。擬似要素を2 つ消費し
てしまうほか、スタイルの柔軟性が損なわれます。例えば、この台形に
ボーダーや背景のテクスチャーあるいは角の丸めを追加するといったこと
はおそらく不可能です。
台形を生成するための既存のテクニックはいずれも、かなり煩雑で保守
が困難です。そのため、実世界でのタブの多くは両側の辺が斜めになって
いるにもかかわらず、Webでのタブはほとんどが長方形です。台形のタブ
を作るための、クリーンで柔軟な方法はないでしょうか。
台形のタブ
13
142
3章：形状
図3.39
擬似要素のボーダーを使って表現 さ
れた台形。濃い色の部分が擬似要素
を表す
Trapezoid
解決策
仮に、既存の2 次元トランスフォームを組み合わせて台形を生成できる
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.