Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (18)
Destaque
Destaque (18)
Li tweb2 win
- 1. Webデザインコース②-Win ∼CSSを使ってみよう∼ ©Life is Tech! しゃつ 20130729 Ver1.1 1
- 6. ⁂CSSの書き方①⁂ 1「どこに」... where 2「どんなスタイルを」... what 3「どれだけ」... how ➡Where -> What -> Howのカタチ！ ⌘ CSSのソースは以下のルールで書かれている！ 英語だけど 学校で習ったかな？ 6
- 7. ⁂CSSの書き方②⁂ where { what : how; } CSS ⌘ 実際のソースではこのような作りになっているよ！ 1, どこに？ 2, どんなスタイルを？ 3, どれだけ？ 中カッコで挟む！ 行末セミコロン！ 7
- 8. ⁂CSSの書き方③⁂ では、CSSファイルを編集してみよう！ ➡ /* ここにスタイルを書いてみよう */ の下の5行目に、画像のようにソースを追加！ コツ！[tab]キーを押すと 半角4つ分スペースがあけられるよ 8
- 11. ⁂CSSの書き方⑥⁂ p { font-size : 300px; } <p> CSSを使ってみよう </p> CSS HTML “pタグ” の “フォントサイズ” を “300px” に ⌘ さっきの例は、htmlファイル内の<p>タグを CSSファイルから変更していたんだ！ 1,どこ: <p>タグ 2,どんなスタイル: フォントの大きさ 3,どれだけ: 300ピクセルに指定 11
- 12. ⁂CSSの書き方⑦⁂ ⌘ 試しに、数値を変えてみたり、 他の項目(プロパティ)も追加してみよう！ p { font-size : 200px; color : テキストの色; text-align : テキストの位置; } CSS ピクセルは画像で良く使う単位！ 数字を好きに変えてみよう 文字の色を変えれる！ red, blue, yellow などが使えるよ 文字の位置を変えれる！ left, center, right などが使えるよ 項目のことを 「プロパティ」 とも言うよ 12
- 17. ⁂CSSでおしゃれボタン⁂ ⌘ ボタンタグは、以下のように書くよ！ ★保存➡更新するとどんなボタンが出たかな？ <button> ボタン1 </button> HTML <p>タグの下に いれてみよう 17
- 19. ⁂CSSでおしゃれボタン⁂ ⌘ CSSでサイズを変えるためにプロパティを追加！ CSS button { width : 200px; height : 200px; } どこ: HTMLで設置したbutton ボタンのサイズを幅200px, 高さ200pxに変更！ どれを: 幅と高さ どれだけ: 各200px 19
- 22. button { width : 200px; height : 200px; background-color : ボタン背景の色; color : テキストの色; font-size : テキストのサイズ; } ⁂CSSでおしゃれボタン⁂ ⌘ 同様に、他のプロパティも追加してみよう！ CSS 文字の色を 変更できる！ 文字のサイズを 変更できる！ ボタンの背景色を 変更できる！ 22
- 25. ⌘ borderってどの部分？ ボタン１ ⁂ボタンのborderを設定⁂ ここ、ボタンの ふちだ！ ➡ ボタンの「縁（ふち）」の部分だよ！ CSSではここも編集することができるんだ。 25
- 26. ⌘ ひとまず、以下のプロパティを CSSのbutton内に追加してみよう！ CSS ★ 追加して、保存➡更新！すると何が起こるかな？ 3行を button{ ... }内 に追加だ！ ⁂ボタンのborderを設定⁂ 26
- 28. ⌘ borderのプロパティ3行はこういう仕組みだ！ CSS button { ... border-width : borderの太さ; border-color : borderの色; border-radius : borderの半径; } 外枠の太さ 外枠の色 実は、この3つ目の「border-radius」プロパティが オシャレの秘訣！次で詳しく解説するよ！ ⁂ボタンのborderを設定⁂ 28
- 29. ⌘ 縦横200pxボタンで、border-radius:50pxの場合 ⁂border-radiusの謎⁂ 200px 200px 2, ボタンの四隅が 半径50pxの円と 同じだけカーブする！ ➡ 仕組みは理解できたかな？では練習問題だ！ 1, width: 200px; height: 200px; の正方形の場合で 3, それを四隅に適用する と、角が丸いデザインが 完成する！ 29
- 30. Q. では、縦横200pxボタンのときに border-radius: 100pxにすると？ ⁂border-radiusの謎⁂ A. ボタンの半径 = 円の半径なので 完全な正円になるよ！理解できたかな？ CSS 100px!! w:200px h:200px HTML 30
- 33. button { ... ... margin : 外側余白の距離; } CSS ⁂ボタンの余白を設定⁂ ⌘ 余白のプロパティは以下のように追加できるよ！ 今までと同様、ピクセル (px)で指定できるよ！ ➡ この書き方にも大分慣れてきたかな？ 33
- 35. <button> ボタン1 </button> <button> ボタン2 </button> <button> ボタン3 </button> HTML ⌘ では、htmlに戻ってボタン2, ボタン3を追加！ ⁂ボタンの余白を設定⁂ ➡ 保存、更新すると、どんな変化が出たかな？ 35
- 36. HTML ⌘ ボタン2, 3が離れたところに出てきた！ ⁂ボタンの余白を設定⁂ ➡ ボタンが一定の距離を持って出てきたのは、 さっきCSSで余白を指定したからなんだ！ それぞれ一定の距離を 保っているね！ 36