LiTLeadersで使用したCSS講座のスライドです。 著作権は、LiT社およびTakumi Kodamaに帰属します。

1. Life is Tech!
CSS講座
20130614 Ver1.0 しゃつ

2. 3大ファイルの役割
HTML(.htmlファイル)
-アプリ全体の部品を示す設計図
CSS(.cssファイル)
-アプリのデザインを細かく指定できる
JavaScript(.jsファイル)
-アプリの動作をプログラミング

3. 例 ) ボタン1
1, HTML内でボタン1の存在を宣言
3, JSでボタン1を押した時の動作をプログラム
2, CSSでボタン1の形をデザインする
①
②
③

4. 今回は① ②のみ
(HTMLとCSSの連携)

5. CSSの記述方法①
「どこに」
「どんなスタイルを」
「どれだけ」
Where -> What -> Howのカタチ
⌘ キホン概念

6. CSSの記述方法②
⌘ 書き方の概念
where {
what : how;
}
CSS

7. CSSの記述例①
⌘ 具体例 -<テキスト>
p {
font-size : 300px;
}
<p> コンテンツをここに挿入 </p>
CSS
HTML
where
what how
“pタグ” の “フォントサイズ” を “300px” に

8. テキストの見た目は
変わりましたか？

9. CSSの記述例②
⌘ 他のCSS例 -<テキスト>
p {
font-size : 300px;
color : 文字の色;
line-height : 行の高さ;
font-style : フォントスタイル;
text-align : テキストの位置;
}
“how” に何が入るかを自分で調べ、見た目を変えてみよう！
CSS

10. ボタンを設置して
見た目を変えてみよう！

11. CSSの記述例③
⌘ 具体例 -<ボタン>
<button> ボタン1 </button>
HTML
何気ないボタンが出現しましたか？
このボタンの見た目を徐々に変えて行こう。

12. CSSの記述例④
⌘ 具体例 -<ボタン>
CSS
button {
width : 200px;
height : 200px;
}
HTMLで指定したタグ
ボタンのサイズを幅200px, 高さ200pxに変更しました

13. ボタンのサイズは
変わりましたか？

14. CSSの記述例⑤
⌘ 他のCSS例 -<ボタン>
button {
width : 200px;
height : 200px;
background-color : ボタン背景の色;
color : フォントの色;
font-size : フォントサイズ;
font-style : フォントスタイル;
}
内部テキストに対して先ほどのプロパティが使える場合も
CSS

15. border(外枠)を
いじってみよう！

16. CSSの記述例⑥
⌘ borderってどの部分？
ボタンの外枠です。ここをいじれます。

17. CSSの記述例⑦
⌘ 書き方例 -<ボタン> border編
button {
...
border : 外枠の太さ 種類 色;
border-radius : 円の半径;
}
CSS
一度に3つ指定できる
さて何が起こる？

18. CSSの記述例⑧
⌘ 具体例 -<ボタン> border編
button {
width : 200px;
height : 200px;
background-color : orange;
color : red;
font-size : 200%;
font-style : oblique;
border : 30px solid red;
border-radius : 50px;
}
CSS
border部分

19. border-radiusの謎
200px
200px
半径50pxの円

20. ボタン周りの余白を
設定しよう！

21. CSSの記述例⑨
⌘ 外側余白ってどの部分？
外側余白によって他のオブジェクトと距離を保てる

22. CSSの記述例⑦
⌘ 書き方例 -<ボタン> margin編
button {
...
...
margin : 外側余白の距離;
}
CSS

23. CSSの記述例⑪
⌘ 書き方例 -<ボタン> margin編
<button> ボタン1 </button>
<button> ボタン2 </button>
<button> ボタン3 </button>
HTML
ボタンを量産して間隔を確認してみよう。

24. CSSについておおよそ
分かりましたか？

25. ∼ おさらい ∼

26. 最終ソース
⌘ <ボタン> を例に書き方をおさらい
CSS button {
width : 200px;
height : 200px;
background-color : orange;
color : red;
font-size : 200%;
font-style : oblique;
border : 30px solid red;
border-radius : 50px;
margin : 50px;
}
？
？
？？

27. 発展編！

28. <参考1>クラスセレクタ
HTML
<p class=”main”> 内容① </p>
<p class=”main”> 内容② </p>
<p> 内容③ </p>
⌘ 特定の同名タグにだけ変化を与えたい場合…
CSS
. main {
color : red;
}
class は .(ドット)に変わる

29. <参考2>idセレクタ
HTML
<div id=”box”> 内容① </div>
<div id=”all”> 内容② </div>
⌘ 同名タグにそれぞれ異なる変化を与えたい場合…
CSS
# box {
color : orange;
}
id は #に変わる
# all {
color : red;
}

30. ありがとうございました。