memocarilog

昨日発売の Web Designing: 2014年9月号「コピペで使えるCSS/JavaScriptによるUI表現」特集にてまたも恐縮ながらサンプル作成と記事の執筆をさせて頂きました。

今回の特集は、UIパーツのコードスニペット集のようになっています。以下のたくさんのUIパーツのサンプルがダウンロードできます。コピペして使ってもよし、コードを読んで勉強してもよしだと思います。

［Button］
アニメーションするLikeボタン
ぴょこっと動いて誘導するページトップボタン
テキストリンクをボタンにする汎用的スタイル
マウスオーバーでフェードする画像ボタン
［Navigation］
シンプルな「ハンバーガーボタン」ナビゲーション
スマホアプリライクなスライドナビゲーション
ドアを開くように展開するナビゲーション
遠近法を利用した動きのナビゲーション
アニメーションしながら変化するハンバーガーボタン
［Menu］
HTMLだけで追加・削除が可能なタブメニュー
ステップアップインジケータ付きタブメニュー
スクロールでスライドインする固定メニュー
クリックでスルッと降りてくるメニュー
CSSで実装したレスポンシブなタブメニュー
スクロール後、上部に固定表示されるグローバルメニュー
ベーシックなヘッダメニュー部分のひな形
［Column］仕組みを理解すれば応用も簡単！ 今スグ使えるSVGフィルタ
［Layout］
グリッドに変化をつけた「ひし形レイアウト」
きれいにフロートする「画像＋キャプション」
テキストでも画像でも、親要素の中央に絶対配置
ブロック要素をウインドウの中央に配置する
［Text］
ふんわり表示する吹き出し風ツールチップ
軽くて簡単、さまざまな実装が可能なツールチップ
CSSで実現するドロップキャップ
Google Fontsの便利な小技「エフェクト」
一文字ずつパタパタとアニメーション
select要素の機能を損なわずにCSSのみで装飾
［Column］画像じゃなくてもいろいろできる、CSSで作る背景パターン
［Fade］
スクロールに合わせてコンテンツをフェードイン表示
画面全体をフェードイン表示
［Google］
Googleマップをカスタマイズする
YouTube動画をレスポンシブで埋め込む
［ETC］
レスポンシブ対応モーダルウインドウ
使い回しが利く、シンプルなアコーディオン
連番を自動で数えて美しく表示する汎用スタイル
リンク先の内容に応じて、自動でアイコンを付加
レスポンシブ対応カルーセル
ローディング画像だけじゃないオープニング演出
［Column］Backbone.jsで作るシングルページアプリケーション

Web Designing: 2014年9月号

私はこの中で、以下のサンプル作成と執筆を担当させて頂いています。

「ふんわり表示する吹き出し風ツールチップ」は以前このブログでも同じような動きのコードを載せたことがありますが、今回はIE8などの古いブラウザでも使えるようコードを書き直しました。

実際に使える＆使い回してもらうことを重点にサンプルの作成、執筆を行いましたので、ご活用頂ければとても嬉しいなと思います！

是非お手にとってみて下さいね！