スタイルシート
ステップアップアレンジブック
|
編著者
|
エ・ビスコム・テック・ラボ
|
|---|
|
出版社
|
毎日コミュニケーションズ
|
|---|
|
出版日
|
2003年09月17日
|
|---|
|
判型
|
B5判 288ページ
|
|---|
|
価格
|
本体2,600円＋税
|
|---|
|
ISBN
|
4-8399-1252-1
|
|---|
スタイルシート（CSS）を効果的に活用すると、ページ制作の効率を上げることができます。たとえば、HTMLでは手間のかかる作業だった、ページデザインの変更やアレンジ、コンテンツの追加や削除などにも柔軟に対応できるようになります。さらに、ページ数が増えてきても、デザインをまとめてコントロールすることができ、１ページずつ編集する手間を省くことができます。これこそが、CSSの最大の特徴であり、最大のメリットなのです。
しかし、CSSを効果的に活用するためには、
" CSSのプロパティをどのように組み合わせて
デザインを作ればよいのか "
" スタイルの設定をどのHTMLタグに適用すればよいのか "
" HTMLでどのようにマークアップしておくと
スタイルを設定しやすいのか "
" スタイルの設定をどのように管理すれば
作業効率を上げることができるのか " …
などなど、気をつけたいポイントがたくさんあります。
そこで本書では、Webページの実例サンプルをあげながら、CSSを効果的に活用するためのテクニックを紹介していきます。サンプルごとにさまざまなテクニックを盛り込んでありますので、CSSを使ったWebページ制作に活用してください。
本書では、HTMLやスタイルシート（CSS）の基本を修得したWebページ制作者を対象に、CSSをより効果的に利用するためのテクニックを紹介しています。
Chapter 1〜2では、CSSのメリットや、効果的に利用するためのポイントを紹介します。そのため、まずはここで、CSSの基本的な特徴やポイントを押さえてから、実践に入ることをおすすめします。
次に、Chapter3〜7では、Webページの実際のサンプルを取り上げ、制作手順やアレンジのテクニックを詳しく紹介します。ここでは、手順に従ってサンプルを作成していくことで、プロパティの組み合わせ方や、スタイルを適用するタグの選択方法など、さまざまなCSSの活用方法が身に付くように構成してあります。また、できあがりのソースから、CSSの設定部分だけをコピーして利用することも可能です。
Chapter1 HTML&CSS
HTMLとCSS【なぜCSSを使うの？】
HTML&CSS01 CSSのメリット
1文法に従ってページを作ることができる
2ページの制作効率を上げることができる
3デザインの幅を広げることができる
4ソースをシンプルにまとめることができる
5CSSにこだわる必要のないケース
HTML&CSS02 ページのソースを記述したとき
1HTMLの場合
2CSSの場合
HTML&CSS03 デザインを細かく調節したいとき
1HTMLの場合
2CSSの場合
HTML&CSS04 コンテンツを追加・変更するとき
1HTMLの場合
2CSSの場合
HTML&CSS05 デザインを変更するとき
1HTMLの場合
2CSSの場合
HTML&CSS06 複数ページのデザインを変更するとき
1HTMLの場合
2CSSの場合
HTML&CSS07 画像パーツを追加・変更するとき
1すべて画像で作った場合
2画像と文字で作った場合
Chapter 2 BASIC
CSSを効果的に利用するために
BASIC01 CSSを効果的に利用するためのポイント
1WebページのデザインはCSSで指定する
2ページ制作の流れをおさえておく
3デザインは「ボックス」で考える
BASIC02 ページデザインを考える
1ページのデザイン案を作成する
2素材を用意する
BASIC03 マークアップする箇所を決める
1パーツごとにボックスに分ける
2ボックスに適用するスタイルを考える
3見出しと文章の間隔を調節するには
4両側の余白を調節するには
BASIC04 HTMLタグでマークアップする
1パーツの役割に従ってタグ付けする
2役割を特定できない部分をタグ付けする
BASIC05 CSSの設定
1タグに対してスタイルを指定する
BASIC06 目的に応じたスタイルの適用先の指定
1同じタグに異なるスタイルを適用する場合
2異なるタグに同じスタイルを適用する場合
3クラス名を使いすぎないようにする
BASIC07 スタイルの設定を共有する
1外部CSSファイルの利用
Chapter3 MENU
Webページのパーツ制作：メニュー
MENU01 メニューの基本スタイル
01-A <a>だけでマークアップする場合
01-B <a>と<br>でマークアップする場合
MENU02 カーソルを重ねたときだけ色を変える
MENU03 リンクごとに色を変えるスタイル
03-A ボタン型のメニューで色を変える場合
MENU04 リストマークを入れたスタイル
04-A リストマークをCSSで入れる場合
MENU05 メニューを罫線で区切るスタイル
05-A メニューに見出しを付ける場合
MENU06 ボタン型のメニューを作る
06-A ボタンを立体的にする場合
MENU07 CSSで作るロールオーバーボタン
07-A 画像を入れ替える場合
07-B 画像だけで作るロールオーバーボタン
MENU08 メニューを横に並べるスタイル
08-A 横に並べたメニューを罫線で区切る場合
08-B ボタン型メニューを横に並べる場合
MENU09 リンクの説明を付けたスタイル
09-A ボタン型のメニューに説明を付ける場合（１）
09-B ボタン型のメニューに説明を付ける場合（2）
Chapter4 CONTENTS
Webページのパーツ制作：コンテンツ
CONTENTS01 コンテンツの基本スタイル
01-A コンテンツの左右の余白を調節する
CONTENTS02 見出しの下に罫線を入れるスタイル
02-A 見出しを横に配置した場合
02-B 罫線を画像で入れる場合
CONTENTS03 ボックス型のスタイル
03-A ボックスを画像で作る場合
CONTENTS04 リストスタイル（マークを文字で入れる場合）
04-A リストマークの色を変更する場合
CONTENTS05 リストスタイル（マークを画像で入れる場合）
05-A リストマークの画像を変更する場合
CONTENTS06 段組のスタイル
06-A 段ごとにボックスにする場合
CONTENTS07 インラインフレームを作る
CONTENTS08 コンテンツを中央に揃えて表示する
Chapter5 TITLE
Webページのパーツ制作：タイトル
TITLE01 タイトルの基本スタイル
01-A 中央に配置する場合
TITLE02 罫線でアレンジしたスタイル
TITLE03 タイトルバー型のスタイル
03-A リード文をバーに含まない場合
TITLE04 タイトルバーを画像で作るスタイル
04-A タイトルバーを画面いっぱいに表示する場合
TITLE05 ボックス型のスタイル
05-A 画像の一部を薄くして文字を重ねる場合
05-B 画像を置き換える場合
Chapter6 SUB
Webページのパーツ制作：サブ情報
SUB01 枠で囲んだスタイル
01-A 見出しを枠に重ねる場合
SUB02 画像を利用したスタイル
SUB03 チップ型のスタイル
SUB04 罫線を使ったスタイル
SUB05 キャプションのスタイル
Chapter7 COMBO
ページデザインの管理とコントロール
COMBO01 パーツを組み合わせてページを作る（１）
COMBO02 パーツを組み合わせてページを作る（２）
COMBO03 複数ページでスタイルを共有する（外部CSSの共有）
03-A 複数ページのデザインをまとめて変更する場合
COMBO04 ページごとに異なるデザインがある場合
（外部CSSと内部CSSの併用）
04-A 複数の外部CSSファイルを利用する場合
COMBO05 色を一括変更する（スタイル設定の統合）
05-A ページごとに配色を変える場合
05-B クラス名で色をコントロールする場合
COMBO06 まったく異なるデザインに変更する
06-A CSSを切り替えられるようにする場合
© E BISUCOM TECH LAB. All rights reserved.
