本日2013年9月25日（水）にMdN様より発売の『現場でかならず使われている CSSデザインのメソッド』という本を9名の共著で執筆させていただきました。「レイアウト」「デザインパーツ」「インターフェイス」のテーマ別に、デザインからテクニックまでバリエーション豊かなCSSのアイデアが満載の1冊です。眩しいくらいのド派手なピンクのカバーが目印ですので、書店で見かけたら是非お手にとってみてください！

本書の概要

タイトルどおりCSSを中心とした本ですが、今のWebデザインに欠かせないjQueryやWebフォントなどを取り入れた実践的なサンプルをもとに、その制作手順やテクニックが詳しく解説されています。

また、「はじめに」の1節に料理のレシピ本のように…と書かれているとおり、本書をぱらぱら～っと眺めているだけでもワクワクしますし、「あ、これ真似してみたい！」と思うデザインやテクニックが見つかるはずです。サンプルデータもダウンロードできるので、是非ご活用ください。

詳しくは、MdN DESIGN INTERACTIVE様の本書紹介ページに書かれているので、チェックしてみてくださいね。

目次

以下が目次です。全部で32のサンプルが掲載されています。

PART1. レイアウト

• 序論 2013年前後のレイアウトのトレンド
• オーソドックスな2段組みレイアウトのページ
• オーソドックスな3段組みレイアウトのページ
• ウインドウ幅にあわせて可変するリキッドレイアウト
• グリッドカラムレイアウトのページ
• ヘッダ、フッタを固定したページ
• ボックス感のあるデザインのページ
• フォントサイズを切り替えられるページ
• Webフォントを活用したページ
• 読者を疲れさせない長文レイアウトのコツ
• スマートフォン向けのトップページ
• PCでもスマートフォンでも見やすいレスポンシブデザイン
• コラム CSS3での新しいレイアウト手法

PART2. グラフィック

• 序論 2013年前後のグラフィックパーツのトレンド
• カルーセルを配置したページ
• ページ全体が切り替わるカルーセル
• 隙間なく写真を敷き詰めたギャラリーページ
• サイズに合わせてレイアウトが変わるグリッド型ギャラリー
• 写真を大きく配置したギャラリー
• スマートフォン向けのフォトギャラリー
• ダイナミックに写真がスライドするパララックスページ
• 固定背景を活かしたスクロールレイアウト
• コンテンツをポップアップ表示するページ
• 吹き出しのツールチップをうまく使ったページ
• 情報量が多くても見やすい表組みデザイン
• コラム Flashに代わる技術とは?

PART3. インターフェイス

• 序論 2013年前後のインターフェイスのトレンド
• ドロップダウンメニュー付きグローバルメニュー
• スムーズスクロールに対応したグローバルメニュー
• サイドバー型のグローバルメニュー
• 多くのメニュー項目を持つメガドロップダウンメニュー
• スマートフォン向けのナビゲーション
• アコーディオンを活かしたページ
• タブを活かしたページ
• 使いやすいユーザー登録フォーム
• 手書き風デザインのお問い合わせフォーム
• スマートフォン向けのお問い合わせフォーム
• コラム HTML5で強化されたフォームの使いどころ

最後に…

こうしてまた、素敵なクリエイターの皆様と一緒に、本の執筆に携わることができて大変光栄に思っております。出版元のエムディエヌコーポレーション様、編集のリブロワークスの皆様にも心より感謝を申し上げます。ありがとうございました！