CSSを中心とした実践解説書。 スタイルシート ワークショップ

1818viewshanakohanako

このエントリーをはてなブックマークに追加
スタイルシート ワークショップ CSS+XHTMLによる「Web標準」実践ガイド

Part01 CSS Basic Knowledge

 Chapter01 CSSとWeb標準
 Chapter02 XHTMLの基礎
 Chapter03 CSSの基礎

Part02 Professional CSS for Web Design

Workshop 01 少ない構成要素を大胆に表現したサイト

 ・コンテンツが少ない場合は、それぞれの要素を効果的にレイアウトすることで、
  インパクトのあるページデザインを実現できる。
 ・YouTubeのAPIを利用して動画配信。
 ・垂直三段組みのレイアウト。

Workshop 02 タブ型ナビゲーションを用いたクールなサイトデザイン

 ・タブナビゲーション:ユーザも一目見て利用方法がわかる。ユーザビリティにも優れている。
 ・角丸コーナーを使用。
 ・固定幅レイアウトによる垂直4段のベーシックなワンカラムレイアウト。
 

Workshop 03 写真イメージのリッチな表現

 ・拡大・縮小する写真ライブラリ
 ・訪問ユーザーとして20代前半の女性を意識したポップな配色。
 ・JavaScriptを利用したナビゲーション

Workshop 04 アコーディオン型ナビゲーションのサイト

 ・JavaScriptを使用したアコーディオン型ナビゲーション。
 ・清潔感のある白をベースに、オレンジをキーカラー。
 ・main部がⅡカラムになっている更新性の高いレイアウト。

Workshop 05 エラスティックリキッドレイアウトのサイト

 ・アクセシビリティを高めるため全体をリキッドレイアウトとエラスティックレイアウトを
  混ぜたエラスティックリキッドレイアウトを採用。
 ・文字サイズの変更

Workshop 06 アクセシビリティを確保したデータテーブル

 ・アクセシビリティの高いデータテーブルで表現。
 ・特殊ブラウザである音声ブラウザやテキストブラウザからのアクセスを想定し、
  データテーブルソース内に可能な限りメタデータを入れていく。

Workshop 07 Flashとポジションプロパティを用いたデザイン

 ・ポジションプロパティの利用
 ・Flashファイルの組み込み
 ・幅広いディスプレイへの対応

Workshop 08 お問い合わせフォームのCSSデザイン

 ・アクセシビリティ面でfieldset要素やlegend要素を使用してマークアップ

Workshop 09 モダンな印象を表現したコーポレートサイト

 ・Web2.0を感じさせるモダンなデザイン
 ・グラデーションを使った立体的な表現
 ・垂直方向のワンカラムによるレイアウト

Workshop 10 携帯電話向けサイトのWebデザイン

 ・開発環境
 ・XML宣言とDOCTYPE宣言の記述
 ・各要素のコーディング

Workshop 11 複雑なクリッカブルエリアを持つブログ型サイト

 ・複雑なクリッカブルエリア
 ・ブログ型レイアウト
 ・カテゴライズされたコンテンツ

Workshop 12 印刷されることを想定したアクセスマップページ

 ・印刷用のスタイルシートの作成
 ・木目柄が背景の暖かみのあるデザイン
 ・ユーザビリティを向上するパンくずの作成

感想

たくさんの実践となるサイトがあるため大変魅力的な1冊ではあるが、後半に進むにつれて誤字脱字が増えていくのが大変残念。。自身で理解し、手直しなどができるなら参考書の1冊として持っておくのはありだと思います。

関連まとめ

本のまとめカテゴリー


コメントを書く