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

翔泳社(出版社) , 有坂陽子(著) , 長谷川恭久(著)

商品番号
105850
販売状態
販売終了
納品形態
宅配便にてお届け
発売日
2004年02月10日
ISBN
4798105856
判型
B5変
ページ数
208
キーワード
 メーカー  ホームページ作成  インターネット  スタイルシート(CSS)  翔泳社

販売価格:¥2,376(税込)

送料無料

本体価格の10%をポイント還元(会員限定)

現在、本商品は販売しておりません。
ほしい物リストに追加

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)

各種問い合わせは以下のリンクからご連絡ください

関連商品

ResizeKit2.NET 1PC開発ライセンス

販売価格:38,880円(税込)

2018.11.05発売