狠狠撸

狠狠撸Share a Scribd company logo

Css

?
?
S
SD Labo

颁厂厂の基本についての説明

1 of 8
Download to read offline
CSS とは？ Cascading Style Sheets CSS はセレクタ ( 何に対して )、プロパティ ( 何を )、値 ( どうする ) という、３つの並びでできています。 （例） CSS h1 に対して、文字の色を、赤にする。 h1 { color: #?0000} セレクタには適応先の要素名、id 名、class 名を記述し、要素に対してスタイルをつけていきます。 もちろん、複数のスタイルを、一つのセレクタに適用させても OK ！ （例） h1 { 由 書き方は自 color: #?0000; セレクタ { プロパティ : 値 ; プロパティ : 値 } font-size: 16px; セレクタ { プロパティ : 値 ; font-weight: bold プロパティ : 値 } } セレクタ { ※複数のスタイルを与える場合は、;（セミコロン）で区切ろう。 　　プロパティ : 値 ; 　　プロパティ : 値 CHECK!! } この記述方法は、Firebug と同じ 記述方法だから、慣れておこう。 Copyright 2011 TANAKA SHINJI. All Rights Reserved.
低 基本セレクタ 要素名をセレクタにし、その要素すべてにスタイルを適用する方法。 優 class セレクタ 先 度 HTML で要素に class 名を付け、その class 名をセレクタにし、同じ class 名を持った複数の要素に対して スタイルを適用する方法。 id セレクタ ※id 名は 1 ページ内で同じ名前を複数与えることはできない。要素が違ってもダメ。 高 HTML で要素に id 名を付け、その id 名をセレクタにし、その要素に対してのみスタイルを適用する方法。 （例） p#idName { p.className { color: #?0000; color: #?0000; id 名や class 名には font-size: 16px; font-size: 16px; ユニーク な名前をつけよう！ font-weight: bold font-weight: bold } } ※id セレクタは要素名 +#id 名と記述するが、要素名は省略が可能！ 　class セレクタは要素名 +.class 名と記述するが、要素名は省略が可能！ Copyright 2011 TANAKA SHINJI. All Rights Reserved.
優先順位 基本は、CSS 上で上に書かれたスタイルよりも下に書かれたスタイルの方が優先されて適応されるが、id のように 固有度が高ければ高いほど優先度があがる。 (例) ３ p{ ３ p#idName { /* 下と同じ p タグで id 名を記述している場合 */ ４ 　　color:#?0000 /* 文字の色を赤にする */ ４ 　　color:#?0000 /* 文字の色を赤にする */ ５ } ５ } ６ ６ ７ p{ ７ p {　/* 上と同じ p タグだが id 名を記述していない場合 */ ８ 　　color:#0000? /* 文字の色を青にする */ ８ 　　color:#0000? /* 文字の色を青にする */ ９ } ９ } ※下に記述した青に上書きされる。 ※id 名のついたセレクタの方が優先度が高いので、赤が適用される。 !important 値の後に !important と記述すると最優先設定とされるので、下の行でいくら変更しようとしても、変更できない。 (例) ３ p{ ４ 　　color:#?0000 !important; /* 文字の色を赤にする */ ５ } ６ ７ p{ ８ 　　color:#0000?; /* 文字の色を青にする */ ９ } ※!important のスタイルが最優先なので、赤が適用される。 Copyright 2011 TANAKA SHINJI. All Rights Reserved.
ブロック要素でボックスを作る！ ボックスとは？ ボックスとは、コンテンツに幅や高さボーダーや余白を与えて作る四角を言います。 margin width??? コンテンツの幅 border padding height??? コンテンツの高さ content 内容） （ padding??? コンテンツから border までの余白 幅 高さ （内側の余白）で、背景が存在する。 width × height border??? ボックスに境界線をつける margin??? コンテンツとコンテンツとの距離を とる余白（外側の余白）で、背景が 存在しない。 よくある ま ち が い 要素の padding に左右の値を入れた場合、width( 幅 )＋padding(right+left) となるので注意。縦も同じく、 height( 高さ )＋padding(top+bottom) となります。 Copyright 2011 TANAKA SHINJI. All Rights Reserved.
font-family フォントの種類を設定する CSS では、font-family プロパティでフォントの選択をすることができます。???がっ！ 適応させたいフォントがユーザーの PC にインストールされていない場合は、代用のフォントが適応されてしまいます。 そこで、font-family の値には、各 OS ごとにデフォルトでインストールされているフォントを指定すると差異がなく よいでしょう。本文は、デフォルトのフォントの方が、シンプルで情報が伝わりやすいです。 Wi n default font ( sa ns- se rif ) ゴシック体 ＭＳ Ｐゴシック Mac default fo nt ( sa ns- se rif ) ゴシック体 日本 PC 海外 PC ヒラギノ角ゴ Pr o W3 　 　 　 　 H ir a g in o Ka k u G o t h i c P r o （ 記述例） font-fam ily: ” ヒラ ギ ノ 角 ゴ P r o W3 ” ,” H ir a g ino K a k u G o t h i c P r o ” , ” MS P ゴ シ ッ ク ” , sa n s- se r if; ■ 値は左から順に読み込んで、なければ右へと移行する。 ■ フォント名に半角スペースが入る場合は (” ) ダブルクォーテーションか (? ) シングルクォーテーションで囲む。 ■ 複数設定する場合は、フォント名を (,) カンマで区切る。 ※どうしても、カスタムフォントを使用したい場合は、画像を用いるしかありません。 ※最近では Win7 や MacOSX などでは? メイリオ? ,Meiryo がデフォルトで使用されていることが多い。 Copyright 2011 TANAKA SHINJI. All Rights Reserved.
カラーコード Web サイト内での色の設定は、カラーコードを用いる。 カラーコードは (#) シャープを頭につけて、16 進数の 0123456789ABCDEF の 6 桁で記述します。 (例) color:#1 2 3 4 5 6 この組み合わせにより、色の種類は 16,581,375 色となる。 R G B CSS の値として一般的にカラーコードが使われますが、red( レッド ) や ivory( アイボリー ) など、色の名前を記述しても OK! ※色の名前で指定する場合は (#) シャープは不要。 R の対の値、G の対の値、B の対の値が同じ (#22?00) のような場合に限り、省略が可能。 (例) color:#2 f 0 このようなカラーコードを Web セーフカラーと言う。 R G B Copyright 2011 TANAKA SHINJI. All Rights Reserved.
継承されるプロパティ CSS で使用されるプロパティ ( 属性 ) には、親要素に設定した値が、継承されるものと、されないものが存在します。 ＨＴＭＬ ＣＳＳ する <body> div { 主に使用 <div> color:#f 00;/* 文字色を赤にする */ 継承されるプロパティ一覧 <h1> 見出し </h1> font-size:14px;/* 文字サイズ */ font-family: <p> 段落 </p> } </div> font-size: </body> color: text-align: 上の HTML では <h1> と <p> が <div> の子要素として存在しています。 font-style: それに対し、CSS で親要素である <div> に対して、文字色を赤にする＆文字サイズを font-weight: 14px にスタイル設定しています。 letter-spacing: ブラウザ line-height: ブラウザで確認をすると、親要素に対 list-style-type: 見出し して付けたスタイルが、子要素に対し list-style-position: ても適応されて表示されます。 段落 これが継承です。 text-indent: ただ、h1 に対して文字サイズ 14px の text-transform: 設定が適応されていません。 ! なぜなら ※継承はブラウザ独自のスタイルが既にある要素には適応されないからです。 Copyright 2011 TANAKA SHINJI. All Rights Reserved.
継承されるプロパティ???つづき 独自のスタイルがついている要素に対しては、直接スタイルを書き換えてあげる必要があります。 継承され、独自スタイルがついているプロパティは、 font-size: ???文字サイズ color: ???文字色 text-align: ???文章の水平方向の位置 font-style: ???文字の斜体 font-weight: ???文字の太さ 独自スタイルを全ブラウザで統一したスタイルに戻してから、自分のスタイルをつけていきましょう。 Default css デフォルト C 検索 SS で検索 font-family はすべての表示コンテンツを括る Body 要素に適応させておけば、ページすべての要素のフォントを統一することが できます。一部フォントを変えたいときは、末端子要素に対して、font-family を設定しましょう。 Copyright 2011 TANAKA SHINJI. All Rights Reserved.

More Related Content

Css

  • 1. CSS とは？ Cascading Style Sheets CSS はセレクタ ( 何に対して )、プロパティ ( 何を )、値 ( どうする ) という、３つの並びでできています。 （例） CSS h1 に対して、文字の色を、赤にする。 h1 { color: #?0000} セレクタには適応先の要素名、id 名、class 名を記述し、要素に対してスタイルをつけていきます。 もちろん、複数のスタイルを、一つのセレクタに適用させても OK ！ （例） h1 { 由 書き方は自 color: #?0000; セレクタ { プロパティ : 値 ; プロパティ : 値 } font-size: 16px; セレクタ { プロパティ : 値 ; font-weight: bold プロパティ : 値 } } セレクタ { ※複数のスタイルを与える場合は、;（セミコロン）で区切ろう。 　　プロパティ : 値 ; 　　プロパティ : 値 CHECK!! } この記述方法は、Firebug と同じ 記述方法だから、慣れておこう。 Copyright 2011 TANAKA SHINJI. All Rights Reserved.
  • 2. 低 基本セレクタ 要素名をセレクタにし、その要素すべてにスタイルを適用する方法。 優 class セレクタ 先 度 HTML で要素に class 名を付け、その class 名をセレクタにし、同じ class 名を持った複数の要素に対して スタイルを適用する方法。 id セレクタ ※id 名は 1 ページ内で同じ名前を複数与えることはできない。要素が違ってもダメ。 高 HTML で要素に id 名を付け、その id 名をセレクタにし、その要素に対してのみスタイルを適用する方法。 （例） p#idName { p.className { color: #?0000; color: #?0000; id 名や class 名には font-size: 16px; font-size: 16px; ユニーク な名前をつけよう！ font-weight: bold font-weight: bold } } ※id セレクタは要素名 +#id 名と記述するが、要素名は省略が可能！ 　class セレクタは要素名 +.class 名と記述するが、要素名は省略が可能！ Copyright 2011 TANAKA SHINJI. All Rights Reserved.
  • 3. 優先順位 基本は、CSS 上で上に書かれたスタイルよりも下に書かれたスタイルの方が優先されて適応されるが、id のように 固有度が高ければ高いほど優先度があがる。 (例) ３ p{ ３ p#idName { /* 下と同じ p タグで id 名を記述している場合 */ ４ 　　color:#?0000 /* 文字の色を赤にする */ ４ 　　color:#?0000 /* 文字の色を赤にする */ ５ } ５ } ６ ６ ７ p{ ７ p {　/* 上と同じ p タグだが id 名を記述していない場合 */ ８ 　　color:#0000? /* 文字の色を青にする */ ８ 　　color:#0000? /* 文字の色を青にする */ ９ } ９ } ※下に記述した青に上書きされる。 ※id 名のついたセレクタの方が優先度が高いので、赤が適用される。 !important 値の後に !important と記述すると最優先設定とされるので、下の行でいくら変更しようとしても、変更できない。 (例) ３ p{ ４ 　　color:#?0000 !important; /* 文字の色を赤にする */ ５ } ６ ７ p{ ８ 　　color:#0000?; /* 文字の色を青にする */ ９ } ※!important のスタイルが最優先なので、赤が適用される。 Copyright 2011 TANAKA SHINJI. All Rights Reserved.
  • 4. ブロック要素でボックスを作る！ ボックスとは？ ボックスとは、コンテンツに幅や高さボーダーや余白を与えて作る四角を言います。 margin width??? コンテンツの幅 border padding height??? コンテンツの高さ content 内容） （ padding??? コンテンツから border までの余白 幅 高さ （内側の余白）で、背景が存在する。 width × height border??? ボックスに境界線をつける margin??? コンテンツとコンテンツとの距離を とる余白（外側の余白）で、背景が 存在しない。 よくある ま ち が い 要素の padding に左右の値を入れた場合、width( 幅 )＋padding(right+left) となるので注意。縦も同じく、 height( 高さ )＋padding(top+bottom) となります。 Copyright 2011 TANAKA SHINJI. All Rights Reserved.
  • 5. font-family フォントの種類を設定する CSS では、font-family プロパティでフォントの選択をすることができます。???がっ！ 適応させたいフォントがユーザーの PC にインストールされていない場合は、代用のフォントが適応されてしまいます。 そこで、font-family の値には、各 OS ごとにデフォルトでインストールされているフォントを指定すると差異がなく よいでしょう。本文は、デフォルトのフォントの方が、シンプルで情報が伝わりやすいです。 Wi n default font ( sa ns- se rif ) ゴシック体 ＭＳ Ｐゴシック Mac default fo nt ( sa ns- se rif ) ゴシック体 日本 PC 海外 PC ヒラギノ角ゴ Pr o W3 　 　 　 　 H ir a g in o Ka k u G o t h i c P r o （ 記述例） font-fam ily: ” ヒラ ギ ノ 角 ゴ P r o W3 ” ,” H ir a g ino K a k u G o t h i c P r o ” , ” MS P ゴ シ ッ ク ” , sa n s- se r if; ■ 値は左から順に読み込んで、なければ右へと移行する。 ■ フォント名に半角スペースが入る場合は (” ) ダブルクォーテーションか (? ) シングルクォーテーションで囲む。 ■ 複数設定する場合は、フォント名を (,) カンマで区切る。 ※どうしても、カスタムフォントを使用したい場合は、画像を用いるしかありません。 ※最近では Win7 や MacOSX などでは? メイリオ? ,Meiryo がデフォルトで使用されていることが多い。 Copyright 2011 TANAKA SHINJI. All Rights Reserved.
  • 6. カラーコード Web サイト内での色の設定は、カラーコードを用いる。 カラーコードは (#) シャープを頭につけて、16 進数の 0123456789ABCDEF の 6 桁で記述します。 (例) color:#1 2 3 4 5 6 この組み合わせにより、色の種類は 16,581,375 色となる。 R G B CSS の値として一般的にカラーコードが使われますが、red( レッド ) や ivory( アイボリー ) など、色の名前を記述しても OK! ※色の名前で指定する場合は (#) シャープは不要。 R の対の値、G の対の値、B の対の値が同じ (#22?00) のような場合に限り、省略が可能。 (例) color:#2 f 0 このようなカラーコードを Web セーフカラーと言う。 R G B Copyright 2011 TANAKA SHINJI. All Rights Reserved.
  • 7. 継承されるプロパティ CSS で使用されるプロパティ ( 属性 ) には、親要素に設定した値が、継承されるものと、されないものが存在します。 ＨＴＭＬ ＣＳＳ する <body> div { 主に使用 <div> color:#f 00;/* 文字色を赤にする */ 継承されるプロパティ一覧 <h1> 見出し </h1> font-size:14px;/* 文字サイズ */ font-family: <p> 段落 </p> } </div> font-size: </body> color: text-align: 上の HTML では <h1> と <p> が <div> の子要素として存在しています。 font-style: それに対し、CSS で親要素である <div> に対して、文字色を赤にする＆文字サイズを font-weight: 14px にスタイル設定しています。 letter-spacing: ブラウザ line-height: ブラウザで確認をすると、親要素に対 list-style-type: 見出し して付けたスタイルが、子要素に対し list-style-position: ても適応されて表示されます。 段落 これが継承です。 text-indent: ただ、h1 に対して文字サイズ 14px の text-transform: 設定が適応されていません。 ! なぜなら ※継承はブラウザ独自のスタイルが既にある要素には適応されないからです。 Copyright 2011 TANAKA SHINJI. All Rights Reserved.
  • 8. 継承されるプロパティ???つづき 独自のスタイルがついている要素に対しては、直接スタイルを書き換えてあげる必要があります。 継承され、独自スタイルがついているプロパティは、 font-size: ???文字サイズ color: ???文字色 text-align: ???文章の水平方向の位置 font-style: ???文字の斜体 font-weight: ???文字の太さ 独自スタイルを全ブラウザで統一したスタイルに戻してから、自分のスタイルをつけていきましょう。 Default css デフォルト C 検索 SS で検索 font-family はすべての表示コンテンツを括る Body 要素に適応させておけば、ページすべての要素のフォントを統一することが できます。一部フォントを変えたいときは、末端子要素に対して、font-family を設定しましょう。 Copyright 2011 TANAKA SHINJI. All Rights Reserved.