実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
 | 実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips (2007/02) 市瀬 裕哉福島 英児 価格：￥ 3,360 （税込） 1500 円以上国内配送料無料 商品詳細を見る Web Standards(Web標準)の概念やメリット等を解説し、Web標準の仕様から、コーディングスタイル、XHTML+CSS Tipsまでをまとめた、一歩先のWeb標準ガイドブック。 |
【商品の説明】
WWWが登場して以来、それを取り巻く現状は、ずっと変わり続けてきました。軍用ネットワークから民間用ネットワークへの転用、グラフィカルなWebブラウザの登場に伴うWebサイトの隆盛、文字や写真に留まらない多様なコンテンツの提供、あるいは双方向性による一方的な情報提供に留まらないコミュニケーション......。そんなWebの世界で、近年注目されているのが「Web Standards(Web標準)」です。
Web Standardsとはどういう概念なのか。Web Standardsに準拠することでどんなメリットを得ることができるのか。どのように制作を進めればWeb Standardsに準拠したリソースを提供できるのか。Web Standardsに準拠しつつも新しく、それでいて魅力あるコンテンツを提供する手法とはどういうものか。
本番では、それらを次の7章で解説しています。
1. Web Standardsの基本
2. (X)HTMLの基本
3. CSSの基本
4. floatプロパティを利用したレイアウト
5. positionプロパティを利用したレイアウト
6. 実践レイアウト
7. XHTML&CSS Tips
1~3章ではWeb Standardsという概念を理解するための解説を、4・5章ではCSSでのレイアウトの基本となるfloatプロパティ、positionプロパティを利用したレイアウトの基本を解説しています。6章ではレイアウトのパターン別にその手法を紹介、さらに具体的なデザインを例にその完成までを解説しています。また、7章では、実際の制作にあたって知っておきたいXHTML&CSSのTipsをまとめています。
著者からのコメント
この本は3人の共著という形になっていますが、著者の3人とも「(X)HTMLをしっかりと形作った上で、CSSによるデザインを行う」ことを常々実践・実験し、積極的に情報を交換し合っていました。
執筆にあたって綿密な打ち合わせを行い、それぞれの得意分野を生かして「仕様に基づいた解説」「多くの実践的レイアウトの解説・再現」「Web標準を守りながら、大胆かつ先進的なCSS Tips」を伝えることを目的として執筆しました。結果的に400ページを超えるボリュームとなりましたが、読者の目的に合わせて章分けをしていますので、「仕様は熟知しているけど実践的なレイアウトを更に勉強したい」「Tipsなどには詳しいけど、仕様の理解に自信がない」といった場合でも柔軟に対応できる内容となっています。もちろん、本書の内容を全てを読むことで、「(X)HTML/CSSをある程度知っているけどもっと本格的に勉強したい」という方のニーズをしっかりと満たすことができるだろうと思っています。
更なるステップアップを図りたいWeb制作者は、ぜひとも一度ご覧ください。
【目次】
[1] Web Standardsの基本
1.1 Web Standardsとは
[2] (X)HTMLの基本
2.1 HTMLとXHTMLに共通して覚えておくべきこと
2.2 HTMLとXHTMLにおける違い
2.3 (X)HTMLはまず文章ありき
[3] CSSの基本
3.1
これだけは守らなければならない書式
3.2 心がけるとメンテナンスしやすい書式
3.3 CSS管理のコツ
3.4 視覚整形フォーマット
[4] floatプロパティを利用したレイアウト
4.1 寄せと流し込み
4.2 重なったブロックボックスにマージン
4.3 複数フロートの横並び
4.4 ネガティブマージンを利用したレイアウト
4.5 floatプロパティを利用したレイアウトの使い分け
4.6 フロートしたボックスを含む親ボックスの高さの算出
[5] positionプロパティを利用したレイアウト
5.1 指定できる4つの配置方法
5.2 絶対配置を利用したレイアウト
5.3 固定配置を利用したレイアウト
[6] 実践レイアウト
6.1 レイアウトバターン
6.2 接合レイアウトで情報を整理したプログページの制作
6.3 ボックスを自由に配置したページデザイン
[7] XHTML&CSS Tips
7.1 トピックパスのマークアップ
7.2 outlineプロパティによるドロップシャドウ
7.3 Mac OS XのDock風ナビゲーション
7.4 CSSによる自動番号付け(カウンタ生成)
7.5 CSSでフォトギャラリー・
7.6 アイコンリモート表示メニュー
7.7 CSSを使って画像をポップアップ表示
7.8 CSSだけで動作するドロップダウンメニュー
7.9 背景画像を利用したロールオーバー効果
7.10 visibilityプロパティを利用してimg要素をロールオーバー
7.11 さまざまなブラウザで文字の見栄えを揃えるCSSライブラリ
7.12 IE6以下での子供セレクタの使用
7.13 印刷用CSSの作成
7.14 line-heightプロパティの指定値
7.15 定義リストのdtとddを横並びさせる
7.16 背景画像を利用して訪問済みリンクを一工夫する
7.17 img要素のサイズをCSSで指定
7.18 positionプロパティを利用して要素を画面中央に固定
7.19 positionプロパティでフッタを常に画面の下部に固定
7.20 行ボックスの高さで垂直センター配置
7.21 背景画像を利用した画像置換
7.22 リンク先のファイルタイプをCSSで明示する
7.23 CSSでフォームをスタイリング
7.24 モダンブラウザ向けのCSSハック
[Appendix]
DTDの読み方ガイド
DOCTYPEスイッチの一覧表
CSS2.1の各プロパティリファレンス
【カスタマーレビュー】
ボックスハックで泣かされた方に
対象レベルは、一度はホームページを作ったことがある人程度。HTMLって何？ という方には不向きですが、リンクくらいなら張れる、CSSで色指定できるよという人なら問題なく読めるはず。恥ずかしながら私もその一人ですが、本書は特に難しいとは感じませんでした。
前半は、XHTMLの組み立て方やCSSをきれいに書く方法、各項目をならべる順番など、タグは知っていてもほとんどの人が意識していないコーディングの方法がわかりやすい言葉で丁寧に説明されています。
特にCSSの書き方は参考になりました。今までただ闇雲にだらだら項目を並べたあげく、どこに何が書いてあるのか自分でもわからなくなっていた私には「コーディングするってこういうことなのか！」と目からウロコがポロポロ。見た目に美しいだけでなく、どうすればメンテナンスしやすいかなど、文書構造まで踏み込んだ解説があるのがうれしい。これだけでも十分勉強になったのですが、後半の実践編はさらに使える内容になっています。XHTMLをはじめた人がおそらく一度は躓くボックスハックの解説は秀逸で、非常にわかりやすいです。特にIEのバグ回避の対処の仕方(IE7.0やFireFoxなどのモダンブラウザまでフォロー)がシンプルかつスマートでした。その他、実践レイアウトではページレイアウト例からタブ型ナビゲーションやドロップダウンメニュー等具体的なTIPSがたっぷり充実。
お値段が高めなのがひっかかっている方も、十分に満足できる内容だと思います。
迷える「ＣＳＳデザイン学習者」の救世主。
惜しみなく掲載されたＸＨＴＭＬ、ＣＳＳコードと豊富な図解で、ＣＳＳレイアウトが存分に学べます。
自分はタイトル通り、読んだ内容は３日以内に実践しました。
頭でわかった気になるだけでなく、実際に手打ちすると体が覚えます。「ここをいじるとこうなるんだ！」と、一種の感動を伴うので長期記憶に効果的で、１度体感すればなかなか忘れません。
見やすいコード・図解と明快な解説で、わかったようでわかっていなかった曖昧な自分の理解に１本の筋が通りました。「できる大辞典 ＨＴＭＬ＋ＣＳＳ」と本書があればＣＳＳデザインの基本は十分かと思います。以前からamazonのレビューや評価で気にしていた本書ですが、書店で実物を見て即買いして本当に良かったです。本当にＣＳＳをマスターしてない人には絶対に書けない本だと思います。良い本を書いていただき有難うございました。
XHTML,CSSについてきれいにまとめられています
大きく分けて、
・XHTML,CSSの概念
・HTMLとCSSを使ったデザイン手法
がまとめられています。
前者のXHTML,CSSについては、著者の方々がしっかりと概念を理解されているのでしっかりと体系づけて理解できる書き方になっています。後者のデザイン手法は、CSSではできなさそうな表現方法を丁寧な解説付きで掲載してあります。また、人によって整理の仕方がまばらなCSSの管理方法の提案もしてあります。コーディングを仕事としている方には是非読んでいただきたい書籍です。
基本から応用までしっかりサポート！
(X)HTMLやCSSの基本的な事から、CSSレイアウトにおける応用的なテクニックまでバッチリ押さえています。知っていることでも改めて納得させられる知識・内容も多く、本のボリュームたっぷりなので満足の出来です。マークアップの基本からCSSレイアウトにおけるボックスモデルの概念、カラムレイアウトのテクニックなどもしっかりしていますので、これからWeb標準に準拠したコーディングに挑戦しようという人にはお薦めです。Web界でも有名な方たちが著書した本ですので、揃えておいて損はないと思います。
結局、これが一番良い
一度はHTML、XHTMLに触ったことがある人向けです。
まったく触ったことが無い方は、この本と別に、入門用の本を購入することをオススメします。
知識の1から10までを追った面倒なものでもなく、ただのリファレンス集にも留まらず、CSSを体系的に学ぶことができます。CSSによるレイアウトで一度でも詰まったことがある人は、目から鱗の連続間違いなし！「ジッセンを持ってコレを知ルノダ」と、ただ仕事をこなして覚えようとすると、ついつい覚えられたはずのモノが漏れてしまいがちですが、この「実践」本を片手に持って取り掛かれば、学習効率はかなり向上するはずです。この本を読んでトッテモすばらしいと感じたのは、決して紹介している技術が退屈に見えず、読み手を飽きさせない。むしろ、ひきつけてくれるフレンドリーさです。
リファレンス集や、1から10まで追った本を手に取り失敗した人。
また、もう一度体系的に覚えなおしたい。復習したい人。全然関係ないけどただ興味がある人。
どんな方にもオススメできる、買って読んで自慢のできる。最愛の実践本です。
● ホームページ作成ガイドブック
Ｌ ホームページ・ブログ作成ソフト
Ｌ HTML & CSS
Ｌ CSS（スタイルシート）
Ｌ JavaScript（ジャバスクリプト）
Ｌ 無料でできる・作るシリーズ
● スタイルシート（CSS）解説本
Ｌ HTML/XHTML&スタイルシートレッスンブック
[1] Web Standardsの基本
1.1 Web Standardsとは
[2] (X)HTMLの基本
2.1 HTMLとXHTMLに共通して覚えておくべきこと
2.2 HTMLとXHTMLにおける違い
2.3 (X)HTMLはまず文章ありき
[3] CSSの基本
3.1
これだけは守らなければならない書式
3.2 心がけるとメンテナンスしやすい書式
3.3 CSS管理のコツ
3.4 視覚整形フォーマット
[4] floatプロパティを利用したレイアウト
4.1 寄せと流し込み
4.2 重なったブロックボックスにマージン
4.3 複数フロートの横並び
4.4 ネガティブマージンを利用したレイアウト
4.5 floatプロパティを利用したレイアウトの使い分け
4.6 フロートしたボックスを含む親ボックスの高さの算出
[5] positionプロパティを利用したレイアウト
5.1 指定できる4つの配置方法
5.2 絶対配置を利用したレイアウト
5.3 固定配置を利用したレイアウト
[6] 実践レイアウト
6.1 レイアウトバターン
6.2 接合レイアウトで情報を整理したプログページの制作
6.3 ボックスを自由に配置したページデザイン
[7] XHTML&CSS Tips
7.1 トピックパスのマークアップ
7.2 outlineプロパティによるドロップシャドウ
7.3 Mac OS XのDock風ナビゲーション
7.4 CSSによる自動番号付け(カウンタ生成)
7.5 CSSでフォトギャラリー・
7.6 アイコンリモート表示メニュー
7.7 CSSを使って画像をポップアップ表示
7.8 CSSだけで動作するドロップダウンメニュー
7.9 背景画像を利用したロールオーバー効果
7.10 visibilityプロパティを利用してimg要素をロールオーバー
7.11 さまざまなブラウザで文字の見栄えを揃えるCSSライブラリ
7.12 IE6以下での子供セレクタの使用
7.13 印刷用CSSの作成
7.14 line-heightプロパティの指定値
7.15 定義リストのdtとddを横並びさせる
7.16 背景画像を利用して訪問済みリンクを一工夫する
7.17 img要素のサイズをCSSで指定
7.18 positionプロパティを利用して要素を画面中央に固定
7.19 positionプロパティでフッタを常に画面の下部に固定
7.20 行ボックスの高さで垂直センター配置
7.21 背景画像を利用した画像置換
7.22 リンク先のファイルタイプをCSSで明示する
7.23 CSSでフォームをスタイリング
7.24 モダンブラウザ向けのCSSハック
[Appendix]
DTDの読み方ガイド
DOCTYPEスイッチの一覧表
CSS2.1の各プロパティリファレンス
【カスタマーレビュー】
ボックスハックで泣かされた方に対象レベルは、一度はホームページを作ったことがある人程度。HTMLって何？ という方には不向きですが、リンクくらいなら張れる、CSSで色指定できるよという人なら問題なく読めるはず。恥ずかしながら私もその一人ですが、本書は特に難しいとは感じませんでした。
前半は、XHTMLの組み立て方やCSSをきれいに書く方法、各項目をならべる順番など、タグは知っていてもほとんどの人が意識していないコーディングの方法がわかりやすい言葉で丁寧に説明されています。
特にCSSの書き方は参考になりました。今までただ闇雲にだらだら項目を並べたあげく、どこに何が書いてあるのか自分でもわからなくなっていた私には「コーディングするってこういうことなのか！」と目からウロコがポロポロ。見た目に美しいだけでなく、どうすればメンテナンスしやすいかなど、文書構造まで踏み込んだ解説があるのがうれしい。これだけでも十分勉強になったのですが、後半の実践編はさらに使える内容になっています。XHTMLをはじめた人がおそらく一度は躓くボックスハックの解説は秀逸で、非常にわかりやすいです。特にIEのバグ回避の対処の仕方(IE7.0やFireFoxなどのモダンブラウザまでフォロー)がシンプルかつスマートでした。その他、実践レイアウトではページレイアウト例からタブ型ナビゲーションやドロップダウンメニュー等具体的なTIPSがたっぷり充実。
お値段が高めなのがひっかかっている方も、十分に満足できる内容だと思います。
迷える「ＣＳＳデザイン学習者」の救世主。惜しみなく掲載されたＸＨＴＭＬ、ＣＳＳコードと豊富な図解で、ＣＳＳレイアウトが存分に学べます。
自分はタイトル通り、読んだ内容は３日以内に実践しました。
頭でわかった気になるだけでなく、実際に手打ちすると体が覚えます。「ここをいじるとこうなるんだ！」と、一種の感動を伴うので長期記憶に効果的で、１度体感すればなかなか忘れません。
見やすいコード・図解と明快な解説で、わかったようでわかっていなかった曖昧な自分の理解に１本の筋が通りました。「できる大辞典 ＨＴＭＬ＋ＣＳＳ」と本書があればＣＳＳデザインの基本は十分かと思います。以前からamazonのレビューや評価で気にしていた本書ですが、書店で実物を見て即買いして本当に良かったです。本当にＣＳＳをマスターしてない人には絶対に書けない本だと思います。良い本を書いていただき有難うございました。
XHTML,CSSについてきれいにまとめられています大きく分けて、
・XHTML,CSSの概念
・HTMLとCSSを使ったデザイン手法
がまとめられています。
前者のXHTML,CSSについては、著者の方々がしっかりと概念を理解されているのでしっかりと体系づけて理解できる書き方になっています。後者のデザイン手法は、CSSではできなさそうな表現方法を丁寧な解説付きで掲載してあります。また、人によって整理の仕方がまばらなCSSの管理方法の提案もしてあります。コーディングを仕事としている方には是非読んでいただきたい書籍です。
基本から応用までしっかりサポート！(X)HTMLやCSSの基本的な事から、CSSレイアウトにおける応用的なテクニックまでバッチリ押さえています。知っていることでも改めて納得させられる知識・内容も多く、本のボリュームたっぷりなので満足の出来です。マークアップの基本からCSSレイアウトにおけるボックスモデルの概念、カラムレイアウトのテクニックなどもしっかりしていますので、これからWeb標準に準拠したコーディングに挑戦しようという人にはお薦めです。Web界でも有名な方たちが著書した本ですので、揃えておいて損はないと思います。
結局、これが一番良い一度はHTML、XHTMLに触ったことがある人向けです。
まったく触ったことが無い方は、この本と別に、入門用の本を購入することをオススメします。
知識の1から10までを追った面倒なものでもなく、ただのリファレンス集にも留まらず、CSSを体系的に学ぶことができます。CSSによるレイアウトで一度でも詰まったことがある人は、目から鱗の連続間違いなし！「ジッセンを持ってコレを知ルノダ」と、ただ仕事をこなして覚えようとすると、ついつい覚えられたはずのモノが漏れてしまいがちですが、この「実践」本を片手に持って取り掛かれば、学習効率はかなり向上するはずです。この本を読んでトッテモすばらしいと感じたのは、決して紹介している技術が退屈に見えず、読み手を飽きさせない。むしろ、ひきつけてくれるフレンドリーさです。
リファレンス集や、1から10まで追った本を手に取り失敗した人。
また、もう一度体系的に覚えなおしたい。復習したい人。全然関係ないけどただ興味がある人。
どんな方にもオススメできる、買って読んで自慢のできる。最愛の実践本です。
● ホームページ作成ガイドブック
Ｌ ホームページ・ブログ作成ソフト
Ｌ HTML & CSS
Ｌ CSS（スタイルシート）
Ｌ JavaScript（ジャバスクリプト）
Ｌ 無料でできる・作るシリーズ
● スタイルシート（CSS）解説本
Ｌ HTML/XHTML&スタイルシートレッスンブック
ジャンル : コンピュータ ｜ テーマ : ホームページ・ブログ制作
関連タグ : CSSガイドブック
