第3回東放学園2012後期 cssの基礎
- 2. 代表曲ページをつくる トップページと代表曲ページをリンクさせる Friday, October 12, 12
- 3. CSSの書き方(入門編) カスケーディングスタイルシート（CSS) Friday, October 12, 12
- 4. CSSとは Cascading Style Sheetsの略 Webページのスタイルをつくるための言語 例：h1 { font-size: 15px } HTMLは文書に意味を、CSSは文書にデザインを Friday, October 12, 12
- 5. 例えば Friday, October 12, 12
- 6. CSSの使用例 例えば以下のようなHTMLページを index.html lion.html elephant.html ZOOROPPA ZOOROPPA ZOOROPPA ライオン ぞう Welcome to ZOOROPPA ZOOROPPA とは □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ ライオンの習性 ぞうの習性 □□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ 動物 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ ・トップ ・トップ □□□□□□□□□□□□□□□□□□□□□ ・ぞう ・ライオン ・ライオン ・ぞう Friday, October 12, 12
- 7. CSSの使用例 赤に変更する index.html lion.html elephant.html ZOOROPPA ZOOROPPA ZOOROPPA ライオン ぞう Welcome to ZOOROPPA ZOOROPPA とは □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ ライオンの習性 ぞうの習性 □□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ 動物 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ ・トップ ・トップ □□□□□□□□□□□□□□□□□□□□□ ・ぞう ・ライオン ・ライオン ・ぞう h1タグの部分が赤に style.css なった h1 { h1 { color:#ff0000; color:#ff0000; } } Friday, October 12, 12
- 8. CSSの使用例 背景色も変えられる 背景の色が変わった index.html lion.html elephant.html ZOOROPPA ZOOROPPA ZOOROPPA ライオン ぞう Welcome to ZOOROPPA ZOOROPPA とは □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ ライオンの習性 ぞうの習性 □□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ 動物 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ ・トップ ・トップ □□□□□□□□□□□□□□□□□□□□□ ・ぞう ・ライオン ・ライオン ・ぞう h1タグの部分が赤に style.css なった h1 { h1 { color:#ff0000; color:#ff0000; } body { } } background:#9999ff; Friday, October 12, 12
- 9. CSSの書き方 実際にやってみて覚えましょう Friday, October 12, 12
- 10. 準備 Friday, October 12, 12
- 11. CSSを作成し保存する 新規にファイルを作成し、style.cssという名前 でhtmlと同じフォルダに保存する style.css htmlが入っているフォルダ Friday, October 12, 12
- 12. タグごとに文字色を 変更する Friday, October 12, 12
- 13. まずはh1タグの 文字色を変更する Friday, October 12, 12
- 14. CSSの基本的な書き方 このように記述します 「h1は文字色を赤にしなさい」という意味です。 h1 { ! color :#ff0000; } Friday, October 12, 12
- 15. 各部位の名称 この名称は覚えましょう！ HTMLのどの部分に どのような属性を 具体的な設定を 適用するか決める 変更するか決める 決める セレクタ プロパティ 値 h1 { CSSルールセット ! color :#ff0000; } コロン セミコロン 中括弧で囲む プロパティと値の間にはコロン を、行の最後にはセミコロンを 入れる Friday, October 12, 12
- 17. HTMLとCSSをリンクさせる HTMLを保存しブラウザで確認しましょう。 <html> ! <head> ! ! <title></title> <meta name=”description” content=”ページの概要”> <link rel="stylesheet" type="text/css" href="style.css"> ! </head> CSSファイル名 ! <body> ! ! ページ内容 ! </body> ヘッダの中にこのタグを入れると </html> 指定したCSSファイルとリンクする Friday, October 12, 12
- 18. 他のタグの文字色を 変更してみましょう Friday, October 12, 12
- 19. 背景を変更する Friday, October 12, 12
- 20. 背景を変更する background(背景)設定のいろいろ 背景色を変更する background: #9999ff; 背景画像を変更する background: #9999ff url(“back.jpg”) リピート方法を変更する background: #9999ff url(“back.jpg”) repeat-x; 位置を変更する background: #9999ff url(“back.jpg”) repeat-x top center; Friday, October 12, 12
- 22. 他のHTMLにもリンクを記述する 各HTMLにリンクを記述することでCSSが反映される <head> <link ref=”stylesheet” href=”style.css”> ! </head> b.html c.html style.css Friday, October 12, 12
- 23. プロパティ Friday, October 12, 12
- 24. プロパティの種類 今日覚えるプロパティ font-size font-weight background color border margin padding Friday, October 12, 12
- 25. プロパティの種類 font-size（文字の大きさ） 文字の大きさの指定、ピクセルで指定や％でも指定できる font-size: 12px font-size: 90% font-weight (文字の太さ) ノーマルとボールドを覚えておけば大丈夫 font-weight: normal font-weight: bold Friday, October 12, 12
- 26. プロパティの種類 background(背景) 文字やページの背景の色を変えたり、画像を挿入できる background: #9999ff; background: #9999ff url(“back.jpg”) background: #9999ff url(“back.jpg”) repeat-x; background: #9999ff url(“back.jpg”) repeat-x top center; color (文字色) 色の指定ができる color: #ff0000 color: red Friday, October 12, 12
- 27. プロパティの種類 border(枠線) 文字やページの背景の色を変えたり、画像を挿入できる background: #9999ff; background: #9999ff url(“back.jpg”) background: #9999ff url(“back.jpg”) repeat-x; background: #9999ff url(“back.jpg”) repeat-x top center; Friday, October 12, 12