lengths)についての覚え書きです。これは新しく追加された長さの単位です。Draftの最新版へのリンクです。Draftの方は2011年12月13日版を参考にしていますが、ページが見つからないので最新版へのリンクにしてあります。各単位は次のようになっています。Draftを指します。これらは初期包含ブロックのサイズを基準にしています。ビューポートの高さまたは幅が変更されたとき、それに応じてスケーリングされます。初期包含ブロックのwidthの1/100に等しい。初期包含ブロックのwidthの1%に等しい。初期包含ブロックのheightの1/100に等しい。初期包含ブロックのheightの1%に等しい。vminvwまたはvhの小さい方に等しい。初期包含ブロックの幅が1000pxの場合、1vwは10pxと同じ意味になります。初期包含ブロックの高さが500pxの場合には1vhは5pxと同じ。(1vmin)は5pxです。簡単なサンプルを作ってみましたのでご確認ください。表示領域のサイズを変更してリロードすると分かると思います。Verou作のpolyfillをdrublicがForkしたものを使っています。一応IE9以外でもそれっぽく見れると思います。Queries」を使っています。Ipsum」で生成したものです。HTMLとCSSは次のようになっています。CSSは関係ない部分は省略しています。90vhの指定により、このブロックは必ず表示領域内に収まるようになっています。h1とpのフォントサイズの指定ですが、普通にvwを使ったのでは表示領域が小さいときに文字が小さすぎて読めなくなってしまうので、まず最低ラインを決めておきます。次に、表示領域の幅が500px以上の場合の指定でvwを使い、常に表示領域に対して相対的なサイズで文字が表示されるようにします。最後は小さいときの逆で、最大値を設定しておきます。Queriesを使って最大値と最小値を指定しておかないと非常に読みづらいページになってしまう可能性があるので、そこらへんは気をつけたほうがいいかなーと思います。この単位のいい使いどころがまだよく分からないので(対応ブラウザも少ないですし)、しばらく使うことはなさそうです。Snook.caの人はLightboxや画像に使うといいんじゃないかと書いていました。あと、ちょっと気になってることが。Draftではvmがvminに変更されているみたいですが、このままvminが正式に決定して、いつかこの単位を普通に使うようになったときにIE9が現役だと、IE9用にvmも書く必要が出てくるんじゃないかなーと。そのくらい上手く調整しろって言われればそれまでなんですけどね......。いう記事ではいつも書いていることですが、この記事で書いたものは決定した仕様ではありません。今後変更される可能性もありますのでお気をつけください。Requestを送るIssueを作成するTwitterでメンションする記事を共有TwitterFacebookPocketはてなブックマークLINEコンテンツホームブログこのサイトについて。