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回Network講座2019
Search
北海道科学大学 電子計算機研究部
July 02, 2019
Education
0
51
第05回Network講座2019
北海道科学大学 電子計算機研究部
July 02, 2019
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
57
第11回Network講座2019
densan
0
70
第10回Network講座2019
densan
0
46
第09回Network講座2019
densan
1
160
第08回Network講座2019
densan
0
49
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第04回Network講座2019
densan
0
110
第03回Network講座2019
densan
0
39
Other Decks in Education
See All in Education
Software
irocho
0
470
[Segah 2025] Gamified Interventions for Composting Behavior in the Workplace
ezefranca
0
160
Online Privacy
takahitosakamoto
1
120
自分だけの、誰も想像できないキャリアの育て方 〜偶然から始めるキャリアプラン〜 / Career planning starting by luckly v2
vtryo
1
220
今の私を形作る4つの要素と偶然の出会い(セレンディピティ)
mamohacy
2
110
質のよいアウトプットをできるようになるために~「読む・聞く、まとめる、言葉にする」を読んで~
amarelo_n24
0
260
20250910_エンジニアの成長は自覚するところから_サポーターズ勉強会
ippei0923
0
290
DIP_1_Introduction
hachama
0
200
Entrepreneurship minor course at HSE 2025
karlov
0
100
AI for Learning
fonylew
0
190
2026 g0v 零時政府年會啟動提案 / g0v Summit 2026 Kickstart
rschiang
0
330
Présentation_1ère_Spé_2025.pdf
bernhardsvt
0
400
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
How GitHub (no longer) Works
holman
315
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Agile that works and the tools we love
rasmusluckow
331
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
860
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Mobile First: as difficult as doing things right
swwweet
224
10k
How to Think Like a Performance Engineer
csswizardry
27
2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
The Language of Interfaces
destraynor
162
25k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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
本日はここまで お疲れ様でした