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
76
第05回Web講座2018
北海道科学大学 電子計算機研究部
June 13, 2018
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
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
110
Other Decks in Education
See All in Education
HTML5 and the Open Web Platform - Lecture 3 - Web Technologies (1019888BNR)
signer
PRO
2
3k
SISTEMA DE MEMORIA Y SU IMPACTO EN LAS DECISIONES.
jvpcubias
0
180
20250910_エンジニアの成長は自覚するところから_サポーターズ勉強会
ippei0923
0
290
Sanapilvet opetuksessa
matleenalaakso
0
34k
尊敬語「くださる」と謙譲語「いただく」の使い分け
hysmrk
0
110
(2025) L'origami, mieux que la règle et le compas
mansuy
0
150
ROSConJP 2025 発表スライド
f0reacharr
0
240
とある長岡高専卒のおっさんがIT企業のマネージャーになるまで / journey-from-nagaoka-kosen-grad-to-it-manager
masaru_b_cl
0
120
附属科学技術高等学校の概要|Science Tokyo(東京科学大学)
sciencetokyo
PRO
0
1.3k
1014
cbtlibrary
0
290
生成AI活用セミナー/GAI-workshop
gnutar
0
120
今までのやり方でやってみよう!?~今までのやり方でやってみよう!?~
kanamitsu
0
180
Featured
See All Featured
Done Done
chrislema
185
16k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
590
How to train your dragon (web standard)
notwaldorf
97
6.3k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Leading Effective Engineering Teams in the AI Era
addyosmani
7
450
Practical Orchestrator
shlominoach
190
11k
Automating Front-end Workflow
addyosmani
1371
200k
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
本日はここまで お疲れ様でした