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
80
第五回ネットワークチーム講座
北海道科学大学 電子計算機研究部
May 30, 2016
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
51
第11回Network講座2019
densan
0
67
第10回Network講座2019
densan
0
43
第09回Network講座2019
densan
1
150
第08回Network講座2019
densan
0
46
第07回Network講座2019
densan
0
43
第06回Network講座2019
densan
0
67
第05回Network講座2019
densan
0
48
第04回Network講座2019
densan
0
84
Other Decks in Education
See All in Education
Medicare 101 for 2025
robinlee
PRO
0
320
Security, Privacy and Trust - Lecture 11 - Web Technologies (1019888BNR)
signer
PRO
0
2.6k
Da Necessidade da Devoção à Virgem Santíssima
cm_manaus
0
100
Design Guidelines and Models - Lecture 5 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
720
ニュースメディアにおける生成 AI の活用と開発 / UTokyo Lecture Business Introduction
upura
0
140
HCI Research Methods - Lecture 7 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
750
Mathematics used in cryptography around us
herumi
2
380
Adobe Express
matleenalaakso
1
7.6k
1113
cbtlibrary
0
270
Chapitre_1_-__L_atmosphère_et_la_vie_-_Partie_2.pdf
bernhardsvt
0
210
20241004_Microsoft認定資格のFundamentals全部取ってみた
ponponmikankan
2
370
Canva
matleenalaakso
0
470
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Being A Developer After 40
akosma
87
590k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
98
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Typedesign – Prime Four
hannesfritz
40
2.4k
Six Lessons from altMBA
skipperchong
27
3.5k
A better future with KSS
kneath
238
17k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
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のプロパティです