このページの本文へ

CSSを昔覚えた人こそチェックしておきたい

全部知ってる?今後のサイト制作で押さえたいCSSの最新プロパティ9選

2016年06月29日 19時08分更新

Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

CSSの登場から20年。この間、CSSはものすごく進化していました。「それって昔のやり方ですね」なんて言われないように、今後のサイト制作でチェックしておきたい最新のプロパティ(と関数)が学べる記事を9つ、厳選して紹介します。まだまだドラフト段階の仕様もありますので、各自記事の解説をチェックしてください。

1.グリッドレイアウトが捗るGrid Layout Module

01.png

CSSレイアウトの常識が変わる!Grid Layout Moduleが胸アツ(WPJ)

CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxをよく使いますよね。仕様策定中のGrid Layout Moduleなら、もっと効率が上がりそうです。

2.テキストの回り込みが簡単に! CSS Shapesプロパティ

02.png

CSS Shapesでテキストを回り込ませるレイアウトを表現(Webクリエイターボックス)

Webデザインは四角形のボックス型になりがちです。しかし、CSS Shapesを使えば、テキストを画像などの形にあわせて回りこませたり、流しこんだりできます。

3.段組レイアウトがラクにできるcolumnsプロパティ

04.png

これは便利!CSS3で段組みを作るいまどきのやり方をまとめてみた(WPJ)

CSSのマルチカラム(段組)レイアウトモジュール機能を使えば、Webサイト上でも印刷物と同じような段組が実現できるので、どのスクリーンサイズにも適応するレスポンシブなマルチカラムが設定できます。

4.Web ComponentsとflexでUIをレスポンシブなコンポーネントに

03.png

レスポンシブに革命を!Web Componentsを使ったUI制作がスゴい!(WPJ)

CSSプロパティではありませんが、レイアウト系で注目したい仕様といえば、Web Components。コンポーネント化したUI部品をflexプロパティでレスポンシブ化しておくと、使い回してもレスポンシブ対応になります。

5.動画のサイズ調整が柔軟にできちゃうobjectプロパティ

05.png

まだ使ってないでしょ?動画や画像のサイズ調整にobject-fitとobject-positionが便利すぎ(WPJ)

object-fitとobject-positionプロパティは、画像や動画のアスペクト比を崩すことなくサイズ調整(特にレスポンシブ!)ができる、Webサイトのレイアウトに便利なプロパティです。

6.画像要素の表現が深くなるmix-blend-modeプロパティ

06.png

CSS3のブレンドモードが素敵! 新プロパティmix-blend-modeを使いこなそう(ICS MEDIA)

mix-blend-modeは要素を重ねたときの見え方を指定するCSSプロパティです。ブレンドモードは「焼き込み(color-burn)」「オーバーレイ(overlay)」などのプロパティ値を指定することで、画像の見え方が大きく変化します。

7.画像を自由に切り抜けるmaskプロパティ

07.png

もうすぐ使える!? CSSのmaskとSVGならフォトショ不要で画像を自由に切り抜ける(WPJ)

CSSのborder-radiusを使って画像を円形に切り抜く方法をよく見かけますが、CSSのmaskプロパティを使えば自由な形のマスクができます。

8.Webフォントを滑らかに! font-smoothプロパティ

08.png

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)(jdash 2000 site)

font-smoothプロパティはフォントのアンチエイリアスを制御するプロパティ。ただし、現状はMacしか対応していないので、記事ではtransformとtext-shadowのプロパティを使ったテクニックも紹介されています。

UPDATE:font-smoothプロパティはすでに標準化が見送られており、WebKitとFirefoxではプリフィックス付きのfont-smoothingプロパティが実装されています。詳しくは、MDNを参照してください。

9.calc()関数でプロパティの値設定を簡単に

09.png

CSSで計算(四則計算)が行えるcalc()関数を使ってみよう(WWW WATCH)

最後はプロパティではありませんが、プロパティの値を計算式で指定できるcalc()関数を。「背景画像を常に左右中央から10pxだけ左に配置したい」など4実例によって、具体的な記述方法が紹介されています。これは便利ですね。

いかがでしたか? こんな便利なプロパティがあったのか、と目からウロコの記事が1つでもあったらしめたものです。CSSに限らず、Web技術の進歩は目覚ましいものがあります。最新情報をいち早くチェックして、ライバルに差を付けましょう。

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く