Tweet
Tweet

Slide 1

Slide 1 text

CSS ド入門ハンズオン のなか

Slide 2

Slide 2 text

そろそろ飽きたよね?

Slide 3

Slide 3 text

CSSを使うと装飾できる!

Slide 4

Slide 4 text

嬉しい!

Slide 5

Slide 5 text

対象者 • CSSマジでやったことないひと • それ以外の人には何の役にも立ちません
 好きなYouTuberの動画でもみて時間潰しててください

Slide 6

Slide 6 text

CSSの適用方法 1. タグを用いる方法 2. style属性を用いる方法 3. <link>タグを用いる方法 今日は触れないので自分でググってね

Slide 7

Slide 7 text

CSSの基本文法 セレクタ { プロパティ: 値; } •セレクタ
 どの要素に対して適用するか •プロパティ
 何を変化させるか •値
 どうするか

Slide 8

Slide 8 text

CSSの基本文法 body { background-color: gray; } •セレクタ
 bodyの •プロパティ
 background-color(背景色)を •値
 gray(グレー)にする

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

やってみよう

Slide 11

Slide 11 text

https://bit.ly/2KDiuGQ

Slide 12

Slide 12 text

https://bit.ly/2KDiuGQ

Slide 13

Slide 13 text

Task1 背景色を変える • 背景はbackground-colorプロパティを用いて変更できる • 値には色を指定する https://bit.ly/2KDiuGQ

Slide 14

Slide 14 text

Task2 文字色を変える • 文字色はcolorプロパティを用いて変更できる • 値には色を指定する https://bit.ly/2KDiuGQ

Slide 15

Slide 15 text

Task3 スタイルを上書きする • スタイルは上から順番に読み込まれる • 同じプロパティを変えると上書きされる • 白は「#FFFFFF」でもいいし「white」とも指定できる https://bit.ly/2KDiuGQ

Slide 16

Slide 16 text

Task4 枠線をつける • (と、言いつつ今回は枠線の指定はしておきました) • 適切なセレクタを指定してください • クラスを指定したいときは「.クラス名」と指定する https://bit.ly/2KDiuGQ

Slide 17

Slide 17 text

Task5 余白を調整する • 余白はmarginというプロパティを使うと変更できる • 下側だけ変えたいときにはmargin-bottomというプロパティも
 使える https://bit.ly/2KDiuGQ

Slide 18

Slide 18 text

Task6 画像の表示サイズを変える • 画像などの要素のサイズはwidthとheightを使うことで変更できる • 値には数字と単位を指定する(e.g. 300px) https://bit.ly/2KDiuGQ

Slide 19

Slide 19 text

Ϋι΄Ͳηϯε͕Ͷ͐

Slide 20

Slide 20 text

おわりに • 基本はセレクタを指定してそれに対するプロパティと値の組合せを 書いていく事で装飾していく • 使いこなすとアニメーションなどもCSSだけで実装する事ができる • 今日の答えは以下
 https://bit.ly/2KRBX2F