第05回Web講座資料

第５回 Web講座

概要 背景関連のプロパティ CSSの背景に関するプロパティを学ぶ。背景色の指定や、背景画像の表示方法を自由に設定できるようになる。 練習課題時間があれば取り組んでください。

前準備 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>に使います。

背景に関するプロパティ  background-color … 背景色の指定  background-image … 背景画像の指定 
background-position … 背景画像の表示開始位置の指定  background-repeat … 背景画像のリピートの仕方を指定する  background-attachment … 背景画像の固定を行う  background-size … 背景画像のサイズの指定する

background-color 要素の背景色を指定する。色の指定方法は前回紹介した通り。 background-color: #ff0000; background-color: #f00; background-color: rgb(255,0,0); background-color: rgba(100%,0%,0%,40%);

background-image 要素の背景画像を設定する。 background-image: url(画像のパス); と指定する。 background-image: url(“../img/sample.png”);

background-position 背景画像の表示位置を指定する。 background-position: 水平方向の位置垂直方向の位置; と指定する background-position: center top;

background-position  水平方向の位置の指定 1. left 2. center 3. right 4.
数値(px)で指定 5. ％で指定 ◦ 垂直方向の位置の指定 1. top 2. center 3. bottom 4. 数値(px)で指定 5. ％で指定

background-position 横400×縦300

background-position background-positon: left top;

background-position background-positon: center bottom;

background-position background-positon: 100px 200px; 200px 100px

background-repeat  指定方法 1. repeat ･･･敷き詰める（初期値） 2. repeat-x ･･･
水平方向に並べる 3. repeat-y ･･･垂直方向に並べる 4. no-repeat ･･･一つだけ表示

background-repeat background-repeat: repeat; (指定なしと同様）

background-repeat background-repeat: repeat-x;

background-repeat background-repeat: repeat-y;

background-repeat background-repeat: no-repeat;

background-attachment  指定方法 1. scroll ･･･要素に対して固定される（初期値） 2. fixed ･･･
画面に対して固定される 3. local ･･･要素の内容に対して固定される ※詳しくはattachment.html attachment.cssを参照してください。

background-size 背景画像のサイズを指定する。 background-size: 幅高さ; で指定、あるいは～ contain;等属性値で指定する。  auto:
初期値。元画像からのアスペクト比を変えずに表示  contain: 背景領域に収まる最大サイズで表示する  cover: 背景領域を完全に覆うサイズで表示する  数値で指定  ％で指定

background-size

課題以下のようなWebページを制作してください。  大見出し：ネットワークチーム小見出し：活動本文：サーバの保守（改行）管理（改行）Web更新小見出し：活動日本文：木曜日
 画像を背景に設定し、一枚の画像を、背景領域を完全に覆うサイズで表示してください。  本文の部分にはパターン画像を敷き詰めてください。

課題表示例

おしまい次回は続けてCSSのプロパティです

第05回Web講座資料

第05回Web講座資料

北海道科学大学　電子計算機研究部

More Decks by 北海道科学大学　電子計算機研究部

Other Decks in Programming

Featured

Transcript

第５回 Web講座

概要 背景関連のプロパティ CSSの背景に関するプロパティを学ぶ。背景色の指定や、背景画像の表示方法を自由に設定できるようになる。 練習課題時間があれば取り組んでください。

前準備 1. 適当な画像を用意（背景に使用します）。 2. background.html background.cssを作成。 3. background.htmlをエディタで開き、 !→TabキーでHTMLの雛形を挿入。

背景に関するプロパティ  background-color … 背景色の指定  background-image … 背景画像の指定 

background-color 要素の背景色を指定する。色の指定方法は前回紹介した通り。 background-color: #ff0000; background-color: #f00; background-color: rgb(255,0,0); background-color: rgba(100%,0%,0%,40%);

background-image 要素の背景画像を設定する。 background-image: url(画像のパス); と指定する。 background-image: url(“../img/sample.png”);

background-position 背景画像の表示位置を指定する。 background-position: 水平方向の位置垂直方向の位置; と指定する background-position: center top;

background-position  水平方向の位置の指定 1. left 2. center 3. right 4.

background-position 横400×縦300

background-position background-positon: left top;

background-position background-positon: center bottom;

background-position background-positon: 100px 200px; 200px 100px

background-repeat  指定方法 1. repeat ･･･敷き詰める（初期値） 2. repeat-x ･･･

background-repeat background-repeat: repeat; (指定なしと同様）

background-repeat background-repeat: repeat-x;

background-repeat background-repeat: repeat-y;

background-repeat background-repeat: no-repeat;

background-attachment  指定方法 1. scroll ･･･要素に対して固定される（初期値） 2. fixed ･･･

background-size 背景画像のサイズを指定する。 background-size: 幅高さ; で指定、あるいは～ contain;等属性値で指定する。  auto:

background-size

課題以下のようなWebページを制作してください。  大見出し：ネットワークチーム小見出し：活動本文：サーバの保守（改行）管理（改行）Web更新小見出し：活動日本文：木曜日

課題表示例

おしまい次回は続けてCSSのプロパティです

第05回Web講座資料

第05回Web講座資料

More Decks by 北海道科学大学 電子計算機研究部

Other Decks in Programming

Featured

Transcript

More Decks by 北海道科学大学　電子計算機研究部