Microsoft PowerPoint - ＣＳＳ（Cascading Style Sheets）の基本.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - ＣＳＳ（Cascading Style Sheets）の基本.pptx"

いとはかやぬま
7 years ago
Views:

1 CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSではセレクタプロパティ値の3つを組み合わせてスタイルを設定する 3. セレクタは <p>,<h1>,<a> や <img> 要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の { 内にプロパティと値を記述するプロパティと値の間には : で区切る 5. プロパティは色長さ大きさといったスタイルの種類で値はプロパティの実際の色や長さの値である 6. セレクタ { プロパティ : 値 ; 例 ) h1 {color: blue;

2 7. h1 { color: blue; 8. 記述例はセレクタ (h1 要素 ) の文字色 (color) をcss で青 (blue) に指定しているこうすることにより HTM L ファイル内のすべての h1 要素 (<h1>) の色が青に変わる 9. 値の後ろに ; を付けているがプロパティが1つだけの場合はなくても構わない 10. 半角スペースやタブを入れたり改行するのはソースを見やすくするためであってソース自体の意味にス自体の意味に変化はない 11. CSS では 1 つのセレクタに対して複数のプロパティを定義することができる複数のプロパティを定義するにはスタイルの設定の間を : で区切る

3 12. 要素名 { プロパティ : 値 ; プロパティ : 値 ; 13.h1 { color: blue; font size: 30px; 14. 記述例では <h1>~</h1> の文字列を青にサイズを 30 ピクセルにしている 15. セレクタのグループ化 CSSは複数のセレクタ名を, で区切り複数の要素に一度に同じスタイルを指定することができる

4 16. 要素名要素名 { プロパティ : 値 ; 17. h1,h2 { color: blue; 18. コメントをつける /* と */ の間にコメント記述することができるまた一時的にスタイルの指定を無効したい場合にも使用できる 19. body { color: #333333; /* 文字色を濃いグレーにする */ 20. /* h1 { font size: 30px; */ 一時的にスタイルの設定を無効にする

5 セレクタの種類 1. 比較的よく使用するセレクタとしては基本セレクタクラスセレクタ IDセレクタ疑似セレクタ子孫セレクタなどがある 2. 基本セレクタ : 要素名 { プロパティ : 値 ; p { font size: 16px; 3. 基本セレクタは <h> や <p> などのHTML 要素にスタイルを適用させるたとえば pセレクタを設定しスタイルを指定すると HTMLファイル内のすべてのp 要素にスタイルが適用される

6 クラスセレクタ 1. ある段落のテキストには緑色の指定をそれ以外の段落には青色の指定をしたいという場合にはクラスセレクタか ID セレクタを使う 2. 適用する要素にクラス名を付け要素名とクラス名の間に. を付けるまた要素名を省略して先頭を. から記述することもできる 3. 要素名. クラス名 { プロパティ : 値 ; ( 省略 ). クラス名 { プロパティ : 値 ; 4. p.blue { color: blue;.red { ed { color: red;

7 ID セレクタ 1. ページ内のある 1 つの要素だけにスタイルを適用させたい場合には IDセレクタを使う 2. 1つのHTML 文書の中で同じ ID を複数の要素に指定できない IDセレクタでの設定は1つの要素を特定するために使う 3. IDセレクタは要素名とID 名の間に # を付けるまた要素名を省略して先頭を # から記述することもできる 4. 要素名 #ID 名 { プロパティ : 値 ; ( 省略 )#ID 名 { プロパティ : 値 ; 5. p#blue { color: blue; #red { color: red;

8 疑似クラス 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; リンク部分のアクセス中の状態を示す

9 子孫セレクタ 1. 特定の要素の子要素または子孫の要素にスタイルを適用させる要素名との間に半角スペースで区切って設定する 2. たとえば p em とセレクタを設定すると p 要素内のem 要素にだけスタイルが適用され他のem 要素にはスタイルは適用されない 3. 親要素名子要素または子孫要素名 { プロパティ : 値 ; 4. p em { color: #ff0066;

10 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>

11 Style 要素を使って head 内に指定する <html> <head> <title>style 要素を使ったCSS 定義 </title> <style type="text/css"> h1 { color: #66cc66; p { </style> </head> <body> </body> </html> color: o #336666;

12 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.

#333333; h1 { background color: #ff9933;

#339966; p { border: dashed 3px #339966;

13 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;

14 外部 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>

15 <link href= ファイル名.css rel= stylesheet type= text/css /> 1. link 要素を使って外部の css ファイルをリンクさせる方法です 2. link 要素の href 属性を使って css ファイルを指定しその後の記述でスタイルシートの種類がcssであることを指定しているる 3. link 要素は空要素なので半角スペースと要素な / を使ってタグを閉じておく 4. リンクさせる css ファイルには拡張子.css を付ける

16 body { color: # h1 { font-size: 50px; color: #943434; h2 { font-size: 20px; color: #ff9900; address { font-size: small; Css ファイル作成

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ薗田海樹 The. H.30 情報研究会 1

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ薗田海樹 The. H.30 情報研究会 1 合宿事前講座 Web 開発の基本編その 2 情報研究会モブ薗田海樹 2018 6.12 The. 1 前回の復習 n ブラウザって何? n Web サイトのキホンを作ってみよう 2 ブラウザとは?HTML とは?? n ブラウザとは? WEB ページを閲覧するためのソフトウェア p HTML というブラウザに言語を表示する言語によって表示されている n HTML とは? p Hyper Text