スタイルシート表現デザイン帖

定価 1,980円
（本体 1,800円＋税10%） ※電子書籍の価格は各販売ストアにてご確認ください｡

紙の本を買う

紙の書籍を購入
- Amazon
- ヨドバシ.com

発売日	：2008-11-18
仕様	：A4変／144P
ISBN	：978-4-8443-6017-9

スタイルシートでレイアウトするための基礎知識から、さまざまなレイアウトのつくり方までをていねいに解説しています。また、CSSデザインのアイデアやよく陥りがちなトラブルを解決するための92の手法なども紹介。CSSでWEBサイトを自由自在にデザインするための知識とアイデアが満載です。「CHAPTER2」と「CHAPTER4」で使用しているサンプルデータは、特設Webサイトからダウンロードできます。本書の内容をより深く理解するためにご活用ください。

→ダウンロードはこちら

スタイルシート表現デザイン帖

CHAPTER1
CSSレイアウトスタイル＆表現事典

session1　スタイルシートレイアウトの基礎知識
session2　Webレイアウトをマスターするテクニック
session3　スタイルシートレイアウトの表現事典
session4　スタイルシートレイアウトカタログ

CSSデザインの参考にしたいWebサイト集1

CHAPTEER2
すぐに使えるCSSデザインテクニック　vol.1

・ナビゲーションのカスタマイズ
・Spryフレームワークを使ってみよう
・Prototype Window Classを使ってみよう
・入力フォームにWYSIWYGエディタ機能を付加しよう
・ビヘイビア機能を利用したスタイル定義の効率化
・プレゼンツールとしての利用
・開閉できるスライドメニュー

CSSデザインの参考にしたいWebサイト集2

CHAPTEER3
CSSのアクシデントを解決する92の手法

［初級］
01　2段組みレイアウトで右のコンテンツが左に流れ込んでしまう!
02　IE 6でfloatした要素の末尾の文字が複製されてしまう!
03　記述に統一性がなく効率の良いコーディングができない!
04　文法は正しいはずなのにスタイルがきちんと反映されない!
05　Netscapeで見るとなぜか背景が表示されない!
06　margin幅がIEだけ倍になってしまう!
07　インライン配置のリストにすき間ができてしまう!
08　IEで入力フィールドのテキストが拡大できない!
09　IEの条件コメントを使った場合にCSSが読み込まれない!
10　指定した覚えのないスタイルが反映されている!
11　横並びにしたメニュー項目が縦に並んでしまった!
12　ウインドウサイズを変更したらレイアウトが崩れた!
13　コンテンツが続いているのにスクロールできない!
14　2段組みレイアウト時に左右の行がきれいにそろわない!
15　Macのブラウザでフォントの指定が効かない!
16　CSSレイアウトで背景や境界線がうまく設定できない!
17　プリントしたらページの右端が切れてしまった!
18　IEで閲覧すると代替テキストが表示されてしまう!
19　テーブルのセル間がどうしても空いてしまう!
20　IE 6を使うと後方互換モードで表示されてしまう!
21　背景画像のタイリングがデザインどおりに再現できない!
22　ボックス幅が文字サイズに連動して変化しない!
23　IE 7のページズームで拡大するとフォームがずれる!
24　floatで配置したブロックが落ちてしまった!
25　Flashコンテンツを配置したら余白ができてしまった!
26　印刷できない部分や要素が存在してしまう!
27　IEでリストに指定した背景画像が表示されない!
28　文字サイズを変更すると画像の表示位置が上下に動いてしまう!
29　IEで表示するとリンクの下線がキレイにそろわない!
30　Safariだけリンク要素の表示が異なってしまう!
31　段落間のborderがなぜか下まで表示されない!
32　リストの見た目がブラウザによって異なってしまう!
33　marginが重なると思うように表示されずに消えてしまう!
34　IEでなぜか最初の文字だけ消えてしまう!
35　横に並べたメニュー部分の表示が崩れてしまう!

column1　アクシデントを回避するための便利ツール・サービス

［中級］
36　IEでtable要素内のfont-sizeが継承しない!
37　Firefoxでセレクトボックス内が隠れてしまう!
38　入れ子ボックスの指定が意図どおりに反映されない!
39　マウスオーバーでリンクテキストの色が変わらない!
40　マーカーとして表示した背景画像の上下が切れる!
41　日本語でコメントを記述すると思いどおりの表示にできない!
42　clearを指定した要素の上に空白ができてしまう!
43　IE 6でfloatしたテキストの端だけ3pxずれてしまう!
44　絶対配置の位置がどうやってもずれてしまう!
45　画像置換したリンクの輪郭線が画面外まで延びてしまう!
46　タイプセレクタに直接背景を適用しても反映されない!
47　h2要素のmargin-topで文字組みの上に余白ができてしまう!
48　font-familyの日本語指定が反映されない!
49　インタラクション効果をうまく施すことができない!
50　セル内の文章が幅を無視してセル幅を広げてしまう!
51　IEで要素がz-indexの順に重ならない!
52　フッターがページ上部に配置されてしまった!
53　topやleftなどのプロパティが効かない!
54　文字サイズを縮小したら背景画像が切れてしまった!
55　外側にはみ出した要素がIE 6では途中で切れてしまう!
56　IE 6とIE 7に指定したハックが反映されない!
57　hr要素の位置や表示がブラウザごとに違う!
58　印刷時にページ下のmarginが詰められてしまう!
59　IE 6以降で一部のスタイルシートが反映されない!
60　上書き指定したスタイルが適用されない!
61　コンテンツに長いURLが含まれるとレイアウトが崩れる!
62　フォームのtextarea部分がIEで見ると広がる!
63　@importを指定してもファイルが読み込まれない!
64　右寄せにしたテキストの背景が文字にかぶってしまった!
65　IE 7で隣接セレクタが適用されない!
66　メニューのリスト画像の位置がそろわない!
67　ソースが複雑で理解できない!
68　絶対配置したボックスの基準が親要素にならない!
69　IEでPNG形式の透過画像が使えない!
70　Firefoxの印刷で2ページ目以降が切れてしまう!

［上級］
71　ナビゲーションがきれいにそろわない!
72　指定したはずのborderと背景が適用されない!
73　フッターの下部にすき間が生じてしまう!
74　a:hoverで背景画像を切り替えるときにIEでちらつく!
75　IE 6で絶対配置した要素が表示されない!
76　positionで配置したボタンの位置がブラウザによって異なる!
77　Operaでa要素内の画像が指のカーソルにならない!
78　ブラウザによって文字サイズが異なる!
79　意図したように余白が設定されない!
80　IE 5.xでコンテンツが中央に寄らない!
81　ボックスを追加したらデザインが崩れてしまった!
82　floatさせた要素が文章の行にそろわない!
83　margin-topを指定したのに間隔が空かない!
84　リストで画像を敷き詰めるとすき間ができる!
85　Safariでフォーム要素の装飾ができない!
86　Firefoxの場合スクロールバーの有無でコンテンツ位置がずれる!
87　入力フィールドとボタンが微妙にずれてしまう!
88　IE 7のページズームで拡大すると背景画像が拡大されない!
89　IEでCSSを使った要素の透明化ができない!
90　positionを使ったらIE 7で表示が崩れた!
91　IEでposition:fixedが反映されない!
92　IEやSafariでCSS無効のページが表示されてしまう

column2　参考にしたい! 最新CSSサイト11

CSSデザインの参考にしたいWebサイト集3

CHAPTEER4
すぐに使えるCSSデザインテクニック　vol.2

・Mac OS XのDock風メニュー
・Movable Type 4.1の新機能を活用する
・CSS＋JavaScriptによるCover Flow風の表現
・並び替えやページ移動を備えたテーブル表現
・noobSlideによるスライド表現
・iPhoneに最適化されたWebコンテンツを作成しよう
・jQueryを利用したコンテンツのカスタマイズ