MdNCORPORATION

Webスタイルシート・デザインガイド

Webスタイルシート・デザインガイド

エビスコム
定価 3,080円
(本体 2,800円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2002-06-10
仕様 B5変 230*180/208P
ISBN 978-4-8443-5650-9
本書は、「Webページをレイアウトすること」を目的としたスタイルシートのための教則本です。スタイルシートについて、「論理構造の記述」といったHTMLやCSSからの難解な解説ではなく、「Webページレイアウト」という側面から、CDのサンプルデータを使って、わかりやすく実例をつくりながら実践的に展開します。スタイルシートを使いたいユーザーから、スタイルシートを使いこなしきれていないプロ、セミプロユーザーまで向けにお勧めの一冊です。

目次

スタイルシートは難しくてよくわからない、という方に力強い情報源


本書は、「Webページをレイアウトすること」を目的としたスタイル
シートのための教則本です。スタイルシートについて、「論理構造の
記述」といったHTMLやCSSからの難解な解説ではなく、「Webページレ
イアウト」という側面から、CDのサンプルデータを使って、わかりや
すく実例をつくりながら実践的に展開します。スタイルシートを使い
たいユーザーから、スタイルシートを使いこなしきれていないプロ、
セミプロユーザーまで向けにお勧めの一冊です。

-------------------------<目次>------------------------------
●Introduction
  ・Webページのレイアウト
  ・スタイルシートの基本ルール
  ・文字のスタイルと段落のスタイル
  ・ブラウザの対応
  ・Webページエディタでスタイルシートを使うには
---------------------------------------------------------
●Chapter1 ページのスタイル
---------------------------------------------------------
スタイルシートの定義 <style>
TAGセレクタ TAG
CLASSセレクタ .class

ページの背景 background
ページのマージン margin
ページの文字のスタイル font
リンクのスタイル A:link
A:visited
A:focus
A:active
A:fover

スクロールバー scrollbar
---------------------------------------------------------
●Chapter2 段落のスタイル
---------------------------------------------------------
行送り line-height
行揃え text-align
ジャスティファイの種類 text-justify
ジャスティファイしたときの字間調整 text-autospace
1行目のインデント text-indent
改行方法の設定 word-break
禁則処理 line-break
自動改行の禁止 white-space
強制改行 word-wrap
テキストを入力した通りに表示する white-space

段落の横幅 width
段落の高さ height
テキストが段落内に収まらないときの処理 overflow
overflow-x
overflow-y
text-overflow

グリッドレイアウト layout-grid-type
layout-grid-mode
layout-grid-line
layout-grid-char
縦書き writing-mode
横書きの記述方向 direction
unicode-bidi

コラム 日本語用の段落書式
アラビア語用の段落書式
---------------------------------------------------------
●Chapter3 文字のスタイル
---------------------------------------------------------
文字の種類 font-family
文字のサイズ font-size
文字の太さ font-weight
イタリック体(斜体) font-style
文字の装飾 text-decoration
text-underlineposition
文字の色 color
文字揃え vertical-align
大文字・小文字 font-variant
text-transform
字間スペース letter-spacing
単語間のスペース word-spacing
文字設定のグループ化 font
ルビ ruby-align
ruby-position

フォントの埋め込み @font-face
---------------------------------------------------------
●Chapter4 背景のアレンジ
---------------------------------------------------------
背景色 background-color
背景イメージ background-image
背景イメージの固定 background-attachment
背景イメージのマッピング background-repeat
背景イメージの位置 background-position
background-position-x
background-position-y
背景設定のグループ化 background

段落に背景を設定する
文字に背景を設定する
---------------------------------------------------------
●Chapter5 ボーダーのアレンジ
---------------------------------------------------------
ボーダーの種類 border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
ボーダーの太さ border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
ボーダーの色 border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
ボーダー設定のグループ化 border
border-top
border-right
border-bottom
border-left

段落にボーダーを設定する
文字にボーダーを設定する

コラム: アウトライン outline
outline-style
outline-width
outline-color
---------------------------------------------------------
●Chapter6 余白のアレンジ
---------------------------------------------------------
マージン margin
margin-top
margin-right
margin-bottom
margin-left

パディング padding
padding-top
padding-right
padding-bottom
padding-left

段落の余白を調整する
文字の余白を調整する

コラム:ブラウザによる余白処理の違い
---------------------------------------------------------
●Chapter7 位置と表示のアレンジ
---------------------------------------------------------
位置を指定する position
left
top
right
bottom
重なりの順番 z-index

段落やテーブル内での位置指定(cascading position)

クリッピング clip
文字や段落の表示 visibility
display
文字や段落の種類 display
---------------------------------------------------------
●Chapter8 イメージのレイアウト
---------------------------------------------------------
水平方向の揃える位置 vertical-align
回り込み float
clear
ズーム zoom
カーソルの形状 cursor
イメージのレイアウトアレンジ border
margin
padding
background
---------------------------------------------------------
●Chapter9 リストのスタイル
---------------------------------------------------------
マークの種類 list-style-type
番号の種類 list-style-type
マークのイメージ list-style-image
マークの位置 list-style-position
リスト設定のグループ化 list-style

テキストやイメージの自動挿入 content
:before
:after

コラム:自動ナンバリング
---------------------------------------------------------
●Chapter10 テーブルのスタイル
---------------------------------------------------------
セルの横幅 width
セルの高さ height
セル内の要素の横方向の位置 text-align
セル内の要素の縦方向の位置 vertical-align

テーブルの背景 background
テーブルのボーダー border
空セルのボーダー処理 empty-cells
セルの間隔 border-spacing
セル内の余白 margin

セル内のテキストのスタイルを設定する

テーブルのサイズを固定する table-layout
キャプションの表示位置 caption-side
---------------------------------------------------------
●Chapter11 フォームのスタイル
---------------------------------------------------------
フォームのレイアウトアレンジ border
background
テキストボックスのスクロールバー scrollbar

入力モードの設定 ime-mode
---------------------------------------------------------
●Chapter12 スタイルシートの応用
---------------------------------------------------------
複数のページでスタイルシートを共用する
画面用と印刷用のスタイルシートを使い分ける
セレクタの種類

●APPENDIX
単位リスト
Webセーフカラーリスト
カラーネームリスト
ユーザーシステムカラーリスト

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊