概 要

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

目次

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


■CHAPTER 01 レイアウト

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

■CHAPTER 02 ユーザーインターフェイス

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

■CHAPTER 03 グラフィック・タイポグラフィ

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

■CHAPTER 04 デザインパーツ

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