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
第05回Web講座2018
Search
北海道科学大学 電子計算機研究部
June 13, 2018
Education
0
71
第05回Web講座2018
北海道科学大学 電子計算機研究部
June 13, 2018
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
インターアクトクラブについて:国際ロータリー第2720地区インターアクト委員会 委員長・大分東ロータリークラブ 阿部 克哉 氏
2720japanoke
0
670
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
signer
PRO
0
1.4k
LTをすべき100の理由
eltociear
1
280
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
わたしのメタ学習 / My Own Meta Learning #shinjukurb
expajp
0
120
Project Sprint 学生版(入門編)
copilot
PRO
0
180
4 занятие. Разбор бизнес-моделей и метод красной нити #ideaNN 9.02.2024.
karlov
0
230
保育とふりかえりをコネクト! / connect childcare and retrospectives!
psj59129
1
150
week2@tcue2024
nonxxxizm
0
810
phygital__le_magasin_augmenté.pdf
martine
0
2.6k
Data Management and Analytics Specialisation
signer
PRO
0
990
Gesture-based Interaction - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Ruby is Unlike a Banana
tanoku
96
10k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
A Tale of Four Properties
chriscoyier
151
22k
The Invisible Side of Design
smashingmag
294
49k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Facilitating Awesome Meetings
lara
42
5.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Transcript
ネットワークチーム 第5回 北海道科学大学 電子計算機研究部
INDEX ⚫ ボックスモデル ⚫ 背景のプロパティ ⚫ Marginプロパティ ⚫ Paddingプロパティ ⚫
Borderプロパティ ⚫ Marginの相殺 ⚫ 演習 - background-attachment 2
ボックスモデル
ボックスモデルとは 文書内の要素は、ボックスと呼ばれる 四角形の領域を持っている 4
ボックスモデルとは Content 内容(文字や画像)が表示される領域 Padding Content と Border の間の余白領域 Paddingプロパティで表示を指定する Border
枠線 ※余白ではない borderプロパティで表示を指定する backgroundで設定した画像は デフォルトではここまで表示される Margin 一番外側の余白 marginプロパティで表示を指定する 5
ボックスサイズの確認方法 1. デベロッパーツールを起動して 左側のカーソルアイコンをクリック 2. 確認したい要素をクリック 3. デベロッパーツールの「Elements」タブ内の 「Styles」の一番下でボックスサイズが確認できる 6
背景のプロパティ
背景のプロパティ 8 プロパティ 用途 background-color 背景色を指定する background-image 背景画像を指定する background-repeat 背景画像のリピートの仕方を指定する
background-position 背景画像の表示開始位置を指定する background-attachment スクロールした際の表示方法を指定する background-clip 背景画像を表示する領域を指定する background-size 背景画像のサイズの指定する background-origin 背景画像の基準位置を指定する
background-color 9 background-color : [カラーコード又はrgb()]; 構文 記述例 要素の背景色を指定する。 色の指定方法は前回紹介したcolorプロパティと同じ。 background-color:
#FF0000; background-color: #F00; background-color: rgb(255,0,0); background-color: rgba(100%,0%,0%,40%);
カラーコード(前回) color: #FF0000; color: #F00; 10 カラーコードによる指定 16進数(6or3)桁で指定する方法。 #記号の後、前から、赤 緑
青 の順に各色の濃さを指 定する。 光の三原色
rgb(前回) color: rgb(255,0,0); color: rgba(100%,0%,0%,40%); color: rgba(255,0,0,0.4); 11 rgbによる指定 rgb()
を使用して各色の濃さを指定する。 括弧内で 赤 緑 青 の順にカンマ区切りで 数値(0-255) または 割合(0%-100%) を指定する。 rgba() は、上記に加え透明度を指定することが 出来る。数値で指定する場合は 0-1 で指定する。
background-image 12 background-image: url[画像のパス]; 構文 記述例 要素の背景画像を設定する。 background-image: url(“../img/sample.png”);
background-repeat 13 background-repeat : [繰り返し方法] ; 構文 記述例 背景画像の繰り返し方法を指定する background-repeat:
repeat;
background-repeat 14 指定方法 値 用途 repeat 初期値 敷き詰める repeat-x 水平方向に並べる
repeat-y 垂直方向に並べる no-repeat 一つだけ表示する(繰り返さない)
background-repeat 15 repeat repeat-x repeat-y no-repeat
background-position 16 background-position: [水平位置] [垂直位置] ; 構文 記述例 背景画像の表示位置を指定する background-position:
center top;
background-position 17 指定方法 水平方向 垂直方向 left top center center right
bottom [数値] + [単位] [数値] + [単位] 初期値 初期値 0% 0%
background-position 18 left top center bottom 画像サイズ 400×300 100px 200px
background-attachment 19 background-attachment : [表示方法] ; 構文 記述例 背景画像の表示位置を指定する background-attachment
: fixed;
background-attachment 20 指定方法 値 用途 scroll 初期値 背景画像も一緒にスクロール (要素に対して固定) fixed
スクロールしない (画面に対して固定) local 要素の領域に固定(後述)
background-clip 21 background-clip : [表示領域] ; 構文 記述例 背景画像を表示する領域(ボックスモデル)を指定する background-clip
: border-box;
background-clip 22 指定方法 値 用途 border-box 初期値 Border領域まで表示する padding-box Padding領域まで表示する
content-box Content領域のみに表示する
background-size 23 background-size : [値] ; 構文 記述例 背景画像のサイズを指定する background-size:
contain; background-size: 100px 50px;
background-size 24 指定方法 値 用途 auto 初期値 元画像からの縦横比を変えずに表示 contain 背景領域に収まる最大サイズで表示する
cover 背景領域を完全に覆うサイズで表示する [数値][単位] 幅と高さを半角スペースで区切って指定する 値が1つの場合、2つ目はauto
background-size 25 表示例
background 26 background : [-color] [-image] [-repeat] [-position] [-attachment] [-clip]
[-size] [-origin]; 構文 記述例 前述の要素を一括で指定する(順不同) -sizeプロパティの値は、-positionプロパティの後に スラッシュ(/)で続けて指定 /* 単一の画像、中央寄せかつ縮小 */ background: no-repeat center/80% url("../img/image.png");
Marginプロパティ
Margin 28 margin : [値(1~4個)] ; 構文 記述例 要素同士の間隔・余白を一括で指定するプロパティ 値は1~4個
margin: 10px 20px 30px 40px; /* 上10px 右20px 下30px 左40px */
Margin 29 指定方法 値の数 用途 1 上下左右全てのマージンが指定した値になる 2 1つ目が上下、2つ目が左右の値になる 3
1つ目が上、2つ目が左右、3つ目が下の値 4 上、右、下、左の順に対応した値になる(時計回り)
Paddingプロパティ
Padding 31 padding : [値(1~4個)] ; 構文 記述例 要素内の空白(BorderとContentの間隔)を指定する 指定方法は
margin と全く同じ padding: 10px 20px 30px 40px; /* 上10px 右20px 下30px 左40px */
Borderプロパティ
Border 33 border : [-width] [-style] [-color] ; 構文 記述例
Border に関する指定を一括で行う。 border: 10px solid #f00; /* 太さ:10px スタイル:実線 色:赤 */
Borderを上下左右 別々に指定したい 34 1. border-top, border-bottom, border-left, border-right を用いる border-top:
10px solid #f00; /* 上の線 太さ:10px スタイル:実線 色:赤 */ border-width: 1px 2px 3px 4px; /* 太さ 上:1px 右:2px 下:3px 左:4px*/ 2. border-width, border-style, border-color で太さ スタイル、色について上下左右に別々の値を指定する
Marginの相殺
Marginの相殺 36 margin.html margin.css h1のマージン 20px pのマージン 30px 2つの要素の間隔は 50px
になるはず!
Marginの相殺 37 現実 同じ長さ (30px)
Marginの相殺 38 上下に二つのマージンが重なり合う際 ⚫ 符号が同じ場合、値が大きい方が優先される 30px > 20px ... 30px
⚫ 符号が異なる場合、合算値になる 30 – (-20) = 50 px このような状態をマージンの相殺という
演習9 background-attachment
演習9 40 ⚫ 適当な縦長の画像ファイルを用意 ( 壁紙位の大きさのもの 横長の画像もあると良い) ⚫ それを作業用フォルダ内のimgフォルダに入れて わかりやすいファイル名に変更
⚫ 次のページの通りにhtml, cssファイルを作成 (ファイル名はattachment.htmlなどに)
演習9 41 attachment.html
演習9 42 attachment.css 次ページへ続く
演習9 43 attachment.css
本日はここまで お疲れ様でした