連載
CSS3アニメーションでつくるインターフェイス表現
本連載では，CSS3によるアニメーション表現を紹介していきたい。その中でも，幅広い読者に応用してもらえるだろうインターフェイスを主なお題とする。
- 第21回 スライドする立方体
2017年4月11日
- 第20回 トグルスイッチのアニメーション
2017年3月22日
- 第19回 画像のアコーディオン表示
2017年3月7日
- 第18回 飛び出す数字のアニメーション
2017年2月14日
- 第17回 立体的なナビゲーションバーのアニメーション
2017年1月24日
- 第16回 並んで弾けるアニメーション
2017年1月10日
- 第15回 ハンバーガーメニューのアニメーション
2016年11月25日
- 第14回 周囲が勢いよく回転するボタン
2016年11月8日
- 第13回 電灯をつけたり消したりする
2016年11月2日
- 第12回 垂直に回転して切り替わる直方体のタブ
2016年9月27日
- 第11回 鼓動のようにアニメーションするボタン
2016年8月26日
- 第10回 画像を3次元で水平に回すアニメーション
- 五角柱をつくる計算
- 五角柱を組み立てる
- 五角柱を水平に回す
2016年8月4日
- 第9回 マウスポインタを重ねたテキストのアニメーション（2）
- テキストの上を水平線が横切る
- 擬似要素でつくった2つのテキストを重ねる
- 擬似要素のテキストを垂直にアニメーションさせる
- 2つ目の擬似要素で下半分のテキストアニメーションを加える
2016年6月30日
- 第8回 マウスポインタを重ねたテキストのアニメーション（1）
- 2つの項目の静的なデザイン
- はじめの項目を擬似要素で飾りつける
- 擬似要素をアニメーションさせる
- 終わりの項目をアニメーションさせる
2016年6月8日
- 第7回 追加情報をアニメーションで表示するボタン
- ボタンの静的なデザイン
- ボタンの凹凸の表現
- ボタンにポインタを重ねたら追加情報を示す
- アニメーションに効果を加える
- ボタンのパーツのアニメーションを仕上げる
2016年4月26日
- 第6回 画像をパネルに分けてアニメーションで切り替える
- 画像とキャプションを切り替える
- 擬似要素::beforeと::afterで加えたデザイン
- キャプションをクロスフェードさせる
- 画像をパネルに分けてクロスフェードする
2016年4月19日
- 第5回 画像にポインタを重ねるとキャプションが現れる
- キャプションを加えた画像の静的スタイル
- Google Fontsと回り込みの解除
- 画像にポインタが重なったらキャプションを示す
- 画像に色をかぶせる
- 画像に変形のアニメーションを加える
- リンクボタンをアニメーションで加える
2016年3月15日
- 第4回 3次元で垂直に回る立方体のメニュー
- メニューのもとになる静的スタイル
- 要素にポインタを重ねたら水平軸で回す
- それぞれの項目に底面を加える
2016年3月1日
- 第3回 選択項目以外がぼけるメニュー
- メニューのもとになる静的スタイル
- メニューの背景色とテキストの影
- メニュー項目の間に区切り線を入れる
- メニューバーに外枠を加える
- メニュー項目にポインタが重なったとき他の項目のテキストをぼかす
- ポインタが重なったメニュー項目を浮き上がらせるアニメーション
- マウスボタンを押したメニュー項目を凹ませる
2016年2月9日
- 第2回 アコーディオンメニューのアニメーション
- メニューのもとになる静的スタイル
- メニューに角の丸みと影を加える
- メニューの開け閉じの動きを加える
- メニュー項目の間に区切り線を入れる
- サブメニュー項目にポインタを重ねたときハイライトさせる
2016年1月26日
著者プロフィール
野中文雄（のなかふみお）
ソフトウェアトレーナー，テクニカルライター，オーサリングエンジニア。上智大学法学部卒，慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で，総務・人事，企画，外資系企業担当営業などに携わる。その後，マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング，コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。
URL：http://www.FumioNonaka.com/