Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第五回ネットワークチーム講座
Search
北海道科学大学 電子計算機研究部
May 30, 2016
Education
0
76
第五回ネットワークチーム講座
北海道科学大学 電子計算機研究部
May 30, 2016
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
40
第11回Network講座2019
densan
0
65
第10回Network講座2019
densan
0
34
第09回Network講座2019
densan
1
130
第08回Network講座2019
densan
0
41
第07回Network講座2019
densan
0
41
第06回Network講座2019
densan
0
49
第05回Network講座2019
densan
0
41
第04回Network講座2019
densan
0
63
Other Decks in Education
See All in Education
Digijulkaisut
matleenalaakso
1
8.6k
Railsチュートリアルの歩き方 (第7版)
yasslab
PRO
1
1M
Padlet opetuksessa
matleenalaakso
3
11k
Introduction - Lecture 1 - Information Visualisation (4019538FNR)
signer
PRO
0
3.5k
4 занятие. Разбор бизнес-моделей и метод красной нити #ideaNN 9.02.2024.
karlov
0
230
Before You Create Something
nandenjin
0
100
Monaca Educationを活用したプログラミング授業実践
asial_edu
0
210
Introduction - Lecture 1 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
3.1k
Родина моя Беларусь в лицах
programmer_sch2np
0
160
わたしのメタ学習 / My Own Meta Learning #shinjukurb
expajp
0
150
Pen-based Interaction - Lecture 4 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
Animaatiot opetuksessa
matleenalaakso
0
3.1k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Gamification - CAS2011
davidbonilla
77
4.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Happy Clients
brianwarren
92
6.4k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
20
1.6k
Visualization
eitanlees
137
14k
The Cult of Friendly URLs
andyhume
74
5.7k
What's new in Ruby 2.0
geeforr
337
31k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Transcript
第五回ネットワーク チーム講座資料 CSSのプロパティ2
概要 • 背景関連プロパティ • 中央寄せのやり方
背景に関するプロパティ • 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 ・・・ 要素の内容に対して固定される ※後の演習で詳しく説明します。
background-size 背景画像のサイズを指定する。 background-size: 幅 高さ; で指定、あるいは ~ contain;等属性値で指定する。 • auto:
初期値。元画像からのアスペクト比を変えずに表示 • contain: 背景領域に収まる最大サイズで表示する • cover: 背景領域を完全に覆うサイズで表示する • 数値で指定 • %で指定
background-size
演習 • 適当な縦長の画像ファイルを用意 ( 壁紙位の大きさのもの 横長の画像もあると良い) • それを作業用フォルダ内のimgフォルダに入れて、わかりやすい ファイル名に変更 •
次のページの通りにhtmlファイルを作成 (ファイル名はattachment.htmlなどに)
演習
演習 • 可能な限りEmmetを活用して作成すること (わからなければ過去の資料を見たり、先輩に聞いたりしてください) • その後、次のページの通りにCSSを作成 (ファイル名はattachment.cssなどに)
None
おしまい 次回は続けてCSSのプロパティです