• Web標準 XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。

Web標準 XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。

Web標準 XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。

¥2,200+税

品種名
書籍
発売日
2007/7/3
ページ数
224P
サイズ
B5変型判
著者
加藤善規、平澤 隆、両見英世 著
ISBN
9784844324249

正しいコード、美しいデザインの共存。実践的「Web標準」の最新ノウハウ。

XHTML 1.0(Second Edition)やCSS level 2 revision 1などの最新仕様、Internet Explorer 7やFireFox 2などの最新のWebブラウザに対応。「Web標準」のWebサイト制作を目指すクリエイター必携の一冊。 ☆著者陣による本書の公式サポートサイトはこちら

「読者アンケートに答える」「読者プレゼントに応募」の場合もこちらをご利用ください。

アンケートに答える

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

学校・法人一括購入に関するお問い合わせはこちらへ。

一括購入窓口

詳細

■ページイメージ



■著者からのメッセージ
デザイン的なテクニックだけで満足していませんか?本書を読めば、Web標準に準拠したXHTML、CSSコーディングの基本的な考え方が理解できます。レイアウトの基本から、崩れないマルチカラムレイアウトの作り方まで丁寧に解説。管理しやすく、効率的なCSSの記述の仕方など、コーディングの現場で役立つノウハウも公開しています。XHTML 1.0(Second Edition)やCSS level 2 revision 1などの最新仕様、Internet Explorer 7やFireFox 2などの最新のWebブラウザに対応。「Web標準」のWebサイト制作を目指すクリエイター必携の一冊。

■著者プロフィール
加藤善規(かとうよしき)
デジパ株式会社 クリエイティブ事業部マネージャー。専門学校にてメカトロニクスを修学後、製造業における生産ライン設計、生産管理等、Webとはかかわりのない業界に所属しながら独学でWeb関連技術を学習。その後フリーランスによるWebサイト制作業務等を経て2004年よりデジパ株式会社勤務。ディレクター業務に従事。

平澤 隆(ひらさわ たかし)
デジパ株式会社 クリエイティブ事業部マークアップエンジニア。絵描きの夢を追って上京。東京ゲームデザイナー学院・ゲームキャラクターデザイナー養成講座を卒業後、もともと興味のあったWeb系の会社に入社。1年半ほど働いたあと、デジパ株式会社に入社。現在フルCSSによるコーディングを主業務としている。テーブルレイアウトの経験がないため、テーブルで組まれたサイトのソースを覗くと、?が頭にいっぱい浮かぶらしい。

両見 英世(りょうけん ひでよ)
デジパ株式会社 クリエイティブ事業部リーダー。専門学校を卒業後フリーで活動。Eコマースサイト、某レーベルサイトのデザイン・コーディングを行う。2004年デジパ株式会社入社。クライアントのウェブサイト制作に携わり、デザイン・コーディング・ブログ構築など制作の全般を行う。公開後は運用支援に務める。現在では自社サービス「iddy」「sitestock」の企画・運用にも取り組んでいる。

目次

■目次

はじめに
本書の読み方
序章

第1章 (X)HTMLの基本法則

1 文書構造を的確に伝える要素でマークアップする
2 (X)HTML文書には適合するDTDに合わせた文書型宣言を行う
3 HTMLとXHTMLの違いを理解して正しいマークアップを行う
4 文字コードを正しく宣言して文字化けを防ぐ
5 XHTML文書では条件付きでXML宣言を省略できる
6 XHTML文書のメディアタイプは「application/xhtml+xml」が基本
7 id属性とclass属性を目的に応じて使い分ける
8 XHTML文書ではCSSやJavaScriptをできるかぎり外部ファイル化する
9 id属性、class属性の値はCSSセレクタの命名規則に合わせて指定する
10 XHTML文書の公開時にHTMLとの後方互換性を確保する
11 (X)HTML文書のコメントは正しく書く
12 インデントとコメントで読みやすい(X)HTML文書を作る
13 (X)HTML文書には内容が伝わりやすいタイトルを設定する
14 既存の要素で表現できない部分にはdiv 要素とspan要素を使用する
15 link要素で(X)HTML文書の利便性を高める
16 順不同リスト(ul)と順序リスト(ol)を使い分ける
17 引用部分と本文の差を明確にする
18 address要素を使用して制作者の署名を記す
19 略語に説明を加えて利便性を向上させる
20 label要素を利用してフォームを使いやすくする
21 入力コントロールをグループ化してフォームを整理する
22 Tabキーによる項目選択とキーボードショートカットで利便性を高める
23 項目数の多いセレクトメニューはoptgroup要素でグループ化する
24 alt属性ですべての画像に的確な代替テキストを付ける
25 アンカーテキストにはリンク先の内容を明示する
26 target="_blank"の使用は最低限に抑える
27 英単語は小文字で、略語は大文字で記述する
28 日付情報にはわかりやすい表記法を使用する
29 表のマークアップではアクセシビリティを考慮する
30 特別な記号は文字参照で記述する

第2章 CSSの基本法則

31 CSSの基本的な記述方法を理解する
32 スタイル適用の優先順位を理解する
33 CSSにおけるボックスモデルを理解する
34 レンダリングモードの切り替え条件を把握して表示をコントロールする
35 セレクタと擬似クラスを使いこなして効率的なCSSを記述する
36 :hover擬似クラスは:link/:visited擬似クラスよりあとに記述する
37 インラインボックスの高さの値には単位を指定しない
38 文字色と背景色のコントラストに配慮する
39 出力メディアに合わせて適用するスタイルを制御する
40 複数人で管理するCSSはコメントでガイドラインを記述する
41 スペース、インデント、改行を使って読みやすいCSSを書く
42 プロパティの指定順序を統一する
43 ショートハンドプロパティでCSSを効率化する
44 ショートハンドプロパティはポイントを押さえて使用する
45 ベースとなる文字サイズの指定方法を工夫する

第3章 用途と目的に合わせたレイアウトの法則

46 マルチカラムレイアウトはfloatプロパティで実現する
47 マルチカラムレイアウトではclearプロパティの使い方に注意する
48 positionプロパティで自由度の高いレイアウトを実現する
49 floatプロパティによる2カラムレイアウトの基本を理解する
50 サイト全体の文書構造を整理してからCSSを記述する
51 2カラムの可変レイアウトにはネガティブマージンを使用する
52 固定幅の2カラムレイアウトをエラスティックレイアウトにする
53 floatプロパティを使用して柔軟な3カラムレイアウトを実現する
54 positionプロパティでより柔軟なマルチカラムレイアウトを実現する
55 カラム落ちの原因と対処方法を理解する
56 背景画像を工夫してフロートボックスの下辺を揃える
57 見出しの横に表示するボタンはpositionプロパティで実現する
58 画面中央の配置はposition/marginプロパティで実現する
59 エラスティックレイアウトで横幅サイズを指定して可読性を高める

第4章 ユーザビリティを向上させるCSSデザインの法則

60 CSSのみでロールオーバー効果を実現する
61 パンくずリストは階層構造を考えて作る
62 文書構造が明確にわかる縦並びのメニューを作成する
63 CSSのみでドロップダウン型メニューを作る
64 クリック領域を大きくしてユーザビリティを高める
65 リンク先のファイルタイプを利用者に明示する
66 リンク先が新規ウィンドウで開くことを明示する
67 CSSで擬似フレームを作成する
68 代替スタイルシートを利用して複数のスタイルシートを切り替える
69 印刷に適した印刷用スタイルシートを作成する
70 フィードにCSSを適用してユーザビリティを向上させる

第5章 実践的なCSSデザインの法則

71 Webブラウザのデフォルトスタイルをリセットする
72 1行テキストの上下中央配置にはline-heightプロパティを使用する
73 画像の下の余白はvertical-alignプロパティで解消する
74 字下げとぶら下がりはCSSでコントロールする
75 文字サイズを変更してもテキストが重ならないようにする
76 定義リストを横並びにしてスマートに見せる
77 リストの横並びはインラインとして実現する
78 透過gif画像を利用してカラーバリエーションを作る
79 背景画像を指定してimg要素の見栄えをよくする
80 JavaScriptを使わずにロールオーバー時の画像拡大効果を再現する
81 ステッカーを貼ってプロモーション効果を高める
82 スクロールバー領域を常に確保してセンタリング位置のズレを避ける
83 角丸の背景は最低限の要素で実現する
84 未対応セレクタも状況により使用してかまわない
85 CSS3セレクタを使用してスマートなCSS を記述する

第6章 プロを感じさせるデザインの法則

86 レイアウトデザインはグリッドを意識する
87 余白の使い方でデザインに差をつける
88 マルチカラムデザインでは横幅比のバランスを考える
89 レイアウトと機能に一貫性をもたせユーザビリティを向上させる
90 画像サイズは黄金比や白銀比を利用する
91 配色のルールを理解する
92 号数活字システムで見栄えのよい文字サイズを決める
93 ドロップキャップで文書にリズムを与える
94 ターゲットユーザーに合わせてフォントやディテールを使い分ける
95 各国の欧文フォントの雰囲気をWebデザインに活かす
96 見出しや本文ごとに行間を変えて美しい文字組みを作る
97 もっとも伝えたい情報は左上に配置する
98 ボタンやリンクの機能がひと目でわかるようにする
99 引用をわかりやすく視覚表現する
100 グローバルナビゲーションでは情報の優先順位と利便性を考慮する

付録
用語集
要素索引
属性索引
プロパティ索引
用語索引

ダウンロード

本製品の読者さまを対象としたダウンロード情報はありません。

お詫びと訂正

誤記のためにご迷惑をおかけし、誠に申し訳ございません。

  • 36ページ リンクタイプの表
    • [誤]「prev」と「start」の項目
    • [正]「prev」当該文書の前の文書

      「start」文書群の中の最初の文書
    • 備考:

       表の一部に誤りがありました。

    • 【 第3刷にて修正 】
  • 65ページ 「@規則を理解する」の1つめの見出し
    • [誤]「1」文書は整形式にする
    • [正]「1」@charset規則
    • 備考:

       見出しに誤りがありました。

    • 【 第3刷にて修正 】
  • 158ページ CSSソースの3行目
    • [誤]text-align: center;
    • [正]padding-left: 60px;
    • 備考:

       ソースコードの一部に誤りがありました。

      なお、60pxという値は使用する背景画像により異なります。

お問い合わせ

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

お問い合わせフォーム