スタイルシート スタイルブック(有坂 陽子 長谷川 恭久)|翔泳社の本
  1. ホーム >
  2. 書籍 >
  3. スタイルシート スタイルブック

スタイルシート スタイルブック



形式:
書籍
発売日:
ISBN:
9784798105857
定価:
2,420(本体2,200円+税10%)
仕様:
B5変・208ページ

Tシャツを着替えるようにウェブページも着替えよう!

テーブルデザインから「ハイブリッド・デザイン」へ
ウェブログではじめてCSSにふれる初心者にも最適

Webページのメンテナンス性やアクセシビリティを向上させ、「検索にヒットしやすい」サイトを構築するには、スタイルシートを導入して「コンテンツとデザインの分離」を心がけることが大切です。その一方で、今まで馴れ親しんできた「テーブルタグ」デザインからなかなか脱却できず、CSSは「ちょっとしたWebの装飾」といったレベルでとどまっているのが、Webデザインの現場の悲しい現実です。

そんな中、本書は「CSSオンリーのレイアウト」という次のステージを目指して、正しいスタイルシートの使い方をやさしく導きます。既存の「テーブルタグによるデザイン」に限界を感じ、新しいWebデザインの潮流を吸収したい意欲的なWebデザイナーには大きな刺激となることでしょう。さらに、すぐにはCSSオンリーのレイアウトに移行できないという方には、テーブルデザインとCSSデザインの折衷である「ハイブリッド・デザイン」も紹介しています。

また、いま流行りの「ウェブログ」サイトを立ち上げている個人ユーザーが、はじめてCSSにふれるときの一冊としてもたいへんお勧めです。著者の有坂さん自身、自らのウェブログをレイアウトする際に「CSSオンリーのWebデザインに戸惑った」という経験があり、これが本書のような「CSSの考え方」を吸収できる入門書の執筆につながっています(本書の「あとがき」を参照)。

なお本書は、CSSプロパティを網羅的に解説したり、さまざまなノウハウを集めて紹介するような参考書とは趣が異なりますので、実際にWebデザインを行う際には、別途「スタイルシート辞典」のようなリファレンスを用意されることをお勧めします(本書を読むうえでは無くても困りません)。

●環境

本書では、2000年ごろから登場した「CSS1をほぼサポートし、CSS2の一部の機能も実現している」Webブラウザ(本書では「モダンブラウザ」と呼ぶ)をターゲットとしています。具体的にはMicrosoft Internet Explorer 5以降(Windows版はとくに5.5以降)、Netscape 6以降、Opera 6以降、Mozilla、Safariといったブラウザです。

00 はじめに

00-01 1999年、パーティだ!
00-02 ブラウザ戦争の後遺症
00-03 時代がCSSに追いついた?
00-04 この本はただの通過点
00-05 本書の構成

01 STYLE BOOK編

01-00 スタイルシート・レボリューション
01-01 ブロックをレイアウトする
   ブロック・デザインとは
   ブロックごとの配置指定
01-02 画面を設計する
   IDプロックの構成
   ページを作る前にまず設計
01-03 見出しタグは適切に
   タイトルに見出しタグ
01-04 ページの読み上げに適したデザイン
   視覚障害者のために
01-05 画像で構成されたページ
   IDによるブロック分け
   positionプロパティ―――相対配置と絶対配置
01-06 マイ・スタイルシートを作ろう
   マイ・スタイルシート
   スクロールしても動かない画像
01-07 スクロールボックスを作る
   ページの周囲を縁取る
   スクロールボックス
01-08 画像のレイヤ
   メイン画像を背面に配置
   メニュー・ボタン
   メニューの背景の構造
01-09 ブロックを積み上げる
   基本情報はbodyタグのスタイルで
   上下のブルーの領域の調整
   白いブロックの積み重ね
   メインブロックの指定
01-10 メニューボックスに画像を
   3枚の画像でメニューをデザイン
   メニューブロックの構成
   メニューのスタイル
01-11 テキスト中の小さなメニューボックス
   小さなメニューボックス
   要素の配置
   リストのスタイル―――マーカーを画像で
01-12 リストのマーカーを画像にする
   リストの項目に画像を入れる
   リストのスタイル
01-13 リストで横並びのメニュー
   リスト全体の構造とスタイル
   リストを横並びに表示するスタイル
01-14 フォト・ギャラリーの設定
   枠線のスタイル設定を利用する
   画像の配置
01-15 画像を並べてギャラリーに
   サンプルページの構造
   画像を並べる
01-16 達人のCSS
   複雑なCSSを分かりやすく
   さまざまなセレクタ
   3カラム・レイアウト

02 基礎編

02-01 Webデザイナー・バージョン2
02-02 CSSとは一体何もの?
02-03 表舞台に出てこれない主役
02-04 CSS 8つの魅力
02-05 ファイルは小さい方が良い
02-06 オールインワンもなんのその
02-07 プログラマーとも仲良し
02-08 HTMLの構造化でみんな得をしよう
02-09 CSSの仕組み
   基本形
   IDとCLASSを見極めよ!
   さらに細かい指定をCSSで
02-10 HTMLとCSSをリンクさせる
   外部リンク
   埋め込み式
   インライン方式
02-11 まとめ―――本書をスタート地点に

03 実践編

03-01 Webデザインの理想と現実
   CSSサイトにできない理由―――古いブラウザ
   「ハイブリッドデザイン」の提案
03-02 ハイブリッドデザインに挑戦
   ハイブリッドデザインを使うとき
   Walnut Studio―――ハイブリッドデザインのサンプルページ
   サンプルページ全体のレイアウト構造
   サンプルページで使われている画像
   CSSを組み込む準備―――HTMLタグに属性を
   テーブル 1:メニューバー
   「箱」としてのdivタグ
   テーブル 2の左:メインコンテンツ
   テーブル 2の右:作品リスト
   使用するスタイルのまとめ
   CSSファイルをリンクするときのトリック
   bodyタグのスタイル―――まずはCSSの基本
   背景プロパティをもっと詳しく
   leftsideのスタイル―――余白とフォント
   h1タグのスタイル 1―――さらに背景
   h1タグのスタイル 2―――詰め
   リストのスタイル 1―――マーカーを画像に
   リストのスタイル 2―――マージン
   リンクの色も忘れずに―――hover擬似クラス
   メニューは効果的に 1―――枠線
   メニューは効果的に 2―――ブロックでまとめて
   まとめ―――ひとくちに「ハイブリッドデザイン」と言っても
03-03 テーブルを使わないCSSデザインを
   テーブルはもう使わないで
   CSSデザイン版「Walnut Studio」
   ボックスモデルを理解しよう
   ボックスサイズに注意
   ボックスサイズの罠―――古いブラウザ問題
   ボックスの罠を回避する―――Windows IE 5.x対策
   最後の難関―――Opera対策
   回避方法シンプル版
   CSSデザインスタート・・・その前に
   divタグは明確かつ最小限に
   箱にスタイルを付けていく
   コンテンツエリアのスタイル
   CSSでメニューバー
   リストで横に並べてメニューに

04 応用編

04-01 丸角レイアウト
   丸角の部品を作成する
   丸角ボックスの構成
04-02 フォントサイズをCSSで
   とってもファジーはフォントサイズ
   絶対値は「px」が最強?
   相対値「em」の伝説
   キーワードなんていかがですか?
   フォントの世界は終わりがない
04-03 JavaScriptはいらない―――擬似クラスの応用
   より早いマウスオーバー処理
   背景をずらして画像を切り替える
   フォームもJavaScriptいらず
04-04 さまざまなセレクタ―――属性からCSS
   自家製広告ブロック
   リンクをドレスアップ
04-05 画像が多いサイトのSEO対策
   表示領域外にテキスト
   テキストの上に画像
04-06 画像も可変
   画像をCSSに配置する

05 APPENDIX

Appendix A CSSプロパティ簡易リファレンス
   A.1 はじめに
   A.2 ボックスモデル関連のプロパティ
   A.3 ポジション関連のプロパティ
   A.4 視覚効果関連のプロパティ
   A.5 リスト関連のプロパティ
   A.6 背景関連のプロパティ
   A.7 フォント関連のプロパティ
   A.8 テキスト関連のプロパティ
   A.9 擬似クラス(Pseudo-Class)
   A.10 擬似要素(Pseudo-Element)

本書は付属データの提供はございません。

お問い合わせ

内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。

正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。

利用許諾に関するお問い合わせ

本書の書影(表紙画像)をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影(表紙画像)以外のご利用については、こちらからお問い合わせください。

追加情報はありません。
この商品の「よくある質問」はありません。

ご購入いただいた書籍の種類を選択してください。

書籍の刷数を選択してください。

刷数は奥付(書籍の最終ページ)に記載されています。

現在表示されている正誤表の対象書籍

書籍の種類:

書籍の刷数:

本書に誤りまたは不十分な記述がありました。下記のとおり訂正し、お詫び申し上げます。

対象の書籍は正誤表がありません。

最終更新日:2006年02月27日
発生刷 ページ数 書籍改訂刷 電子書籍訂正 内容 登録日
1刷 164
リスト03-25 下から2行目
7刷
}シ
}
2006.02.27
5刷 162
リスト03-23 冒頭ID
6刷
#navdiv
#navbar
2005.05.23

感想・レビュー

nobara さん

2015-03-11

検定の勉強上の参考

yhassy さん

2008-05-22

自分の本ですが