ここまでできる！HTML＋CSS
- カテゴリー
- HTML/CSS >
- HTML/CSSの実践
全5回
このシリーズではHTML＋CSSの技術を駆使した実装を解説します。一見するとJavaScriptを使うような表現も、HTMLとCSSで実現できることがあります。HTMLとCSSを力を最大限に引き出します。
記事中には先行実装の仕様を取り扱ったものがあります。仕様策定が続いていますので、最新仕様については、仕様書もご確認ください。（2017.07.14）
最終回 offset-pathを利用したアニメーション
この記事ではoffset-pathプロパティを利用して、任意のパス上に沿うように要素をアニメーションする手法を解説します。現在はChromeでしか対応していませんが、Firefox、Edgeなどで導入が検討されています。
第4回 CSS Shapesを使う
CSS Shapesを使うと、定義した任意の形状に沿わせるようなレイアウトができます。広告などで見かける表現手法です。実装されているブラウザはChromeのみですが、その仕様や実装方法を解説します。
第3回 CSS Regionsを使う
雑誌のようなカラムからカラムへコンテンツが流れるレイアウトを実現するCSS Regionsを解説します。現在、一部のブラウザにしか実装されていませんが、仕様と実装方法を理解することは大切です。
第2回 CSS Variablesを使う
SassなどのCSSプリプロセッサではおなじみのCSSでの変数は、一部のブラウザではネイティブのCSSでも使用できます。この記事ではCSS Variablesの基礎と、変数を用いた実装のアイデアを紹介します。
第1回 タイピングゲームを作る
HTMLとCSSの力を最大限に引き出してみましょう。HTMLとCSSだけで実装されたタイピングゲームの仕組みには、さまざまな実装のヒントか隠されているのです。