| 著者： | (株)アンク |
|---|---|
| 出版社： | ソフトバンク クリエイティブ株式会社 |
| ISBNコード： | ISBN4-7973-3306-5 | 定価： | 2,380円 + 税 |
| 初版発行日： | 平成18年3月30日 |
| サポート： | 書籍奥付に記載のURLが変更されております。こちらのページからサンプルダウンロードを行ってください。 |
スタイルシートによるデザインアイデアが満載。見出しやメニューといったパーツデザイン、サイドバー型、囲み型といったページレイアウトなど、魅力的なWebページを作るためのテクニックをまとめて紹介。ページ作成時のアイデア見本帳としてご活用ください。
CONTENTS
基礎編
A スタイルシートの基礎知識
- 01 HTMLとスタイルシート
- 02 HTMLの基礎知識
- 03 スタイルシートの種類を指定する
- 04 CSSの書式
- 05 スタイルシートを設定する
- 06 セレクタを利用する
- 07 スタイルの継承
- 08 スタイルの優先順位
- 09 ボックスの概念
- 10 単位・色・URL
- 11 DTDと表示モード
- 12 効果的なCSS利用法
B ページデザインの基本ステップ
- 01 サイトのデザインを考える
- 02 ページレイアウトを考える
- 03 コンテンツの構造をマークアップする
- 04 HTMLの種類を宣言する
- 05 ページの情報を記述する
- 06 基本のHTMLソースが完成
パーツデザイン編
C 見出し
- SECTION 1 背景色と罫線で目立たせる
- 1 背景色を指定する
- 2 見出しをWebページの端につける
- 3 見出しを罫線で囲む
- 4 見出しに下線を引く
- 5 見出しの先頭にマークを置く
- 6 見出しをL字型に囲む
- 7 付箋を作る
- SECTION 2 画像を利用する
- 1 背景画像を表示する
- 2 背景画像全体を表示する
- 3 背景画像を固定する
- 4 グラデーションを使う
- 5 先頭にマーク画像を置く
- -6 罫線を画像で表示する
- SECTION 3 見出しの配置を調節する
- 1 見出しとテキストの間隔を調節する
- 2 見出しの横に小見出しを表示する
- SECTION 4 見出しをテキストの横に配置する
- 1 見出しにテキストを回り込ませる
- 2 見出しをテキストの横に配置する
- 3 見出しとテキストの間に罫線を引く
- 4 見出しの行頭文字にテキストを回り込ませる
D テキスト・リスト
- SECTION 1 インデントや行間を調節する
- 1 インデントを指定する
- 2 1行目だけにインデントを指定する
- 3 行間を調節する
- SECTION 2 段落の行頭を装飾する
- 1 行頭文字を装飾する
- 2 行頭にマーク画像を置く
- 3 行頭にマーク画像を配置してインデントを指定する
- SECTION 3 横幅を固定する・段組みを作る
- 1 コンテンツの横幅を固定する
- 2 段組みを作る
- 3 段組みの間に罫線を引く
- SECTION 4 リストのレイアウトを指定する
- 1 リストの周囲の間隔を指定する
- 2 リストの行頭にマーク画像を置く
- 3 定義リストの用語と説明を並べて表示する
E コラム
- SECTION 1 テキストの周囲に罫線を引く
- 1 テキストの周囲に罫線を引く
- 2 罫線の内側に見出しを表示する
- 3 見出しを罫線に重ねる
- SECTION 2 画像を使って囲む
- 1 背景画像を利用する
- 2 コラムの角を丸くする
- SECTION 3 インラインフレーム風に表示する
- 1 インラインフレーム風に表示する
F リンク・メニュー
- SECTION 1 メニュー部分のマークアップ方法
- 1 <br>で改行する
- 2 グロック要素としてマークアップする
- 3 リンクをブロック要素に変更する
- 4 リストを利用する
- SECTION 2 カーソルが重なったときの装飾
- 1 カーソルが重なったときに表示を変える
- 2 ロールオーバーで文字を沈ませる
- 3 ボタン型のリンクを作る
- 4 リンクによってデザインを変える
- SECTION 3 画像を利用する
- 1 背景画像でリンクボタンを作る
- 2 CSSで作るロールオーバーボタン
- 3 先頭にマーク画像を置く
- 4 CSSで先頭にマーク画像を置く
- 5 ロールオーバーで先頭のマーク画像を変化させる
- SECTION 4 メニューを縦に並べる
- 1 メニューを横罫線で区切る
- SECTION 5 メニューを横に並べる
- 1 メニューを縦罫線で区切る
- 2 ボタン型のメニューを並べる
- 3 先頭にマーク画像を置いたメニューを並べる
- 4 タブ型のメニューを作る
G テーブル・フォーム
- SECTION 1 テーブルのデザイン
- 1 テーブルの基本デザイン
- 2 テーブルにキャプションをつける
- 3 罫線のデザインを変える
- 4 テーブルの構造を示す
- SECTION 2 フォームのデザイン
- 1 フォームを表示する
- 2 キーボードショートカットを指定する
- 3 プルダウンの項目を整理する
- 4 コントロールをグループ化する
H 画像
- SECTION 1 画像を利用する
- 1 画像の周囲に罫線を引く
- 2 画像にテキストを回り込ませる
- 3 画像にキャプションをつける
ページレイアウト編
I シンプル型
- SECTION 1 基本デザイン
- 1 背景色を指定する
- SECTION 2 ウィンドウ幅いっぱいにヘッダー・フッターを表示する
- 1 背景画像を表示する
- SECTION 3 ヘッダーに画像を利用する
- 1 見出しとテキストの間隔を調節する
- SECTION 4 全体の幅を指定する
- 1 見出しにテキストを回り込ませる
- SECTION 5 センタリングする
- 1 見出しにテキストを回り込ませる
J サイドバー型
- SECTION 1 左にサイドバーを置く
- 1 左にサイドバーを置く
- 2 全体の幅を指定する
- 3 センタリングする
- SECTION 2 右にサイドバーを置く
- 1 右にサイドバーを置く
- 2 全体の幅を指定する
- 3 センタリングする
- SECTION 3 左右にサイドバーを置く
- 1 左右にサイドバーを置く
K 囲み型
- SECTION 1 逆L字型（ヘッダー・左サイドバー）
- 1 ヘッダーと左サイドバーを置く
- 2 ヘッダーとサイドバーを繋げる
- SECTION 2 逆コ型（ヘッダー・フッター・左サイドバー）
- K-2-1 上・左・下を囲む
- K-2-2 センタリングする
スタッフ（ライター）
- 執筆：
Copyright© ANK Co.,ltd. All rights reserved.
