CSSによるWebデザイン カスタマイズガイド

概 要

本書は、Webコンテンツ制作に必要な、XHTML、スタイルシート(CSS)の基本から具体的なカスタマイズテクニックまでを、デザインサンプルを用いて簡単に構造が理解できるように解説したホームページのカスタマイズガイドです。ありきたりなWebページから魅力的なWebページへと変身させる方法を、初心者でもわかるように具体的に段階を追ってやさしく解説します。

著者 國分亨
価格 本体2400円(税別)
ISBN 4-7980-1513-X
発売日 2006/11/29
判型 B5変
色数 4色
ページ数 224
CD/DVD
対象読者 初級
シリーズ
表紙イメージ
購入 アマゾンで購入する

※リンク先によっては、販売ページが用意されていないことがあります。 あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

現在サポート情報はありません

目次

Chapter 1 XHTML+CSSの必要性

Web標準という流れ

XHTML+CSSを利用するメリット

XHTML+CSSの実践フロー

Chapter 2 XHTMLの基本

XML宣言とDOCTYPE宣言

要素と属性

ブロックレベル要素とインライン要素

文法チェックを忘れずに

Chapter 3 CSSの基本

CSSを覚えるにあたって

3-1 CSSの記述ルール

基本的な記述方法

スタイルシートの記述場所

id属性とclass属性について

セレクタの指定方法

単位について

3-2 よく使うプロパティについて

フォント

テキスト

背景

幅と高さ

リスト

余白/枠線

表示と位置

Chapter 4 シンプルなトップページ向けレイアウト

レイアウトとデザイン

このチャプターのポイント

サンプルファイルのソースコード

4-1 XHTMLと読込専用CSSの準備

XHTMLにid属性を定義する

読込専用の外部CSS(import.css)を定義する

4-2 共通設定と全体構造の指定

共通設定の指定

bodyと全体構造の指定

4-3 ヘッダとメインイメージの指定

ヘッダの指定

メインイメージの指定

4-4 フッタ(リストメニュー、COPYRIGHT)の指定

XHTMLファイルの修正とフッタの指定

4-5 メインメニューの指定

メインメニューの仕組みについて

メインメニュー:共通項目の設定

メインメニュー:XHTMLファイルの修正と個別項目の設定

4-6 コンテンツの指定

XHTMLファイルの修正

コンテンツの設定

イメージ画像部分のリンクの設定

Chapter 5 トップページ向けレイアウトの修正と下層コンテンツへの展開

レイアウトとデザイン

このチャプターのポイント

サンプルファイルのソースコード(共通ファイル)

サンプルファイルのソースコード(トップページ用)

サンプルファイルのソースコード(ニュースページ用)

5-1 XTHMLとCSSの準備

ベース素材の準備

共通設定用CSSの修正

5-2 トップページの修正

トップ用CSSの作成

トップ用の読込専用CSSを作成

index.htmlのコンテンツ(#content)部分の置き換え

置き換え後のコンテンツ(#content)の構造について

コンテンツ(#content)部分のCSSを指定

5-3 下層コンテンツ(ニュースページ)の指定

news.htmlの準備

ニュースページ用の読込専用CSSを作成

news.cssの指定

Chapter 6 2段組ブログのレイアウト

レイアウトとデザイン

サンプルファイルのソースコード

6-1 XHTMLと読込専用CSSの準備

XHTMLにid属性を定義する

読込専用の外部CSS(import.css)を定義する

6-2 共通設定と全体構造の指定

共通設定を記述したshare.cssを用意する

リストメニューに関する指定

bodyと全体構造の指定

6-3 ヘッダの指定

ヘッダの指定

6-4 フッタ(リストメニュー、COPYRIGHT)の指定

フッタの指定

6-5 コンテンツの段組指定

コンテンツのブロック構造について

コンテンツを2段組に設定する

6-6 サイドメニューの指定

タイトルとリストメニューの設定

検索ボックスの設定

6-7 本文ブロックの指定

XHTMLファイルの修正

ブログ本文ブロックの指定

Chapter 7 3段組ブログのレイアウト

レイアウトとデザイン

サンプルファイルのソースコード

7-1 各ファイルの準備

XHTMLにid属性を定義する

読込専用の外部CSS(import.css)の準備

7-2 共通設定と全体構造の指定

リストメニューに関する指定

bodyと全体構造の指定

7-3 ヘッダとメインイメージの指定

ヘッダの指定

7-4 フッタ(リストメニュー、COPYRIGHT)の指定

フッタの指定

7-5 コンテンツの段組指定

コンテンツのブロック構造について

コンテンツを3段組に設定する

7-6 中央ブロック(ブログ本文)の指定

エントリーの構造を確認

コンテンツの設定

7-7 左ブロック、右ブロックの指定

左ブロックの設定

右ブロックの設定

Chapter 8 フォトアルバムのレイアウト

レイアウトとデザイン

このチャプターのポイント

サンプルファイルのソースコード

8-1 各ファイルの準備

XHTMLにid属性を定義する

読込専用の外部CSS(import.css)の準備

8-2 共通設定と全体構造の指定

リストメニューに関する指定

bodyと全体構造の指定

8-3 ヘッダとヘッダメニューの指定

ヘッダの指定

ヘッダメニューの指定

8-4 フッタ(COPYRIGHT)の指定

フッタの指定

8-5 コンテンツの設定

サムネール画像一覧の構造について

サムネール画像一覧の設定

テキストナビゲーションの設定

Chapter 9 コーディング/オーサリングに便利なツール

Aptanaとは?

画面の見方

環境を設定する

プロジェクトの登録

HTMLやCSSファイルを作成する

注意点について

Chapter 10 XHTML/CSS関連で参考になるサイト

検証サービス/支援ツール

デザイン/Tips

Chapter 11 コーディングで押さえておきたいこと

記述を簡略化しよう!

ボックスモデルの考え方

プロパティの記述順を決めよう

Chapter 12 画像を作成するためのツール

商用ソフトウェアに引けを取らない「GIMP」

Chapter 13 JavaScriptライブラリで演出効果を付ける

フォトアルバム向けのJavaScriptライブラリ:「Lightbox JS」

Appendix

テキスト関連のプロパティ

フォント関連のプロパティ

余白/枠線関連のプロパティ

背景関連のプロパティ

表示と位置関連のプロパティ

幅と高さ関連のプロパティ

リスト関連のプロパティ

内容の追加関連のプロパティ

テーブル関連のプロパティ

印刷関連のプロパティ

カーソル関連のプロパティ

アウトライン関連のプロパティ

音声関連のプロパティ

PR

秀和システム