第05回Web講座資料

背景

Transcript

1. 第５回 Web講座
2. 概要 背景関連のプロパティ CSSの背景に関するプロパティを学ぶ。 背景色の指定や、背景画像の表示方法を自由に設定できるよ うになる。 練習課題 時間があれば取り組んでください。
3. 前準備 1. 適当な画像を用意（背景に使用します）。 2. background.html background.cssを作成。 3. background.htmlをエディタで開き、 !→Tabキー でHTMLの雛形を挿入。 4. <head>タグ内に<link>タグを挿入（link→Tabキー）。 5. hrefでbackground.cssの場所を指定。 例： <link rel="stylesheet" href="./css/background.css"> 以降は主にbackground.cssを編集します。 背景は<p>や<div>などの要素にも指定できますが、本講座では主に<body>に使います。
4. 背景に関するプロパティ  background-color … 背景色の指定  background-image … 背景画像の指定  background-position … 背景画像の表示開始位置の指定  background-repeat … 背景画像のリピートの仕方を指定する  background-attachment … 背景画像の固定を行う  background-size … 背景画像のサイズの指定する
5. background-color 要素の背景色を指定する。色の指定方法は前回紹介した通り。 background-color: #ff0000; background-color: #f00; background-color: rgb(255,0,0); background-color: rgba(100%,0%,0%,40%);
6. background-image 要素の背景画像を設定する。 background-image: url(画像のパス); と指定する。 background-image: url(“../img/sample.png”);
7. background-position 背景画像の表示位置を指定する。 background-position: 水平方向の位置 垂直方向の位置; と指定する background-position: center top;
8. background-position  水平方向の位置の指定 1. left 2. center 3. right 4. 数値(px)で指定 5. ％で指定 ◦ 垂直方向の位置の指定 1. top 2. center 3. bottom 4. 数値(px)で指定 5. ％で指定
9. background-position 横400×縦300
10. background-position background-positon: left top;
11. background-position background-positon: center bottom;
12. background-position background-positon: 100px 200px; 200px 100px
13. background-repeat  指定方法 1. repeat ･･･ 敷き詰める（初期値） 2. repeat-x ･･･ 水平方向に並べる 3. repeat-y ･･･ 垂直方向に並べる 4. no-repeat ･･･ 一つだけ表示
14. background-repeat background-repeat: repeat; (指定なしと同様）
15. background-repeat background-repeat: repeat-x;
16. background-repeat background-repeat: repeat-y;
17. background-repeat background-repeat: no-repeat;
18. background-attachment  指定方法 1. scroll ･･･ 要素に対して固定される（初期値） 2. fixed ･･･ 画面に対して固定される 3. local ･･･ 要素の内容に対して固定される ※詳しくはattachment.html attachment.cssを参照してください。
19. background-size 背景画像のサイズを指定する。 background-size: 幅 高さ; で指定、あるいは ～ contain;等属性値で指定する。  auto: 初期値。元画像からのアスペクト比を変えずに表示  contain: 背景領域に収まる最大サイズで表示する  cover: 背景領域を完全に覆うサイズで表示する  数値で指定  ％で指定
20. background-size
21. 課題 以下のようなWebページを制作してください。  大見出し：ネットワークチーム 小見出し：活動 本文 ：サーバの保守（改行）管理（改行）Web更新 小見出し：活動日 本文 ：木曜日  画像を背景に設定し、一枚の画像を、背景領域を完全に覆うサイズで表示してください。  本文の部分にはパターン画像を敷き詰めてください。
22. 課題表示例
23. おしまい 次回は続けてCSSのプロパティです