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
吉岡研究室紹介(2025年度)
kentaroy47
0
350
QR-koodit opetuksessa
matleenalaakso
0
1.7k
1014
cbtlibrary
0
270
附属科学技術高等学校の概要|Science Tokyo(東京科学大学)
sciencetokyo
PRO
0
1.3k
Introduction - Lecture 1 - Web Technologies (1019888BNR)
signer
PRO
0
5.6k
相互コミュニケーションの難しさ
masakiokuda
0
270
Transición del Management al Neuromanagement
jvpcubias
0
240
RSJ2025 ランチョンセミナー 一歩ずつ世界へ:学生・若手研究者のための等身大の国際化の始め方
t_inamura
0
310
GitHubとAzureを使って開発者になろう
ymd65536
1
180
情報科学類で学べる専門科目38選
momeemt
0
630
Técnicas y Tecnología para la Investigación Neurocientífica en el Neuromanagement
jvpcubias
0
170
Introduction - Lecture 1 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
2.5k
Featured
See All Featured
Code Review Best Practice
trishagee
72
19k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Code Reviewing Like a Champion
maltzj
526
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Site-Speed That Sticks
csswizardry
12
900
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
Speed Design
sergeychernyshev
32
1.2k
Fireside Chat
paigeccino
40
3.7k
The Pragmatic Product Professional
lauravandoore
36
6.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
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
本日はここまで お疲れ様でした