これからの「標準」を身につける HTML+CSSデザインレシピ

著者名：エ・ビスコム・テック・ラボ【著】

マイナビ出版（2014/04発売）

• ISBN：9784839948870

内容説明

※この商品はタブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。

HTML5＋CSS3で多様なデバイスに対応できるWebサイトを制作するために、これから必要とされるデザインの「スタンダード」手法をレシピ方式で徹底解説しました。

スマートフォンやタブレットの登場により、多様なデバイスに対応できるWebページが求められるようになっています。その中で、レスポンシブWebデザインをはじめとする考え方が生まれ、Webページに当然のように組み込まれる時代になってきました。その結果、多様なデバイスに対応したページを効率よく作成していくため、Webページ制作の現場ではワークフローの変化も起きています。 PCブラウザという１つの環境をターゲットに制作できた時代と異なり、現在は膨大な数のデバイスをターゲットに、さまざまな切り口で最大公約数を考えながらページを作成しなければなりません。従来のデザインカンプを再現する作り方では対応が難しく、ページを動かしながら作り込んでいく必要があります。そのような現状をふまえ、本書にはこれからのWebページ制作に必要なレシピをできるかぎり詰め込みました。

本書では、ベースとなるWebページにパーツを組み合わせて配置していくことで、オリジナルのページを作成できるように構成しています。≪Chapter1～6≫では、そのパーツの作成について解説します。ヘッダー、記事、メニュー、フッター、ボタン、フォーム、テーブル、段組みなどそれぞれのパーツと、そのパーツを組み合わせる際のデザインのレシピを、多数のTipsを交えて紹介していきます。≪Chapter7～9≫では、それらのパーツを使って実際にページを作成していく方法を解説しています。レスポンシブWebデザインをはじめとする考え方が当然のものとして扱われている現状に合わせて、CSSフレームワークを利用せずに作るのか、CSSフレームワークを利用して作るのかを選択できるようにしています。 CSSフレームワークとしてBootstrapとFoundationを利用する方法を解説しています。≪Chapter10≫では、本書収録のパーツとCSSフレームワークを組み合わせて使うことで、どのようなことができるのか、どのくらい作り込むことができるのかを、4例紹介しています。プロモーションサイト、プロモーションサイトのコンテンツページ、ビジネスサイト、ショップサイトの4例です。パーツやレシピのデータは本書サポートサイトからダウンロードできます。

目次

基本
１　ヘッダー
２　記事
３　メニュー
４　フッター
５　その他
６　デザイン
７　Ｂｏｏｔｓｔｒａｐを利用したページ作成
８　Ｆｏｕｎｄａｔｉｏｎを利用したページ作成
９　フレームワークを利用しないページ作成
１０　レシピ

感想・レビュー

※以下の感想・レビューは、株式会社ブックウォーカーの提供する「読書メーター」によるものです。

[りぐん]

Kindleでセールの時に購入したままクラウドに積んでた本 最近ブログのテーマをいじろうかなと思って読み始めた 今まで何度かWEBページを作ろうとしたことはあったがCSSを書いても思った通りに動かなくて諦めた経験あり この本はまさにブログのようなレイアウトをパーツ一つ一つ作り方を説明しており、よく見るようなデザインがどのように組み合わせればいいのかわかった。 この本の応用で基礎的なデザインはできるが配置や配色などのことは載っていないためセンス的なものはノンデザイナーズ・デザインブック等を参考にする方が良い

2016/02/16

[の]

HTML+CSSのウェブデザインを作るためにはどうするのかをコードとともに解説。現代のウェブデザインはPCからのみならず、スマートフォンやタブレットといった端末でもアクセスされるため、デバイスにあった表示サイズを指定しなくてはならないのがポイント。また、それらの表示画面が小さいものも考慮し、ページを跨ぐような複雑なデザインを避け、スクロールの少なく１ページで完結できるようなシンプルなデザインのものが好ましいとされている。話題の簡単デザイン「Bootstrap」も含まれており盛り沢山。

2014/10/21

[chiroleen]

ある程度，タグやコードは分かっている人向けだったが，図解が分かりやすい。とても参考になりました。

2014/08/28

[エリナ松岡]

あまりにも最近のHTML/CSSについていけないのでこれで自習しました。あぁここ数年よく見る、今時のWebサイトってこうやって作るんだ、というのが分かった気がします。手を動かしながら覚えるタイプの教材ですが、パーツを追加するごとにちゃんと解説がついていますので、これまでHTMLに縁がなかった人にもお薦めできると思います。（ホントの基礎の基礎はドットインストールなんかでどうぞ！）

2014/09/25