デバイスの高さまで縦を広げるCSSのvhの単位を使ってデバイスやブラウザの高さを要素にセットするサンプルです。100vhを指定するとデバイスの縦幅いっぱいの高さとなります。以下の親要素(破線の部分)の高さは300pxを指定しています。デバイスの横のサイズを扱うCSSのvwを使ってデバイスのサイズをデザインで扱うサンプルです。viewportが「width=device-width」のとき、デバイスの横幅のサイズはユーザの端末次第となります。ぼかしている画像の一部が鮮明に見える表現です。文字の縦書き文字を縦書きにするスタイルの活用事例です。CSSでは縦書きができるようになっています。原稿用紙や雑誌のような縦書きレイアウトも簡単に作ることができます。スタイルをまとめて一つにするSCSSで細分化したCSSをまとめて一つのCSSにするサンプルです。ホームページを運用していると、いくつも同じようなデザインを流用することがしばしばあります。要素の大きさや縦横のサイズをCSSで変更するサンプルです。トリミングしたり、ユーザーがカスタマイズするような場面で、要素を可変にしたいときがあるとします。そんなときはCSSで制御できます。計算した値をスタイルに使うCSSのcalcを使って計算結果の値でデザインするサンプルです。CSSで値を記入する際、レスポンシブを意識してパーセントで書くことがよくあります。「左右に余白をとりたい」とき余白もパーセントでします。画像の切り取り画像をCSSで四角く切り抜くサンプルです。画像の編集ソフトは不要です。CSSの「clip」を使います。加工した画像と切り抜いた画像を重ねると目を引く演出ができます。画像のぼかし、補正CSSのfilterを使って簡単な画像補正が可能です。何がどう調整できるのかサンプル一覧を作りました。フォトショップを使わずにCSSでも画像の補正がかなりできるようになりました。たくさんの種類があるので、どんなことができるのか並べてみましょう。ヘッダー固定ヘッダーやフッターなど、バナーやメニューを簡単に固定できるCSSのposition:stickyのサンプルです。以下のようにヘッダーにdiv要素で画像やメニューなどを簡単に固定できるスタイルの紹介です。