MdNCORPORATION

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】

大藤 幹 著/久保 知己 著/佐藤 裕 著/境 祐司 著
定価 2,750円
(本体 2,500円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2013-08-01
仕様 B5判/224P
ISBN 978-4-8443-6358-3
近年のスマートフォンやタブレット等の普及にともない、ウェブサイトの多デバイス対応が前提となったり、従来のXHTML1.0+CSS2.1からHTML5+CSS3への移行が促されるなど、ウェブ制作の現場の常識は大きく変わりはじめています。そして、このような変容期にあたる現在だからこそ、続々と生まれてくる新しい技術やノウハウに振り回されないように、しっかりとした基礎を固めて「必要なこと」と「不要なこと」を取捨選択できるように準備しておく必要があります。 そこで本書では、HTML+CSSを利用してコーディングとデザインを進めていくうえで「これだけは知っておかなくてはならない」という基礎となる知識と技術を一冊にまとめました。ウェブデザインとHTML+CSSの基本をはじめ、レイアウト、ビジュアルデザイン、ナビゲーションやフォームといった実践的なコーディングのポイントも解説していますので、実際のウェブ制作において効果を発揮する情報が凝縮されています。また、現場のスタンダードを踏まえ、HTML5+CSS3を含めたコーディングの手法を体系的に解説していますので、知識があいまいな初心者の方はもちろん、「いまはどうコーディングするのが主流なのだろう?」と再学習の必要性を感じているウェブデザイナーのみなさんにも役立つ一冊です。

■ページ見本










目次

はじめに

■CHAPTER01 ウェブデザインの基礎知識
RULE001 ウェブ(World Wide Web)の歴史をおさらいする
RULE002 W3Cの役割はウェブ標準を推進すること
RULE003 HTMLとXHTMLは何が違う?
RULE004 HTML5が生まれた背景
RULE005 HTML5で何が変わる?
RULE006 HTMLとCSSの役割分担をきちんと理解しよう
RULE007 CSS3で何ができるようになった?
RULE008 ウェブブラウザにはどのようなものがある?
RULE009 ウェブブラウザによって使える機能に違いはある?
RULE010 JavaScriptと拡張技術の概要を知る
One Point! スマートデバイスの普及で変わるウェブデザイン

■CHAPTER02 ウェブサイトのプランニング
RULE001 ウェブサイトを構築する目的を明確にしておこう
RULE002 ウェブサイトのターゲットユーザーを定義しよう
RULE003 デザインのガイドラインを作成しよう
RULE004 ユーザビリティの指針を決めよう
RULE005 アクセシビリティの指針を決めよう
One Point! 開発者向けに提供されているOSのガイドラインを参考にしよう

■CHAPTER03 ウェブサイトのプロトタイピング
RULE001 ウェブサイトの構造を考えよう
RULE002 ラフスケッチとワイヤーフレーム作り
RULE003 モックアップを作成しよう
RULE004 プロトタイプを作成しよう
One Point! プロトタイピングとこれからのワークフロー

■CHAPTER04 ウェブページのマークアップ[基本編]
RULE001 HTMLの文法と文書構造
RULE002 HTML 4.01とHTML5の要素の違い
RULE003 HTML5のコンテンツモデルを理解する
RULE004 配置場所が限定されないフローコンテンツ
RULE005 文書を構造化するセクショニングコンテンツ
RULE006 見出しとなるヘッディングコンテンツ
RULE007 インラインで使用するフレージングコンテンツ
RULE008 メディアを組み込むエンベッディッドコンテンツ
RULE009 ユーザーの操作に対応するインタラクティブコンテンツ
RULE010 文書情報を示すメタデータコンテンツ
One Point! HTML5の新しい要素を古いIEにも認識させるには?

■CHAPTER05 ウェブページのマークアップ[応用編]
RULE001 文章主体のシンプルなページをマークアップしよう
RULE002 複雑な構造になりがちな表組みのマークアップ
RULE003 多彩なパーツを使い分ける入力フォームのマークアップ
RULE004 スマートフォンサイトをマークアップしよう
One Point! img要素のwidth、height属性は必要?

■CHAPTER06 ウェブページの基本スタイリング
RULE001 CSSの記述場所と書き方を理解する
RULE002 CSSの基本的なセレクタを使いこなす
RULE003 CSS3で追加された新しいセレクタ
RULE004 フォントサイズと行の高さを指定する
RULE005 テキストの行揃え、文字間、インデント、縦書きを指定する
RULE006 マージン、ボーダー、パディングの仕組み
One Point! z-indexプロパティ

■CHAPTER07 ウェブページのレイアウト
RULE001 要素を横に回り込ませるフローティングの仕組み
RULE002 positionプロパティによる自由度の高いレイアウト
RULE003 ウィンドウ幅にあわせて可変するリキッドレイアウト
RULE004 幅のサイズの決まった固定レイアウト
RULE005 リキッドレイアウトと固定レイアウトの組み合わせ
RULE006 3つ以上のカラムを並べたマルチカラムレイアウト
RULE007 CSS3のflexboxを利用した新しいレイアウト手法
RULE008 マルチデバイスに対応するレスポンシブ・ウェブデザイン
RULE009 フリュードレイアウトの基本
RULE010 CSSの切り替えを行うメディアクエリの基本
RULE011 レスポンシブ・ウェブデザインの実践
One Point! 紙媒体のページデザインに近い自由度の高いCSSレイアウト

■CHAPTER08 ウェブページのビジュアルデザイン
RULE001 CSSでカラーと透明度を指定する
RULE002 多彩な用途を持つグラデーション
RULE003 文字の表現力が格段に上がるテキストのドロップシャドウ
RULE004 使用頻度の高いボックスの角丸表現
RULE005 飾り罫などに使用するボックスのボーダー表現
RULE006 立体感の表現に欠かせないボックスのドロップシャドウ
RULE007 CSS3によって拡張された背景画像の多彩な指定
RULE008 複数のイメージを組み合わせて利用する
RULE009 表現力と制作効率を向上するWebフォントの使いどころ
RULE010 見やすさを向上する表組みのカラーリング手法
RULE011 グラフィックカバーを切り替える動的な表現
RULE012 スクロール時に目を引くユニークな視差効果
RULE013 背景に大きく画像をあしらったページ
RULE014 デバイスに応じて最適化したイメージを振り分ける
One Point! ピクセルとViewport

■CHAPTER09 ウェブページのインターフェイス
RULE001 垂直方向に項目が並ぶシンプルなメニュー
RULE002 水平方向に項目が並ぶシンプルなメニュー
RULE003 背景イメージを使用したビジュアルなメニュー
RULE004 文字を画像にしたグラフィカルなメニュー
RULE005 テキストだけのシンプルなパンくずリスト
RULE006 CSS3で表現するリッチなデザインのボタン
RULE007 CSSを使用してフォームの見栄えを整える
RULE008 入力補助とバリデーションでフォームを使いやすくする
RULE009 タブメニューでコンテンツをカテゴリーに応じて切り替える
RULE010 下階層にアクセスできるプルダウンメニュー
RULE011 下階層を構造的に表示するメガドロップダウンメニュー
One Point! dl要素を使ってシンプルに日付を並べる方法

■CHAPTER10 CSSによるアニメーション表現
RULE001 CSS3のアニメーション関連プロパティ
RULE002 値をなめらかに変化させるtransition機能
RULE003 キーフレームを使った連続アニメーション
One Point! CSS3のアニメーションとベンダープレフィックス

■CHAPTER11 トラブルシューティング
RULE001 CSSのリセットスタイルについて
RULE002 HTML5とCSS3をサポートしていないブラウザについて
RULE003 高解像度ディスプレイ対応について

[巻末付録]HTML5コンテンツモデル一覧

INDEX

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

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