ＣＳＳ定義におけるプロパティーの並びをどうするかを決めておきます
個人的な好みによる並び順に関するメモです、標準化等の提案をするものではありません
position : relative ;
display : block ;
width : 50% ;
height : 100px ;
margin : 10px ;
border : 0 ;
padding : 10px ;
color : #ffffff ;
background : #000 ;
marginとpaddingは省略せず、上・右・下・左と記述する
CSSセレクタはスタイルを適用する対象を指定するものです、使用例を付けて説明します
（１）border
・border-width … 線の太さ
・border-style … 線の種類
・border-color … 線の色
組み合わせて使います
・border-top … 上のボーダー
・border-right … 右のボーダー
・border-bottom … 下のボーダー
・border-left … 左のボーダー
（２）background
・background-color … 背景色
・background-image … 背景画像
・background-repeat … 背景画像の並べ方
repeatで繰り返し、no-repeatで繰り返しなし、repeat-xで横方向、repeat-yで縦方向
・background-position … 背景画像の表示位置（水平方向、垂直方向の順で指定する）
・background-attachment … 背景画像のスクロール
（３）font
・font-style … イタリック体と斜体の指定（初期値は標準）
・font-variant … スモールキャピタルを指定
・font-weight … フォントの太さ
・font-size … フォントサイズ
・line-height … 行の高さ
・font-family … フォントの種類
（４）padding（CSSでのレイアウト作成を参照）
・padding-top … 上の内側の余白
・padding-right … 右の内側の余白
・padding-bottom … 下の内側の余白
・padding-left … 左の内側の余白
（５）margin（CSSでのレイアウト作成を参照）
・margin-top … 上の外側の余白
・margin-right … 右の外側の余白
・margin-bottom … 下の外側の余白
・margin-left … 左の外側の余白
（６）list-style
・list-style-type … マーカーの種類
・list-style-position … マーカーの表示位置
・list-style-image … マーカーを画像で表示
CSSセレクタはスタイルを適用する対象を指定するものです、使用例を付けて説明します
（１） *（アスタリスク）
全ての要素にスタイルを適用する
* {color:red;}
全ての要素の色に赤色を適用する
p * {color:red;}
p（段落）として指定した要素全てに赤色を適用する
（２） . （ピリオド）
指定したクラス名の要素にスタイルを適用する
.sample {font-size:18px; }color:red;
class=”sample”で指定した要素にサイズと色を適用する
p.sample {font-size:18px; }color:red;
<p class="sample"> にサイズと色を適用するが<div class="sample">には適用されない
（３） # （シャープ）
指定したid名の要素にスタイルを適用する
idの場合は1つの要素にしか適用されない
idの場合はjavascriptやページ間の移動の際によく使われる
#sample {font-size:16px;}
id=”sample”で指定した要素にサイズを適用する
（４） （スペース）
子や孫の要素にスタイルを適用する
セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用する
p strong {font-size:16px;}
pタグの中にあるstrong要素にサイズを適用する
.mago strong {font-size:16px;}
クラス名magoの中にあるstrong要素にサイズを適用する
p.mago strong
クラス名magoのp要素のなかにあるstrong要素にサイズを適用する
（５） > （不等号）
ある要素の直下の階層にある要素にスタイルを適用する
div.sample > a {font-size:18px;}
クラス名sampleの直下にあるa要素（リンク１）にのみサイズを適用する
<div class="sample">
<a href="#">リンク１<a/>
<ul>
<li><a href="#">リンク２<a/></li>
</ul>
<div>
（６） + （プラス）
隣接している要素にスタイルを適用する
h4 + p {color:red; font-weight:bold;}
h4の要素の隣にあるp（段落）のみに適用される
<h4>H4要素</h4>
<p>h4要素の隣です</p> ・・・・・ この要素にだけ赤色と太字を適用する
<p>h4要素の隣の隣です</p>
（７） ~ （～記号）
後ろにある要素にスタイルを適用する
h4 ~ p {color:red; font-weight:bold;}
<p>h4要素の前</p> ・・・・・ この要素には適用されない
<h4>H4要素</h4>
<p>h4要素の後</p> ・・・・・ この要素に赤色と太字を適用する
<p>h4要素の後</p> ・・・・・ この要素に赤色と太字を適用する
class属性とid属性を使い分けて要素を修飾します
・classの使い方
ｈｔｍｌには <p class=“danraku“>見本</p> と記述する
ｃｓｓには .danraku { color: red; } と記述する
・idの使い方
ｈｔｍｌには <p id=”danraku”>見本</p> と記述する
ｃｓｓには #danraku { color: red; } と記述する
上記の例では、単にピリオド記号とシャープ記号を使い分けているだけに見える
そして使用結果も同じ内容でなんら違いが現れてこない
classとidの違いは各々が果たす役割の違いになって現れてくる
・class
同じclass名を、１ページ中に何度でも使える
例えば段落（p）や文字種類(h1、h2）に使用する、何度でもページ中に現れてくる
何度でも現れるということは、サイト全体で文字の大きさなどが統一されることになる
・id
同じid名は、１ページ中に1度しか使えない
例えばheaderやsidebarやfooter等、ブックマーク（page-top）等、ページ中に１度しか現れない
一度しか現れないということは、修正箇所を素早く見つけられることになる
ＨＰの作成時におけるＰＦ１２の便利な使い方について
ブラウザーがＩＥの場合は、「Ｆ１２ 開発者ツール」といったキーワードで検索すればよい
ＩＥ１１になって「根本的に再設計され強化された開発者ツール」になったと述べられています
数ある機能の中で「ＤＯＭ Explorer を使って要素を検査し、レイアウトとスタイルを変更する」部分に着目する
任意のページでＰＦ１２のキーを押下する、直ぐに開発用画面に切り替わります
ブラウザーがGoogle Chromeの場合は、「デベロッパーツール」といったキーワードで検索すればよい
任意のページでＰＦ１２のキーを押下する、直ぐに開発用画面に切り替わります
もしくは、任意のページで「ctlr + Shift + I」を押下する、直ぐに開発用画面に切り替わります
|
|
|
元のページの上に重なって上記のような開発画面が出ればＯＫです
HTML文書を修正しても、CSS文書を修正しても直ぐに元のページに反映されます
こうやって目で即座に確認しながらＨＰ作成に専念できます
ＣＳＳセレクタの種類に依って優先順位が付けられる
詳細度の高いセレクタが優先される
・ＩＤセレクタ（＃）
ＩＤ（1つの要素）にスタイルを適用させる指定
・クラスセレクタ（．）
クラス（分類）に対してスタイルを適用させる指定
・タイプセレクタ（要素型セレクタ）
特定の要素にスタイルを適用させる指定
・全称セレクタ（ユニバーサルセレクタ）
全ての要素にスタイルを適用させる指定
セレクタの優先度が同じ場合
より後の方に記述されたスタイルの指定が優先される
優先順位をＴＯＰにすることができる
【!important】を指定する
(例）p { color: green !important; }
スタイルシートが反映される優先順位に付いて
・固定スタイルシート
<link href=”base.css” rel=”stylesheet” type=”text/css” />>
rel属性の値を「stylesheet」にし、かつtitle属性を指定しない（通常の指定方法）
スタイルシートは、常に適用される
・優先スタイルシート
<link title=”優先スタイル” href=”basic.css” rel=”stylesheet” type=”text/css” />
rel属性の値を「stylesheet」にし、かつtitle属性でスタイル名を指定する
スタイルシートは、「固定スタイルシート」と共に優先的に適用される
・代替スタイルシート
<link title=”代替スタイル” href=”alt.css” rel=”alternate stylesheet” type=”text/css” />
rel属性の値を「alternate stylesheet」にし、かつtitle属性でスタイル名を指定する
通常は適用されない、ブラウザで切替えた際に、「優先スタイルシート」の代わりとして適用される
以下のいずれかの組み合わせで使われる
固定スタイルシート ＋ 優先スタイルシート title指定が無い場合
固定スタイルシート ＋ 代替スタイルシート title指定との組み合わせの場合
複数のＣＳＳファイルを用意して、好みのスタイルシートに切り替える
HTMLのheader部で使用するＣＳＳファイルを指定する
<link rel=”stylesheet” type=”text/css” href=”basic.css” title=”標準”>
<link rel=”alternate stylesheet” type=”text/css” href=”alt1.css” title=”代替1″>
<link rel=”alternate stylesheet” type=”text/css” href=”alt2.css” title=”代替2″>
【alternate】を記述することで外部からＣＳＳファイルを切り替えることが出来る
【title】で名前を記述することで、名前を使って切り替えるＣＳＳファイルを指定できる
ブラウザでの切替方法
ブラウザーの 表示 → スタイル と進み、表示されたtitle名を選択する
|
|
スタイルシートを切替える機能が使えるブラウザー
Internet Explorer８以降、Firefox、Operaなどのブラウザのみ
Google Chrome、Safariなどのブラウザには機能が見当たらない
参考：スタイルシートの優先順位を確認しておくこと
フロートを使った場合の配置ルール
（１）左にフロートされたボックスの左外辺（マージンがある場合はマージンの左辺）が
包含ブロックの左辺より左側にあってはならない
同じ事が右にフロートされたボックスにも当てはまる
つまり包含ブロックからははみ出ないということ
（２）左にフロートされたボックスの後ろに、別の左にフロートさせたボックスがある場合
後ろのボックスは前のボックスの右側に配置されるか、下に配置されなければならない
同じ事が右にフロートされたボックスにも当てはまる
右に空いてるスペースにより、収まりきれれば右側に、収まりきれなければカラム落ちになるということ
（３）左にフロートされたボックスの右外辺（マージンがある場合はマージンの右辺）が
右側にフロートされたボックスの左外辺より右にあってはならない
同じ事が右にフロートされたボックスにも当てはまる
フロートしたボックス同士は重ならないということ
（４）フロートされたボックスの上外辺は
包含ブロックの上辺より上にあってはならない
包含ブロックからははみ出せないということ
（５）フロートされたボックスの上外辺（マージンがある場合はマージンの上辺）は
それ以前の要素が生成したブロックボックス、またはフロートボックスの上外辺より上にあってはならない
２番目にフロートしたボックスが、先にフロートしたボックスの上辺より上にくることはないということ
（６）フロートされたボックスの上外辺（マージンがある場合はマージンの上辺）は
それ以前の要素が生成したボックス内の行ボックスの上辺より上にあってはならない
２カラムレイアウトで考えれば分かりやすい
（７）左にフロートされたボックスの後に、別に左にフロートされたボックスがある場合
後ろのボックスの右外辺が包含ブロックの右辺より右にあってはならない
同じ事が右にフロートされたボックスにも当てはまる
包含ブロックからははみ出すことはできない、幅が入りきらなければ下にレイアウトされるということ
（８）フロートされたボックスは出来る限り上に配置されなければならない
余分な空白はできずに、可能な限り上に配置されるということ
（９）左にフロートされたボックスは、出来る限り左側に配置されなければならない
右にフロートされたボックスは、出来る限り右側に配置されなければならない
後に続くフロートされたボックスよりも、優先的に上方に配置される
カラム落ちするのであれば、後から配置された方が下に、先に配置された方が上に配置されるということ
（１０）フロートされたボックスに clear プロパティーが適用される場合
そのボックスの上辺は
「clear:left」の場合はそれ以前の全ての左にフロートされたボックスの、
「clear:right」の場合はそれ以前の全ての右にフロートされたボックスの
「clear:both」の場合は左右両方にフロートされたボックスの
下外辺よりも下に配置されなければならない
クリア したボックスは、フロートしたボックスよりも下に配置されるということ
ブラウザにはデフォルトスタイルシートというモノがあり、あらかじめスタイルシートが定義されている
通常HTMLで文章を記述すれば、ＣＳＳの指定が無くても適度な間隔や大きさで文章が表示される
便利では有るが、CSSで明確に指定しないので、ブラウザ間の表示の様子に差が出てくる
リセットCSSとは、初期値化したＣＳＳを使用することで、各ブラウザの設定内容を無効化するもの
全ての要素が全てのブラウザで同一のスタイルで統一されて表示される様になる
要素セレクタごとに各々リセット値を記述する
デフォルトで使っていた機能がリセットされ無くなるので、省略していた記述が新たに必要となる
リセットCSSを提案しているサービスは多くある、一番有名なのは【Yahoo! UI Library】である
ノーマライズCSSとは、ブラウザごとのＣＳＳの差を埋めてくれるもの
デフォルトスタイルシートを維持したまま、ブラウザごとの整合性をとってくれているＣＳＳです
各ブラウザの差を埋めるだけの必要最低限の記述で済ましている（機能的に不足した状態である）
そのままリセットCSSとして使用するのは止めた方が良い
各ブラウザ対応する際に参考程度に利用するのが良いと思われる
CSSでは、各要素が生成する四角い領域のことをボックスと呼ぶ
 それぞれの名称 |
marginとpaddingの考え方
全ての要素は二つのブロックから構成された一番内側に入っていると考える
外側のブロックは他の領域との堺を作り出している
内側のブロックは外側のブロックと距離を置くことによって他の領域と離れた位置に置かれる
これがmargin、これによって他の境界線（border）と自らの境界線（border）が重ならなくなる
要素は内側のブロックと距離を置くことによって境界線と離れた位置に置かれる
これがpadding、これによって要素が自らの境界線（border）と重ならなくなる
次に、<div>と<p>とで入れ子になった包含ブロックを考えてみる
 親要素の<div> のパディングの内側に<p>が配置される 斜線の部分を、<div>が作り出した包含ブロック（コンテナブロック）と言う |
次に、ブロックボックスとインラインボックスの違いについて
 ブロックボックスは、独立したかたまりとして、どんどん下にレイアウトされていく |
隣り合うブロックでのマージン相殺について
上下に隣り合っているボックス間では、マージンの相殺が起こります
上のボックスで「margin-bottom: 50px」を指定し、
下のボックスで「margin-top: 30px」を指定した場合
大きい方の値「50px」が採用される
※入れ子になった様な複雑な場合は
互いにborder（境界線）を引くと境界が明確になり相殺が起きなくなる
左右に隣り合っているボックス間では、マージンの相殺は起こらない
