MdNCORPORATION

CSS3デザインブック 仕事で絶対に使うプロのテクニック

CSS3デザインブック 仕事で絶対に使うプロのテクニック

MdN編集部 編
定価 3,080円
(本体 2,800円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2012-03-21
仕様 B5判/264pP
ISBN 978-4-8443-6253-1
CSSの次世代バージョンであり現在策定中のCSS3は、これからのWeb制作に欠かせない必修の技術です。CSS3で新しくプロパティやセレクタが追加されたことで、例えばボタンの角を丸くするといった装飾も画像を用いずに実現可能になるなど、CSS3によってWebサイトの表現の幅は格段に広がります。 本書は、Web制作の現場で使われるCSS3の実用的な手法を集め、ソースコードと制作方法を丁寧に解説したテクニック集です。画面幅に応じてカラム数を切り替えるflexboxを利用したレイアウトや、tranformプロパティを使ってインタラクション効果をつけたフォトギャラリーなど最新の手法から、角丸・グラデーションを取り入れたボタンといった定番の表現まで、CSS3でできること・したいことを1冊にすべて網羅しました。さらに、実務案件でCSS3を使う場合に欠かせないIE対策もフォローした実践的な内容になっています。解説に使用しているサンプルデータはダウンロード可能なほか、イントロダクション(序章)にはCSS及びCSS3の基本解説を設けており、初心者の方でも基礎と応用力を同時を身につけることができる充実した内容です!


■ページ見本










目次

■INTRODUCTION CSS3の基本解説
CSS3を理解する
CSS3で追加されたセレクタ
CSS3で追加されたプロパティ
レイアウトデザイン


■CHAPTER 01 レイアウト
01 マルチデバイスに対応したレスポンシブなWebページ
02 flexboxを使った柔軟なボックスレイアウト
03 ナビゲーションの位置を固定したWebページ
04 ウィンドウサイズに連動するリキッドタイプのフリーレイアウト
05 グリッドレイアウトで実現するレスポンシブなサイト
06 透過画像を効果的に組み合わせたデザイン
07 CSS3と画像を組み合わせたアナログテイストのデザイン
08 テキストが読みやすい段組みレイアウト

■CHAPTER 02 ユーザーインターフェイス
01 CSSだけで実装する横並びのプルダウンメニュー
02 表示内容を切り替えるタブナビゲーションの実装
03 画像を使わないで作るパンくず型の購入フロー
04 ユーザビリティに配慮した問い合わせフォーム
05 ul 要素でシンプルに作る縦並びのプルダウンメニュー
06 ロールオーバーによるナビゲーションの演出
07 ユーザビリティの高いiPhone 風UIフォーム
08 ページをスライドさせるリスト型ナビゲーション
09 カスタムURLスキームと文字量の変化に対応できるリスト


■CHAPTER 03 グラフィック・タイポグラフィ
01 インタラクションのあるフォトギャラリー
02 border-imageを活用したポラロイド風のフレーム
03 マスク効果を利用した印象的なグラフィック
04 Webフォントでテキストを華やかに彩る
05 属性セレクタで写真を装飾したギャラリー
06 text-shadowを使って袋文字や立体的な文字を表現
07 画像の重ね合わせで実現するさまざまな背景
08 DropCapsを使った雑誌風のテキスト表現
09 ドロップシャドウ効果で写真にアクセントをつける


■CHAPTER 04 デザインパーツ
01 CSS3で表現するデザイン性豊かなボタン
02 HSLAによる色指定を使ったアイコンのカラーアニメーション
03 擬似クラスを利用した可読性の高いテーブル
04 マークアップのみで表現する階層のわかりやすいツリー図
05 borderと背景の組み合わせやoutlineで実現する飾り罫線
06 グラデーションと角丸で作る見出しのバリエーション
07 属性セレクタを活用したスマートフォンサイト
08 操作性を考慮したスマートフォン向けのパーツ
09 グラデーション機能を使った蛍光マーカー風の文字装飾


目的別索引
用語索引

ダウンロードデータ

CSS3デザインブック 仕事で絶対に使うプロのテクニック
サンプルデータダウンロード


このたびは、「CSS3デザインブック 仕事で絶対に使うプロのテクニック」をご購入いただきまして、誠にありがとうございます。

●以下に本書の解説で使用したサンプルデータを用意しましたのでご利用ください。


CHAPTER01.zip(2.8MB)
CHAPTER02.zip(1.5MB)
CHAPTER03.zip(2.2MB)
CHAPTER04.zip(0.9MB)

【ダウンロードにあたってのご注意】

ダウンロードファイルは、ZIP形式で圧縮されています。

Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。
圧縮ファイルはCHAPTERごとに分かれており、解凍したフォルダ内には記事番号のフォルダに分けてサンプルデータが収録されています。各CHAPTERのフォルダには「はじめにお読みください.html」が同梱されていますので、ご使用の前に必ずお読みください。

※弊社Webサイトからダウンロードできるサンプルデータは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただしサンプルデータ中に含まれる、一般に公開されているライブラリ類については、各ライブラリのライセンス条件に従います。

※弊社Webサイトからダウンロードできるサンプルデータの著作権は、それぞれの制作者に帰属します。

※弊社Webサイトからダウンロードできるサンプルデータを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

※本書に掲載されているHTML、CSS、JavaScript等のコメントや改行位置等は、紙面掲載用として加工していることがあります。ダウンロードしたサンプルデータとは異なる場合がありますので、あらかじめご了承ください。

※サンプルのなかには、Webサーバーの機能を利用しているなどの理由から、ローカル環境上では正しく動作しないものがあります。このようなサンプルの場合は、Webサーバー上に設置したうえで機能をお試しください。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊