よく使用するパーツをCSS3を使用して作成したサンプルをまとめた『現場で役立つCSS3デザインパーツライブラリ』発売いたしました。【書籍プレゼント】

最近のWeb制作の現場では、スマートフォンやタブレットなど多様なデバイスに対応させるために、従来の画像を中心にしたグラフィックではなく、CSS3を使ったグラフィックパーツやインターフェイスを作る機会が多くなりました。

CSSで作成することでグラフィックソフトで作成しなくてもよいので、CSSで作成することで修正や運用面で効率よく作業ができます。

そういった中で、MdN様からすぐに使えるCSS3のパーツ集をまとめた書籍『現場で役立つCSS3デザインパーツライブラリ』を共同で執筆させていただきました。

『現場で役立つCSS3デザインパーツライブラリ』2013/5/17発売

現場で役立つCSS3デザインパーツライブラリ

ページ最後に出版社様から本書を5冊プレゼントいただきましたので5名様にプレゼントがあります。

『現場で役立つCSS3デザインパーツライブラリ』概要

本書は、Web制作で必ず使用する、ボタンやアイコン、ナビゲーション、ぱんくずリストやローディングバー、背景パターンなど、デザイン性にすぐれ、スマートフォンやWeb制作の現場ですぐに使えるデザインパーツを約120点を作成。

紙面には、各パーツの対応環境や、プロパティとコード、そしてカスタマイズするためのポイントを簡潔に解説しました。Webパーツのデータは専用サイトからダウンロード可能です。

また紙面にはコード書ききれていませんが、古いIEに対応させる記述などもサンプルデータには掲載していますので、Web制作の現場ですぐに使えるサンプルがたくさんあります。

またメディアクエリなどを使用してスマートフォン専用のレイアウトに使えるものなどもたくさんあります。

こういったCSS3などのサンプルは一つベースを作成しておくと、設定を変えたりしてすぐにバリエーションが作成できることから一式持っているととても便利です。

『現場で役立つCSS3デザインパーツライブラリ』紙面イメージ

『現場で役立つCSS3デザインパーツライブラリ』目次

テキストのみですが、このようなサンプルを作成しています。

■INTRODUCTION CSSの基本
・01 HTMLとCSSの基礎知識
・02 CSS3で追加されたプロパティと表現力
・03 Webブラウザの種類
・04 CSS3の実装状況
・05 Internet Explorer 対策のまとめ

■CHAPTER 1 アイコン
・01 Webフォントについて
・02 ソーシャルメディアやブログサービスのアイコンフォント
・03 スマートフォンやタブレットなどのデバイスアイコンを表示
・04 晴れ・曇り・雨などのウェザーアイコンを表示
・05 Webフォントを利用したデコレーションの表現

■CHAPTER 2 バックグラウンド
・01 スマートフォンサイトで使用する縦・横ストライプの背景
・variation_グレーの細い横ストライプ
・variation_グレーの細い縦ストライプ
・02 スマートフォンサイトで使用する斜めストライプの背景
・variation_グレーの細い斜めストライプ
・variation_チェックのパターン背景
・03 スマートフォンサイトで使用するひし型のパターン背景
・variation_グレーのひし形パターン
・04 背景色が透過したチェック模様
・variation_ポップな印象のチェック模様
・05 色鮮やかなマルチボーダー柄
・06 背景パターンに半透明マスクをかける
・07 領域を半透明にして背景写真が見えるようにする
・08 領域に微妙なグラデーションを設定する
・09 背景に円形グラデーションを設定する
・variation_メモ帳のような背景パターン
・10 内側にシャドウを設定したボックス
・11 エンボス風のシャドウを設定したボックス
・12 フルスクリーンのスライドショー

■CHAPTER 3 タイポグラフィ
・01 カラフルな見出し
・02 立体感を増したカラフルな見出し
・03 立体的なアイコン付き見出
・variation_アイコン付きのカラフルな見出し
・04 角丸を使用したタブ風見出し
・variation_タブ風の立体的な見出し
・05 リボン型の見出し
・06 吹き出し型の見出し
・07 タイトル付きの角丸テキストボックス
・08 仕切り線が入った角丸テキストボックス
・variation_黒背景に合うグレーの仕切り線
・09 グラデーション状の仕切り線
・10 メモ帳のようなテキストボックス
・11 紙の端が折れたようなコンテンツ枠
・12 装飾した番号付きリスト
・13 グラデーションを使用したロゴテキスト
・14 大胆に傾けて立体的な影を付けたロゴ
・15 文字ごとに角度や大きさで変化を付けたタイトル
・16 アニメーションしながら出現するテキスト
・17 文字ごとにカラフルな装飾を施したロゴ
・18 Webフォントとテクスチャで作るかすれた文字

■CHAPTER 4 ナビゲーション
・01 立体的なボタン
・variation_エンボス風な縁が立体的なボタン
・02 立体的なアイコンボタン
・variation_画像を使用したアイコンボタン
・03 黒い立体的なボタン
・variation_黒いアイコンボタン
・04 矢印型の「戻る/次へ」ボタン
・05 立体的なトグルボタン
・06 2つセットの切り替えボタン
・07 2トーンのグラデーションを使用したカラフルなボタン
・08 クリック時にくぼんだように見えるボタン
・09 アイコン付きのカラフルなボタン
・10 ふんわりとアニメーションするボタン
・11 表紙がめくれて中身が見えるボタン
・12 マウスオーバーでモーフィングするボタン
・13 マウスオーバーでアイコンが回転するボタン
・14 CSSのみで作るグローバルナビゲーション
・variation_2トーンカラーのグローバルナビゲーション
・15 CSSで作るアイコンナビゲーション
・variation_青いアイコンナビゲーション
・16 エンボス風の縁を付けたアイコンナビゲーション
・17 シンプルなアンダーラインナビゲーション
・18 横幅100%のアイコン付きナビゲーション
・19 立体感のある横幅100%のアイコン付きナビゲーション
・20 横幅100%のヘッダー固定のナビゲーション
・21 ボタンが端に来る横幅100%のヘッダー固定ナビゲーション
・22 吹き出し型ナビゲーション
・23 マウスオーバーで上下に画像が表れるナビゲーション
・24 マウスオーバーで吹き出しが出るナビゲーション
・25 マウスオーバーでサブメニューが現れる円形ナビゲーション
・26 リストを使用した縦型ナビゲーション
・27 説明テキスト付きの縦型ナビゲーション
・28 ボタン付きの縦型ナビゲーション
・29 サムネイル付きリストナビ
・variation_サムネイルとボタン付きリスト
・30 タブ風のナビゲーション
・31 コンテンツがフェードインで切り替わるタブ
・32 ページネーション
・variation_ボタンの隙間のないページネーション
・33 クリックでプルダウンメニューを展開させるナビゲーション
・34 レスポンシブWebデザインのヘッダーナビゲーション
・35 パンくずリスト
・variation_角が丸いパンくずリスト
・variation_吹き出し状のパンくずリスト

■CHAPTER 5 グラフィックスタイル
・01 角丸とシャドウを使って画像に縁を付ける
・02 背景画像として配置した写真を丸く切り抜いたように見せる
・03 画像の内側にシャドウや色を重ねる
・04 写真の上にグラデーションを載せる
・05 写真の縁がめくれたような影を付ける
・06 写真の縁に部分的にシャドウを載せる装飾
・07 写真上にキャプションやタイトルを付ける
・08 サムネイルのロールオーバーアニメーション
・09 テープで貼付けたようなスタイルをCSSで作る
・10 写真が重なったような枠
・11 写真がズームしてコンテンツが表示されるスタイル
・12 写真を加工して表示する
・13 カレンダー風テキストボックス
・14 カラフルなカレンダー風アイコン
・15 1 ヶ月分のカレンダー
・16 折れ曲がった紙のような効果
・17 アイコンが大きく拡大されるカード
・18 めくれた感じのシール型バッジ
・19 ギザギザした星型バッジ
・20 タグ風のアイコン
・21 新着情報などのカウントバブル
・22 吹き出し型ツールチップ
・23 CSS3のアニメーションで作るメインビジュアル
・24 回転するローディングアニメーション
・25 ドットタイプのローディングアニメーション
・26 ラインタイプのローディングアニメーション
・27 バータイプのローディングアニメーション

■CHAPTER 6 フォーム
・01 フォームエリアを装飾する
・02 アイコン付きの検索フォーム
・03 さまざまなアイコン付き入力フィールド
・04 会員制サイト用のログインフォーム
・05 ウィンドウ風のログインフォーム
・06 黒いログインフォーム
・07 シンプルなログインフォーム
・08 ボタンがアニメーションするログインフォーム

■CHAPTER 7 ジェネレーター
・01 Patternizerを使用して背景パターンを作成する
・02 Patternifyを使用して背景パターンを作成する
・03 CSS3 Button Generatorを使用してボタンを作成する
・04 CSS3 Generatorを使用して角丸のボックスを作成する
・05 CSS Menu Makerを使用してメニューを作成する

『現場で役立つCSS3デザインパーツライブラリ』を5名さまにプレゼント

出版社様のご好意で本書を5冊いただきました。

そこでいつもブログを見ていただいている方に抽選で5名様にプレゼントいたします。

見てみたいという方は下記の方法で応募できます。

Twitterで応募

twitterで @html5memoをフォローし、「 書籍プレゼント『現場で役立つCSS3デザインパーツライブラリ』が欲しい! http://www.html5-memo.com/other/css3book/ #css3bookk 」 とツイートすればOKです。

↓コピペ用

書籍プレゼント『現場で役立つCSS3デザインパーツライブラリ』が欲しい! http://www.html5-memo.com/other/css3book/ #css3book

あわせてFacebookページも更新中

http://www.facebook.com/html5memo

FaceBookページではブログの更新情報やWEB制作においての気になる記事を更新しています。こちらもよかったら「いいね」お願いします。

書籍応募の締め切り

6月5日までツイートされた中から抽選で5名様を選び、ツイッターのダイレクトメールにてご連絡しますので、当選通知が来た方は送付先の住所を教えて下さい。

※なお発送は日本国内に限らさせていただきます。

なお、@html5memoをフォローし忘れてダイレクトメールが届かなかったり、連絡後1週間経っても返信が無い場合は当選が無効になるので気をつけて下さいね。

ブログの方でもCSS3のサンプルを随時公開していきます

ブログの方でも今回作成して便利なサンプルを随時公開していきますのでCSS3を使用して制作効率をあげていきましょう!

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事