境祐司

境祐司　『Webデザイン＆スタイルシート　逆引き実践ガイドブック』

todo： 23　dom inspector

Introduction

  • サンプルサイト
  • 『Web Developer 1.1.6 のダウンロード
    • ミナトラボ　『Web Developer 1.1.6 日本語版? 』Mozilla firefox
      http://lab.tubonotubo.jp/tools/webdeveloper/index.html
  • ページの文書構造の確認
    • [Web Developer]―[情報]―[見出しを…]―[]―[]―[]―[]―[]―[]―[]―

 Webデザインを習得する方法

  1. Webサイトを見る
  2. デフォルトCSSが適用されたページを見る
    1. Firefoxで標準スタイルシートを無効にする
      1. [表示メニュー]―[スタイルシート]―[…]
    2. どのような順序で表示されているか確認する
    3. カラーチェックで比較してみる
  3. HTMLのソースコードを見る
    1. ソースを表示する
      1. Firefoxでは色分けされている
      2. 見出しだけを確認したり、ページ情報の詳細をチェックする場合は、Web Developerを使う。
    2. ページの文書構造を確認する
    3. ページ情報を確認する
  4. CSSソースコードを見る
    1. ブラウザのデフォルトCSSが適用されたページを見る　17
    2. WebデザイナーのCSSが適用されたページを見る
      1. ウィンドウサイズの変更
      2. テキストズームで文字サイズの変更
      3. ページズームでページを拡大
    3. WebデザイナーのCSSソースコードを見る
      1. すべてのCSSを表示する
        1. [Web　Developer]―[CSS]―[すべてを展開する]
        2. [Web　Developer]―[CSS]―[スタイル情報を表示する]
      2. スタイル情報を表示する
      3. ブラウザのデフォルトCSSを無効にしてみる
        1. [Web　Developer]―[CSS]―[ブラウザの標準]　これでWeb制作者が指定したCSSだけが適用される

自分のライブラリをつくる

  1. Link要素で指定されているCSSファイルを確認
  2. ＠importで指定されているCSSファイルを確認
  3. CSSの構成を確認する

 

 ギャラリーサイトの活用

1 ギャラリーサイトを閲覧する

 　　この下に例があり

2  気になったサイトを分類しながらブックマークする

  1. レイアウト
  2. タイポグラフィ
  3. ビジュアル
  4. ナビゲーション

3 ブックマークを管理する

 

 

Chapter　1　Basic

 

 

 

 

=====================================================

サンプルリンク集：

  • 書籍で解説しているサンプルをリンクしています
  • ※IntroductionおよびChapter 1、Chapter 8のサンプルはありません
  • 対象ブラウザ：Mozilla Firefox／Internet Explorer 7／Apple Safari／Opera
    ※ChapterによってはInternet Explorer 6も対象としています

Chapter 2 Text & Font - テキスト／フォント

 

  • 適切な字体（フォントファミリー）を指定したい
    ［sample1］／［sample2］
  • テキストの囲みを表現したい　
    ［sample1］／［sample2］
  • テキストに破線を表示したい　
    ［sample1］／［sample2］／［sample3］
  • アクセシビリティに配慮した文字指定をしたい　
    ［sample1］
  • 行高と行間の違いを正しく理解したい　
    ［sample1］／［sample2］／［sample3］
  • 行間が詰まらないように指定したい　
    ［sample1］
  • 装飾記号はCSSで指定したい　
    ［sample1］
  • 縦書きを表示したい　
    ［sample1］／［sample2］／［sample3］
  • テキストにドロップシャドウをつけたい　
    ［sample1］

Chapter 3 Color & Background - カラー／背景

 

Chapter 4 Box - ボックス

 

Chapter 5 Layout - レイアウト

 

  • シンプルな固定幅のレイアウトを作成したい
    ［sample］
  • シンプルなリキッド・レイアウトを作成したい
    ［sample］
  • シンプルなエラスティック・レイアウトを作成したい
    ［sample］
  • 2段組み左サイドバーの固定幅レイアウトを作成したい
    ［sample］
  • 2段組み左サイドバーのリキッド・レイアウトを作成したい
    ［sample］
  • 2段組み左サイドバーのハイブリッド・レイアウトを作成したい
    ［sample］
  • 2段組み左サイドバーのエラスティック・レイアウトを作成したい
    ［sample］
  • 3段組みの固定幅レイアウトを作成したい
    ［sample］
  • 3段組みのリキッド・レイアウトを作成したい
    ［sample］
  • 3段組みのハイブリッド・レイアウトを作成したい
    ［sample］
  • 3段組みのエラスティック・レイアウトを作成したい
    ［sample］

Chapter 6 List & Table - リスト／テーブル

 

Chapter 7 Others - その他

 

  • PNG画像を使って透明感のあるページにしたい
    ［sample］
  • ナビゲーションバーをデザインしたい
  • 角丸のボックスを表現したい
  • 訪問済みのページを視覚的に表現したい
    ［sample］
  • サムネイル写真をマウスオーバーで拡大表示したい
    ［sample］

参考リンク：

  • Chapter 1で紹介したサイトなどを中心に掲載しています
  • 掲載日：2008年6月28日

CSSギャラリー

 

技術文書

アクセシビリティガイドライン

企業の取り組み

Webデザイナーの参考サイト