Rootage.inc

CSS について

スライド製作課題

Rootage.incCSS について

自己紹介

2

Rootage.incCSS について

自己紹介

　名前：　　坂本章

入社歴：　４ヶ月

　趣味：　　車いじり、音楽　

3

Rootage.incCSS について

初めに

4

Rootage.incCSS について

初めになぜ僕が CSS を勉強したかというと、研修の時にサイトを自分たちで作った時になんか地味でかっこ悪いなと思い、なにかもっと派手に出来ないかなぁと考えたのがきっかけです。

引用元： http://eternalwave.jugem.jp/?eid=430 5

Rootage.incCSS について

agenda

6

Rootage.incCSS について

agenda　 1 ： CSS とは　 2 ：画面の比較　 3 ： 文字の大きさを変える　 4 ：フォントを変える　 5 ： 配置を変える　 6 ： 文字の色を変える　 7 ： デモ 引用元： http://dime.jp/genre/124343/4/

7

Rootage.incCSS について

1 ： CSS とは

8

Rootage.incCSS について

1 ： CSS とは

皆さんは CSS とはなにか知っていますか？

9

Rootage.incCSS について

1 ： CSS とは

スタイルシートっていうやつ・・・

デザインで使うやつ・・・

引用元： http://nlab.itmedia.co.jp/nl/articles/1410/17/news126.html 10

Rootage.incCSS について

　正解です！

もっと詳しく言うと・・・

引用元： http://www.goodsmile.info/ja/product/5080/figma+%E8%80%83%E3%81%88%E3%82%8B%E4%BA%BA+%E7%9F%B3%E8%86%8Fver.html

11

Rootage.incCSS について

1 ： CSS とはWeb ページのレイアウトを定義する規格。CSS を使うと、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を複数のレイアウトから選択することができるようになる。

引用元： http://www.goodsmile.info/ja/product/4685/figma+%E8%80%83%E3%81%88%E3%82%8B%E4%BA%BA.html

12

Rootage.incCSS について

2 ：画面の比較

13

Rootage.incCSS について

2 ：画面の比較

それでは、 CSS を使った画面と

使わなかった画面を比較してみてみましょう。

14

CSS について Rootage.inc

15

http://free-illustrations.gatag.net/2013/09/19/180000.html

Rootage.incCSS について

これが・・・

16

CSS について Rootage.inc

17

http://free-illustrations.gatag.net/2013/09/19/180000.html

Rootage.incCSS について

こうなります！引用元： http://www.goodsmile.info/ja/product/5080/figma+%E8%80%83%E3%81%88%E3%82%8B%E4%BA%BA+%E7%9F%B3%E8%86%8Fver.html

18

Rootage.incCSS について

3 ： 文字の大きさを変える

19

Rootage.incCSS について

文字の大きさを変える

構文

　　　 font-size: 値 ;

値

長さpx 　・　 small 　・　 large 　等 20

CSS について Rootage.inc

21

http://free-illustrations.gatag.net/2013/09/19/180000.html

small

CSS について Rootage.inc

22

http://free-illustrations.gatag.net/2013/09/19/180000.html

large

CSS について Rootage.inc

23

http://free-illustrations.gatag.net/2013/09/19/180000.html

70 ｐｘ

Rootage.incCSS について

4 ： フォントを変える

24

Rootage.incCSS について

フォントを変える

構文

　 font-family: 値 ;

値

sans-serif 　・　 fantasy 　・　 cursive 　等 25

Rootage.incCSS について

フォントを変える

構文

　 font-family: sans-serif;

26

Rootage.incCSS について

フォントを変える

構文

　 font-family: fantasy;

27

Rootage.incCSS について

フォントを変える

構文

　 font-family: cursive;

28

Rootage.incCSS について

5 ：配置を変える

29

Rootage.incCSS について

配置を変える

構文

　　　 text-align: 値 ;

値

left 　・ center 　・ right 　等30

CSS について Rootage.inc

31

http://free-illustrations.gatag.net/2013/09/19/180000.html

left

CSS について Rootage.inc

32

http://free-illustrations.gatag.net/2013/09/19/180000.html

center

CSS について Rootage.inc

33

http://free-illustrations.gatag.net/2013/09/19/180000.html

right

Rootage.incCSS について

6 ： 文字の色を変える

34

Rootage.incCSS について

文字の色を変える

構文

　　　 color: 値 ;

値

色名　・　カラーコード35

Rootage.incCSS について

文字の色を変える

構文

　　　 color: red;

赤になります

36

Rootage.incCSS について

文字の色を変える

構文

　　　 color: 0000FF;

青になります

37

Rootage.incCSS について

6 ： デモ

38

Rootage.incCSS について

僕が作った画面をお見せします

39

Rootage.incCSS について

　　　　　 まとめ

40

Rootage.incCSS について

まとめCSS は奥がとても深くここで書ききれない量があり、 組み合わせ次第で自分らしさを表現できます 。ここで紹介したものは基本のほんの一部です。もし興味があったらいろいろ調べてみてください。

引用元： http://dime.jp/genre/124343/4/

41

Rootage.incCSS について

参考サイト

・ http://www.tagindex.com/stylesheet/properties/

・ http://unitopi.com/font-family-css/

・ http://www.netyasun.com/home/color.html

42

Rootage.incCSS について

END

43

ご清聴ありがとうございました