#5 CSS入門・もろもろ

エンジニア勉強会でCSS入門をしました。

Transcript

1. CSS入門・もろもろ #5 エンジニア勉強会　2015/9/2
2. ほな、いこかー
3. ・ドットインストール ・HTMLクイックリファレンス http://www.htmq.com/csskihon/index.shtml http://dotinstall.com/lessons/basic_css_v3
4. CSS ・CSSの基本 どの要素の { 何を: どのようにする; 何を: どのようにする; 何を: どのようにする; }
5. CSS ・CSSの基本 h1 { color: red; background: #ccc; text-align: center; }
6. CSS ・CSSの基本 h1 { color: red; background: #ccc; text-align: center; } セレクタ
7. CSS ・CSSの基本 h1 { color: red; } セレクタ プロパティ
8. CSS ・CSSの基本 h1 { color: red; } セレクタ プロパティ 値
9. CSS ・CSSの基本 h1 { color: red; } セレクタ プロパティ 値 ・複数のセレクタの指定 h1, p, .t_red { color: red; }
10. CSS ・CSSの基本 h1 { color: red; } セレクタ プロパティ 値 ・複数のセレクタの指定 h1, p, .t_red { color: red; } セレクタはカンマ（,）区切りで 複数指定することもできるでー。
11. CSS ・CSSの基本 h1 { color: red; } ちなみに…
12. CSS ・CSSの基本 h1 { /* color: red; */ } ちなみに… コメントアウトは /* コメント */ で囲うんやで。 気をつけなはれ。 // ↑は使えまへん。
13. 基本的なセレクタ h1 セレクタ ・タイプセレクタ ・IDセレクタ ・classセレクタ ・擬似クラス ・擬似要素
14. 基本的なセレクタ h1 セレクタ ・タイプセレクタ ・IDセレクタ ・classセレクタ ・擬似クラス ・擬似要素 →　h1, p, div, li →　#header →　.test →　◯◯◯:hover →　◯◯◯::after
15. よく使うプロパティ ・margin, padding ・float ・display ・position
16. よく使うプロパティ ・margin, padding
17. よく使うプロパティ ・margin, padding 麻雀の中にパン
18. よく使うプロパティ ・float
19. よく使うプロパティ ・float （浮かせる・浮かぶ）
20. よく使うプロパティ ・display ・インライン要素 ・ブロック要素 ・インライン-ブロック要素
21. よく使うプロパティ ・position
22. よく使うプロパティ ・position 初期値　static
23. よく使うプロパティ ・position 初期値　static そのため、absolute（絶対位置）を使用すると きは、その親要素にrelative（相対位置）を指 定する必要があるんやでー
24. ベンダープレフィックス ブラウザごとに仕様が異なるため、 記述するもの
25. ベンダープレフィックス -ms-　・・・・・・　Internet Explorer -webkit-　・・・・・・　Google Chrome、Safari -moz-　・・・・・・　Firefox -o-　・・・・・・　Opera ブラウザごとに仕様が異なるため、 記述するもの
26. ベンダープレフィックス 主要ブラウザの最新バージョンでは、 かなりの種類のCSS3プロパティがサポートされている
27. ベンダープレフィックス 主要ブラウザの最新バージョンでは、 かなりの種類のCSS3プロパティがサポートされている よく使うプロパティ（border-radius、word-break、opacity、box- shadow、transforms）なんかはほぼいけるで。 http://caniuse.com/
28. StyleDocco Node.jsで作られたスタイルガイドジェネレータ styledocco -n "Style Guide" css/style.css 実行 http://toybox-design.net/?p=640
29. SMACSS　（CSSの設計・目標） ・予測しやすい ・再利用しやすい ・保守しやすい ・拡張しやすい
30. 参考資料 ・CSS設計の教科書 ・フロントエンジニア養成読本 ・新WEBデザインの大原則 ・いろいろなサイト etc
31. おしまい