第五回ネットワークチーム講座

Transcript

1. 第五回ネットワーク チーム講座資料 CSSのプロパティ２
2. 概要 • 背景関連プロパティ • 中央寄せのやり方
3. 背景に関するプロパティ • background-color … 背景色の指定 • background-image … 背景画像の指定 • background-position … 背景画像の表示開始位置の指定 • background-repeat … 背景画像のリピートの仕方を指定する • background-attachment … 背景画像の固定を行う • background-size … 背景画像のサイズの指定する
4. background-color 要素の背景色を指定する。色の指定方法は前回紹介した通り。 background-color: #ff0000; background-color: #f00; background-color: rgb(255,0,0); background-color: rgba(100%,0%,0%,40%);
5. background-image 要素の背景画像を設定する。 background-image: url(画像のパス); と指定する。 background-image: url(“../img/sample.png”);
6. background-position 背景画像の表示位置を指定する。 background-position: 水平方向の位置 垂直方向の位置; と指定する background-position: center top;
7. background-position • 水平方向の位置の指定 1. left 2. center 3. right 4. 数値(px)で指定 5. ％で指定 • 垂直方向の位置の指定 1. top 2. center 3. bottom 4. 数値(px)で指定 5. ％で指定
8. background-position 横400×縦300
9. background-position background-positon: left top;
10. background-position background-positon: center bottom;
11. background-position background-positon: 100px 200px; 200px 100px
12. background-repeat • 指定方法 1. repeat ･･･ 敷き詰める（初期値） 2. repeat-x ･･･ 水平方向に並べる 3. repeat-y ･･･ 垂直方向に並べる 4. no-repeat ･･･ 一つだけ表示
13. background-repeat background-repeat: repeat; (指定なしと同様）
14. background-repeat background-repeat: repeat-x;
15. background-repeat background-repeat: repeat-y;
16. background-repeat background-repeat: no-repeat;
17. background-attachment • 指定方法 1. scroll ･･･ 要素に対して固定される（初期値） 2. fixed ･･･ 画面に対して固定される 3. local ･･･ 要素の内容に対して固定される ※後の演習で詳しく説明します。
18. background-size 背景画像のサイズを指定する。 background-size: 幅 高さ; で指定、あるいは ～ contain;等属性値で指定する。 • auto: 初期値。元画像からのアスペクト比を変えずに表示 • contain: 背景領域に収まる最大サイズで表示する • cover: 背景領域を完全に覆うサイズで表示する • 数値で指定 • ％で指定
19. background-size
20. 演習 • 適当な縦長の画像ファイルを用意 （ 壁紙位の大きさのもの 横長の画像もあると良い） • それを作業用フォルダ内のimgフォルダに入れて、わかりやすい ファイル名に変更 • 次のページの通りにhtmlファイルを作成 （ファイル名はattachment.htmlなどに）
21. 演習
22. 演習 • 可能な限りEmmetを活用して作成すること （わからなければ過去の資料を見たり、先輩に聞いたりしてください） • その後、次のページの通りにCSSを作成 （ファイル名はattachment.cssなどに）
24. おしまい 次回は続けてCSSのプロパティです