スタイルシート（CSS）

◎ 余白の設定：padding（パディング） & margin（マージン）

余白を設定するスタイルシート（CSS）として、「padding」と「margin」があります。

padding （パディング） サンプル padding:10px

■ padding（パディング）について 「padding」は、コンテンツの内側の余白を設定するCSSです。 ・数値＋単位で指定 ：（em, ex, pt, px）など ・数値＋％で指定 ：ひとつ外側のボックスに対する割合 　※マージンと異なりマイナス指定はできない

margin （マージン） サンプル margin:10px

■ margin（マージン）について 「margin」は、コンテンツの外側の余白を設定するCSSです。 ・数値＋単位で指定 ：（em, ex, pt, px）など ・数値＋％で指定 ：ひとつ外側のボックスに対する割合 ・auto ：自動調整 　※マイナス指定可能

　※余白を利用することで、任意の位置にコンテンツを配置させることができます。

上部スペース（50px） 下部スペース（20px） 左側スペース（100px） margin:50px 0px 20px 100px;

◎HTML+スタイルシート Webデザインブック

HTML+スタイルシート Webデザインブック スタジオ イースペース (2006/04) ソーテック社　　価格： ￥ 2,604 (税込み) この商品の詳細を見る ■内容紹介 CSSによる段組レイアウト、ナビゲーション、ポータルサイトなどサイトデザイン制作を例にHTML+CSSコーディングを完全解説!XHTML+CSSで最新Webサイト制作のワークフローを完全再現!Webサイト制作のプロフェッショナルが解説したデザイナー・コーダー必携の一冊

■出版社 / 著者からの内容紹介
Web標準に準拠しながら、デザイナーが意図した自由なレイアウトのWebサイトを構築できるのか?　この問いに答えを出したのが本書です。クロスブラウザ、アクセシビリティ、SEOを念頭におき、デザイナーが作成したレイアウトをコーディングしていくという手法で、企業サイト、フォトライブラリサイト、ポータルサイト、オンラインショップなど代表的なレイアウトを構築しています。

本書で解説しているサイトのソースは、弊社Webサイトよりダウンロード可能です。収録されているCSSソースは、可能な限り本書での解説の順番に沿って記述しており、また、この順番が実際の現場でのコーディングの流れにもなるので、より実践的なHTML+CSSを学習することができます。

◎「XHTMLマークアップ&スタイルシート」デザインガイドブック

「XHTMLマークアップ&スタイルシート」リフォームデザインガイドブック―「Web標準」を学びたいWebデザイナーのための指南書 境 祐司 (2005/08) ソシム　　価格： ￥ 1,995 (税込み) この商品の詳細を見る ■内容紹介 見栄えを変えずに再構築する実践的「スタイルシート」を学ぶ書。複雑化してしまったWebデザインを基本から再学習する、スタイルシートの「考え方」や「勉強方法」を身に付けるための事例で構成

■出版社 / 著者からの内容紹介
これからはサイトを増築・改築する「Webリフォーム」の需要が高まってきます。本書では見栄えを変えずに再構築する実践的「スタイルシート」を学ぶことができます。変わらないもの「標準規格」と変化していくもの「CSSテクニックやブラウザのバグ対策」を正しく見定めることが大切です。ユーザビリティ、アクセシビリティ、SEOなどの要求で複雑化してしまったWebデザインを基本から再学習しましょう。本書はスタイルシートの「考え方」や「勉強方法」を身に付けるための事例で構成されています。

◎できるホームページスタイルシート入門―Windows対応

できるホームページスタイルシート入門―Windows対応 佐藤 和人、できるシリーズ編集部 他 (2004/12) インプレス　　価格： ￥ 1,659 (税込み) この商品の詳細を見る ■内容紹介 ホームページやブログのデザインが簡単にパワーアップ! 文字や背景、リンクのデザインをはじめ、段組みレイアウト、枠線の活用など、スタイルシートの使い方を基礎から解説 　○関連本：ホームページHTML入門 Windows対応

■出版社 / 著者からの内容紹介
ホームページやブログのデザインをスタイルシートで簡単にパワーアップ!文字や背景のデザイン、段組みレイアウトなど、ウェブデザインの基礎から応用まで、すぐに身につく!サンプルはダウンロードできるから、はじめてでも安心。

◎スタイルシートサンプルブック

スタイルシートサンプルブック 大藤 幹 (2004/08) ソシム　　価格： ￥ 1,995 (税込み) この商品の詳細を見る ■内容紹介 今、実践でCSSを活用するために必要な情報がこの一冊に!最新CSSテクニック&ブラウザに対応!段組みだけでも19パターン!豊富なサンプルを収録!びっくりするような裏ワザも紹介

■出版社 / 著者からの内容紹介
色と背景、テキストなど、CSS2仕様書の中から、実際の制作で使用可能なものを中心に厳選。その解説と実践的なサンプルを掲載したスタイルシートの解説書。02年刊「そのまま使えるスタイルシートサンプル集」の改題改訂。

◎HTML&スタイルシート レイアウトブック

HTML&スタイルシート レイアウトブック 外間 かおり (2005/04) ソーテック社　　価格： ￥ 2,499 (税込み) この商品の詳細を見る ■内容紹介 フレームもテーブルも使わないレイアウトでSEO対策は万全!ブログやCMSのレイアウトにも役立つノウハウが満載です。最新のWebページレイアウトはここにある。Internet Explorer、Firefox、Safariなど主要ブラウザに対応。2段組・3段組等40パターンを掲載

■出版社 / 著者からの内容紹介
フレームやテーブルを多用したWebページはもう古い!デザイン・更新がしやすく、SE0やアクセシビリティの向上にも有益な、CSSを使ったWebページの作り方を解説した決定本です!
本書は、CSSだけでHTMLをデザインする方法を解説した書籍です。よくある二段組や三段組など計40パターンのデザイン例を掲載し、実際にそこで使われているCSSについて解説しているので、わかりやすさが抜群です。もちろん、本書で使用しているサンプルファイルはダウンロードが可能。実際に作成・修正したりしながら結果を確認してみることで、理解度がグンとアップします。

これからホームページを作成する方はもちろん、サイトのリニューアルをお考えの方にも最適。最新かつ標準のホームページレイアウトのノウハウがここにあります!

◎速習Webテクニック スタイルシート 上級レイアウト

速習Webテクニック スタイルシート 上級レイアウト 河内 正紀 (2006/03/29) 技術評論社　　価格： ￥ 2,919 (税込み) この商品の詳細を見る ■内容紹介 本書は、正しい文書構造で記述したXHTMLに対して、どのようにCSSを適用することで意図したレイアウトを実現していけば良いのかを、筆者自身の経験で直面したつまづきやすい問題に触れつつ、多くの事例にとって広く有効だと考えられるレイアウト方法を示しています

■出版社 / 著者からの内容紹介
Webページのデザインを支配するCSS（スタイルシート）。段組の仕方から始まり、各種ブラウザで同一に表示させるためのテクニック、ナビゲーション等のパーツ別レイアウト、Webサイトを構築する際のワークフロー、blogや企業サイトなどのサイト別レイアウト、実際のWebサイトに見る先進的なデザインなどを解説します。
　スタイルシートのソースコードを長々と羅列せずに、できるだけ小分けにして文章で解説することにより、読みながら理解できるよう配慮しました。

◎プロとして恥ずかしくないスタイルシートの大原則

プロとして恥ずかしくないスタイルシートの大原則 (2006/01) MdN　　価格： ￥ 1,890 (税込み) この商品の詳細を見る ■内容紹介 CSSの基礎知識から文字装飾、ページデザインの基本と実践までわかりやすく図解。さらにXHTMLやJavaScriptの基本と応用など、Web作成のノウハウをマスターできる一冊

■出版社 / 著者からの内容紹介
Webデザイナーなら覚えておきたいスタイルシートをこれ1冊で総復習
XHTML＋CSSベースでWebページを作成するために必要な基本的な知識から実例までを1冊にまとめたWebデザイナー向けの解説本です。これからのWebページ作成は、XHTML＋CSSがスタンダードとなってくることはまちがいありません。一見難しそうな印象を受けてしまうCSSですが、正しいルールに基づいて作成すれば簡単に理解できるはず。本書ではCSSを中心に、基本的な使い方や役立つTipsを解説。また、CSSの対となるXHTMLや、Webページを1ランクアップするJavaScriptについての基本的な解説や実践も掲載しています。読んで理解するだけでなく、実際に応用できるプロ必携の1冊です。

背景画像を固定する方法〜スタイルシート（css）

背景画像を上部のみに固定表示する方法　（css ソース ）

BODY {
background-image : url("背景画像へのパス");
background-repeat : repeat-x;
}

背景画像を左端のみに固定表示する方法　（css ソース ）

BODY {
background-image : url("背景画像へのパス");
background-repeat : repeat-y;
}

背景画像を自由な位置に固定表示する方法　（css ソース ）

BODY {
background: #fff url("背景画像へのパス") no-repeat fixed 90% 55%;
}
「90%」が、横方向の位置で、 「55%」が、縦方向の位置です。

● JAVAスクリプト〜サンプル置き場
● 無料ブログ（blog）テンプレート カスタマイズ方法
　※ スタイルシート（CSS）

通常のHTMLタグでは表示しにくいものをスタイルシートを用いて表現します。

◆スタイルシート（CSS）の指定方法
スタイルシートには、「インライン要素」（前後で改行されない）と、「ブロック要素」（前後で改行される）があります。

　※代表的なタグ　<SPAN> <DIV>

◆全ページのタグにスタイルを指定するには
全ページのタグにスタイルを指定するには、<HEAD>〜</HEAD>の間に以下のように表記します。

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
P { color:red; } //　<P>で囲まれた中の文字は赤色に指定するという意味です。
-->
</STYLE>
</HEAD>

◆エレメントの属性を一度に指定する
セミコロン（ ; ）で区切って、エレメントに対して複数の属性値を指定することができます。最後の属性値のセミコロンは省略可能
　※記載例；　H3 {color : red ; background : yellow ; font-weight : bold}

◆クラス指定をする
タグ名に関係なくクラス名を指定することでスタイルを指定する事ができます。
　※記載例；
.size30 { width : 30%; color : #008800; background-color : #ccffff; border : 1px solid #5555AA }

<H1 class="size30">これはsize30クラスです。</H1>
<P class="size30">これもsize30クラスです。</P>

◆定義済みクラスの指定をする
A要素とP要素にはいくつかの定義済みクラスを指定することができます。定義済みクラスはピリオド( . )ではなくコロン( : )で指定します。

A:link { color:green; }　　　　/* 通常のリンクの状態 */
A:visited { color:blue; }　　　/* 読み込み済みリンクの状態 */
A:active { color:pink; }　　　/* クリックされた瞬間のリンクの状態 */
A:hover { color:red; }　　　　/* マウスをその上に乗せた時のスタイル IEのみ */
P:first-line { color:red; }　　/* 最初の1行を赤い字に指定する */
P:first-letter { font-size:20px; }　　/* 最初の1文字を20pxに指定する */
/* first-lineと、first-letterは、IE3.0, NN4.0では正常に表示されません */

◆スタイルシートを外部ファイルで定義する
スタイルシートの定義部分を外部ファイルとして読み込む事ができます。

<HEAD>
<TITLE>Style Sheet Test</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://www.css.com/style.css">
</HEAD>