Uploaded byTK-LiT
493 views
0614_LiTLeaders_CSS講座
LiTLeadersで使用したCSS講座のスライドです。著作権は、LiT社およびTakumi Kodamaに帰属します。
0614_LiTLeaders_CSS講座
- 1.Life is Tech!CSS講座20130614Ver1.0 しゃつ
- 2.
- 3.例 ) ボタン11,HTML内でボタン1の存在を宣言3, JSでボタン1を押した時の動作をプログラム2, CSSでボタン1の形をデザインする①②③
- 4.
- 5.CSSの記述方法①「どこに」「どんなスタイルを」「どれだけ」Where -> What-> Howのカタチ⌘ キホン概念
- 6.CSSの記述方法②⌘ 書き方の概念where {what: how;}CSS
- 7.CSSの記述例①⌘ 具体例 -<テキスト>p{font-size : 300px;}<p> コンテンツをここに挿入 </p>CSSHTMLwherewhat 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の記述例④⌘ 具体例 -<ボタン>CSSbutton{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.
- 16.
- 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;}CSSborder部分
- 19.
- 20.
- 21.
- 22.CSSの記述例⑦⌘ 書き方例 -<ボタン>margin編button {......margin : 外側余白の距離;}CSS
- 23.CSSの記述例⑪⌘ 書き方例 -<ボタン>margin編<button> ボタン1 </button><button> ボタン2 </button><button> ボタン3 </button>HTMLボタンを量産して間隔を確認してみよう。
- 24.
- 25.
- 26.最終ソース⌘ <ボタン> を例に書き方をおさらいCSSbutton {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.