CSSの登場から20年。この間、CSSはものすごく進化していました。「それって昔のやり方ですね」なんて言われないように、今後のサイト制作でチェックしておきたい最新のプロパティ（と関数）が学べる記事を9つ、厳選して紹介します。まだまだドラフト段階の仕様もありますので、各自記事の解説をチェックしてください。
1.グリッドレイアウトが捗るGrid Layout Module
『CSSレイアウトの常識が変わる！Grid Layout Moduleが胸アツ』（WPJ）
CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxをよく使いますよね。仕様策定中の「Grid Layout Module」なら、もっと効率が上がりそうです。
2.テキストの回り込みが簡単に！ CSS Shapesプロパティ
『CSS Shapesでテキストを回り込ませるレイアウトを表現』（Webクリエイターボックス）
Webデザインは四角形のボックス型になりがちです。しかし、CSS Shapesを使えば、テキストを画像などの形にあわせて回りこませたり、流しこんだりできます。
3.段組レイアウトがラクにできるcolumnsプロパティ
『これは便利！CSS3で段組みを作るいまどきのやり方をまとめてみた』（WPJ）
CSSのマルチカラム（段組）レイアウトモジュール機能を使えば、Webサイト上でも印刷物と同じような段組が実現できるので、どのスクリーンサイズにも適応するレスポンシブなマルチカラムが設定できます。
4.Web ComponentsとflexでUIをレスポンシブなコンポーネントに
『レスポンシブに革命を！Web Componentsを使ったUI制作がスゴい！』（WPJ）
CSSプロパティではありませんが、レイアウト系で注目したい仕様といえば、Web Components。コンポーネント化したUI部品をflexプロパティでレスポンシブ化しておくと、使い回してもレスポンシブ対応になります。
5.動画のサイズ調整が柔軟にできちゃうobjectプロパティ
『まだ使ってないでしょ？動画や画像のサイズ調整にobject-fitとobject-positionが便利すぎ』（WPJ）
object-fitとobject-positionプロパティは、画像や動画のアスペクト比を崩すことなくサイズ調整（特にレスポンシブ！）ができる、Webサイトのレイアウトに便利なプロパティです。
6.画像要素の表現が深くなるmix-blend-modeプロパティ
『CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう』（ICS MEDIA）
mix-blend-modeは要素を重ねたときの見え方を指定するCSSプロパティです。ブレンドモードは「焼き込み（color-burn）」「オーバーレイ（overlay）」などのプロパティ値を指定することで、画像の見え方が大きく変化します。
7.画像を自由に切り抜けるmaskプロパティ
『もうすぐ使える!? CSSのmaskとSVGならフォトショ不要で画像を自由に切り抜ける』（WPJ）
CSSのborder-radiusを使って画像を円形に切り抜く方法をよく見かけますが、CSSのmaskプロパティを使えば自由な形のマスクができます。
8.Webフォントを滑らかに！ font-smoothプロパティ
『Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）』（jdash 2000 site）
font-smoothプロパティはフォントのアンチエイリアスを制御するプロパティ。ただし、現状はMacしか対応していないので、記事ではtransformとtext-shadowのプロパティを使ったテクニックも紹介されています。
9.calc()関数でプロパティの値設定を簡単に
『CSSで計算（四則計算）が行えるcalc()関数を使ってみよう』（WWW WATCH）
最後はプロパティではありませんが、プロパティの値を計算式で指定できるcalc()関数を。「背景画像を常に左右中央から10pxだけ左に配置したい」など4実例によって、具体的な記述方法が紹介されています。これは便利ですね。
※
いかがでしたか？ こんな便利なプロパティがあったのか、と目からウロコの記事が1つでもあったらしめたものです。CSSに限らず、Web技術の進歩は目覚ましいものがあります。最新情報をいち早くチェックして、ライバルに差を付けましょう。
