CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSでは セレクタ プロパティ 値 の3つを組み合わせてスタイルを設定する 3. セレクタ は <p>,<h1>,<a> や <img> 要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の { 内に プロパティ と 値 を記述する プロパティ と 値 の間には : で区切る 5. プロパティ は 色 長さ 大きさといったスタイルの種類で 値 はプロパティの実際の色や長さの値である 6. セレクタ { プロパティ : 値 ; 例 ) h1 {color: blue;
7. h1 { color: blue; 8. 記述例はセレクタ (h1 要素 ) の文字色 (color) をcss で青 (blue) に指定している こうすることにより HTM L ファイル内のすべての h1 要素 (<h1>) の色が青に変わる 9. 値の後ろに ; を付けているが プロパティが1つだけの場合はなくても構わない 10. 半角スペースやタブを入れたり改行するのは ソースを見やすくするためであって ソース自体の意味にス自体の意味に変化はない 11. CSS では 1 つの セレクタ に対して複数の プロパティ を定義することができる 複数の プロパティ を定義するには スタイルの設定の間を : で区切る
12. 要素名 { プロパティ : 値 ; プロパティ : 値 ; 13.h1 { color: blue; font size: 30px; 14. 記述例では <h1>~</h1> の文字列を青に サイズを 30 ピクセルにしている 15. セレクタのグループ化 CSSは複数のセレクタ名を, で区切り 複数の要素に一度に同じスタイルを指定することができる
16. 要素名 要素名 { プロパティ : 値 ; 17. h1,h2 { color: blue; 18. コメントをつける /* と */ の間にコメント記述することができる また 一時的にスタイルの指定を無効したい場合にも使用できる 19. body { color: #333333; /* 文字色を濃いグレーにする */ 20. /* h1 { font size: 30px; */ 一時的にスタイルの設定を無効にする
セレクタ の種類 1. 比較的よく使用するセレクタとしては 基本セレクタ クラスセレクタ IDセレクタ 疑似セレクタ 子孫セレクタ などがある 2. 基本セレクタ : 要素名 { プロパティ : 値 ; p { font size: 16px; 3. 基本セレクタは <h> や <p> などのHTML 要素に スタイルを適用させる たとえば pセレクタを設定し スタイルを指定すると HTMLファイル内のすべてのp 要素にスタイルが適用される
クラスセレクタ 1. ある段落のテキストには緑色の指定を それ以外の段落には青色の指定をしたいという場合には クラスセレクタ か ID セレクタ を使う 2. 適用する要素にクラス名を付け 要素名とクラス名の間に. を付ける また 要素名を省略して先頭を. から記述することもできる 3. 要素名. クラス名 { プロパティ : 値 ; ( 省略 ). クラス名 { プロパティ : 値 ; 4. p.blue { color: blue;.red { ed { color: red;
ID セレクタ 1. ページ内のある 1 つの要素だけにスタイルを適用させたい 場合には IDセレクタ を使う 2. 1つのHTML 文書の中で同じ ID を複数の要素に指定できない IDセレクタでの設定は1つの要素を特定するために使う 3. IDセレクタは要素名とID 名の間に # を付ける また 要素名を省略して先頭を # から記述することもできる 4. 要素名 #ID 名 { プロパティ : 値 ; ( 省略 )#ID 名 { プロパティ : 値 ; 5. p#blue { color: blue; #red { color: red;
疑似クラス 1. 疑似クラスは : の後ろにあらかじめ決められた状態を示す予約語を組み合わせて定義する 2. 疑似クラスは リンクを指定するa 要素のリンク状態別の色指定などに使われる A 要素では :link :visited :hover :active の4つの疑似クラスが利用できる 3. 要素名 : 疑似クラス名 { プロパティ : 値 ; a:link { color: red; d リンク部分の未アクセス状態を示す a:visited { color: green; リンク部分のアクセス済み状態を示す a:hover { color: yellow; リンク部分の化ソールを乗せた状態を示す a:active { color: blue; リンク部分のアクセス中の状態を示す
子孫セレクタ 1. 特定の要素の子要素 または子孫の要素にスタイルを適用させる 要素名との間に 半角スペース で区切って設定する 2. たとえば p em とセレクタを設定すると p 要素内のem 要素にだけスタイルが適用され 他のem 要素にはスタイルは適用されない 3. 親要素名子要素または子孫要素名 { プロパティ : 値 ; 4. p em { color: #ff0066;
CSS を HTML ファイルへ組み込む方法 1. 組み込む方法は 以下の3 通りの方法がある る <html> <head> <style> </head> <head>~</head> d 内に <body> </body> 指定する </html> 2. Style 要素を使って 3. Style 属性を使って要素に直接指定する 4. Link 要素で外部のCSSファイルをリンクさせる CSS ファイル HTML 文書 <link> タグ <html> <head> </head> <body> < 要素名 style 属性 > </body> </html>
Style 要素を使って head 内に指定する <html> <head> <title>style 要素を使ったCSS 定義 </title> <style type="text/css"> h1 { color: #66cc66; p { </style> </head> <body> </body> </html> color: o #336666;
Style 属性を使って要素に直接指定する <html> <head> <title>style 要素を使ったCSS 定義 </title> </head> <body> <h1 style= color: #ff6633 > インラインスタイルシート </h1> <p> このように <span style="color: #ff0000">html 要素に直接スタイルを定義 </span> します </p> </body> </html>
Link 要素で外部の css ファイルをリンクさせる ファイル名は style_01.css body { background color: #cff187; color: #333333; h1 { background color: #ff9933; color: #ffffff; padding: 5px; h2 { color: #339966; p { border: dashed 3px #339966; padding: 10px; address { font style: normal; font size: 12px; 以下のように まず css ファイルを作成する ファイル名は style_02.css h1 { color: #666699; p { color: #669933;
外部 css ファイルをリンクさせる <html> <head> <title>css のリンク </title> <link href="style_01.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>cascading Style Sheets</h1> <p> css の基本は セレクタ プロパティ 値 を組み合わせてスタイルを設定します </p> <p> cssのスタイル設定は 同じ要素であれば このように繰り返し使うことができます </p> </body> </html>
<link href= ファイル名.css rel= stylesheet type= text/css /> 1. link 要素を使って外部の css ファイルをリンクさせる方法です 2. link 要素の href 属性を使って css ファイルを指定し その後の記述でスタイルシートの種類がcssであることを指定している る 3. link 要素は空要素なので 半角スペースと要素な / を使ってタグを閉じておく 4. リンクさせる css ファイルには拡張子.css を付ける
body { color: #666666 h1 { font-size: 50px; color: #943434; h2 { font-size: 20px; color: #ff9900; address { font-size: small; Css ファイル作成