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
第6回ネットワーク講座
Search
北海道科学大学 電子計算機研究部
June 06, 2016
Education
0
63
第6回ネットワーク講座
北海道科学大学 電子計算機研究部
June 06, 2016
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
55
第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
100
Other Decks in Education
See All in Education
OpenSourceSummitJapanを運営してみた話
kujiraitakahiro
0
710
Course Review - Lecture 12 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
技術勉強会 〜 OAuth & OIDC 入門編 / 20250528 OAuth and OIDC
oidfj
5
1.2k
SkimaTalk Tutorial for Corporate Customers
skimatalk
0
290
著作権と授業に関する出前講習会/dme-2025-05-01
gnutar
0
200
CHARMS-HP-Banner
weltraumreisende
0
190
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
720
万博非公式マップとFOSS4G
barsaka2
0
120
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
ふりかえり研修2025
pokotyamu
0
1.2k
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
Data Processing and Visualisation Frameworks - Lecture 6 - Information Visualisation (4019538FNR)
signer
PRO
1
2.4k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
The World Runs on Bad Software
bkeepers
PRO
69
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Side Projects
sachag
455
42k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Music & Morning Musume
bryan
46
6.6k
Transcript
第六回ネットワーク チーム講座資料 CSSのプロパティ3
概要 • overflowプロパティ • ボックスについて • margin/padding/border • marginの相殺 •
positionプロパティ
overflow コンテントボックスに内容が入りきらない場合に、はみ出た部分の 表示方法を指定する。 • visible : 初期値。ボックスからはみ出して表示される • scroll :
入りきらない内容はスクロールして見られるようになる • hidden : はみ出た部分は表示されない
overflow overflow: visible;(初期値)
overflow overflow: hidden;
overflow overflow: scroll;
マージン ボーダー パディング ボックスとは 要素が生成する領域のこと。 コンテントとは要素の内容を示す。 コンテント
ボックスサイズの確認方法 ボックスサイズについては、ブラウザ付属のディベロッパーツー ルで、インスペクタという機能を使用すると確認することができる。 1. ブラウザ上でF12キーを押すと、次のページのような画面になる (例はクロームの場合)
ボックスサイズの確認方法
ボックスサイズの確認方法 2. 左上の方にマウスカーソルを模したボタンがあるのでそれをク リック
ボックスサイズの確認方法 3. 確認したい要素をクリックする
ボックスサイズの確認方法 4. ディベロッパーツールの右側にある”Styles”というタブの一番下で ボックスサイズが確認できる
実例
実例
解説 マージン (150px) width height パディング(50px) ボーダー (5px 破線)
margin 要素同士の間隔・余白を一括で指定するプロパティ。 指定した値の数に応じて、マージンは下記の通りになる。 • 1つ・・・上下左右全てのマージンが指定した値になる • 2つ・・・1つ目が上下、2つ目が左右の値になる • 3つ・・・1つ目が上、2つ目が左右、3つ目が下の値になる •
4つ・・・上、右、下、左の順に対応した値になる
margin 下記の通り指定すると、マージンは 1. margin: 20px; → 上下左右20px 2. margin: 0
200px; → 上下0px、左右200px 3. margin: 20px 30px 40px; → 上20px、左右30px、下400px 4. margin: 100px 10px 50px 20px; → 上100px、右10px、下50px 左20px
padding 要素内の空白(ボーダーとコンテントとの間隔)を指定する。 値の指定方法は marginプロパティと同様。 padding: 0 30px;
border ボーダーに関する指定を一括で行う。 上下左右全てが指定された値になる。 border: 10px solid #ff0; 太さ スタイル 色
border borderの指定を上下左右別々に行いたい場合、2つの方法がある。 ① border-top, border-bottom, border-left, border-right を用いる border-topは上のみ、border-bottomは下のみ…という風に、対応 したプロパティを用いて個別に設定する方法。
値の指定方法はborderと同様。 border-top: 3px double #909090; 太さ スタイル 色
border 2. border-width, border-style, border-color で太さ、スタイル、色に ついて上下左右に別々の値を指定する border-widthでは太さ、border-styleではスタイル、border-colorで は色を指定する。 指定する際の順番はmargin/paddingと同様で、指定した値の数に
応じて上下左右に設定される。
border-style で指定できる値 一覧は右図の通り。初期値は none none と hidden は共に非表示(太さ0)で あるが、hidden は表のセルなどボーダーが
重なりあう場合も非表示となる。
結果
ちなみに border-collapse: collapse; が有効では 無い場合 ※border-collapse プロパティはボーダーを 重ね合わせるプロパティ
background-clip 背景の適用範囲の指定を行う。 • border-box: 初期値。背景をボーダーボックスに適用する • padding-box: 背景をパディングボックスに適用する • content-box:
背景をコンテントボックスに適用する
background-clip background-clip: border-box; (初期値)
background-clip background-clip: padding-box;
background-clip background-clip: content-box;
background-origin 背景の基準位置の指定を行う。 • padding-box: 初期値。背景をパディングボックスに適用する • border-box: 背景をボーダーボックスを基準に表示する • content-box:
背景をコンテントボックスに適用する
background-origin background-origin: padding-box; (初期値)
background-origin background-origin: border-box;
background-origin background-origin: content-box;
書いてみよう 以下のようなHTML文書を記述する。 (なるべくEmmetを用いて記述してみよう)
書いてみよう margin.css をcssフォルダ内に作成し、下記の通り書く
ここで • h1要素の下マージンは20px • p要素の上マージンは30px ∴h1とpの間隔は 20px+30px=50px になるはず
しかし 実際には30pxしかない。 何故? ↓同じ長さ→
マージンの相殺 上下に二つのマージンが重なり合う場合、 • 符号が同じ場合、値が大きい方が優先される。 • 符号が異なる場合、合算値になる。 このような状態をマージンの相殺という
結果
ちなみに マージンには負の値を指定することも可能。 h1の下マージンを -40px と書き変えた場合、
結果 このように表示される。 ※(-40px)+ 30px = -10px
マージンの相殺について
考える divの中にp要素があり、p要素の上マージンは50pxなので、 下の通り表示される・・・? 50px
結果 実はマージンの相殺は親子要素同士でも起こる。 今回の場合、 • h1の下マージン30px • divの上マージン20px • pの上マージン50px この3つが重なり、一番大きい50pxになる
50px
復習 div要素に対して、次の通りスタイルを追加する。
復習 ボックスサイズ=マージン+ボーダー+パディング+コンテント であり、 • 高さ=上下マージン+上下ボーダー+上下パディング+height • 幅=左右マージン+左右ボーダー+左右パディング+width で求められる
復習 今回の場合、div要素のボックスサイズは • 高さ=20px+2px*2+20px+100px=144px • 幅=0px+2px*2+10px*2+300px=324px ←このように表示されるはず 50px 324px 144px
結果 実際にはこうなる。 何故?
マージンの相殺の例外 実は、親要素に対して以下のスタイルを適用すると子要素とのマー ジンの相殺が起こらない。 1. border(値が0以外) 2. padding(値が0以外) 3. overflow(値がhidden または
scrollの時) 4. position(値がabsolute または fixedの時) 他、floatプロパティを使用した場合も例外となる(次回解説)
解説 h1-div間のマージンは、p要素の下マージン が適用されて30pxとなる。 div内のp要素のマージンは相殺されないの で、ボーダーから50px下にp要素が表示さ れる。 ボックスサイズは先ほど求めた通り。 50px 324px 144px
30px
box-sizing width , height プロパティで指定するボックスサイズの大きさの算出方 法を変更する際に使用する。 初期値は”content-box” • content-box :
初期値。パディング、ボーダーを幅と高さに含めない • padding-box : パディングを幅と高さに含める(ボーダーは除く) • border-box : パディングとボーダーを幅と高さに含める
マージン ボーダー パディング つまり 1. content-boxの場合 コンテント マージン ボーダー+パディング +コンテント
width height width height 2. border-boxの場合
つまり box-sizing: border-box; と指定した場合、ボックスサイズの計算は • 高さ=上下マージン+height • 幅=左右マージン+width これだけで良い。
position ボックスの配置方法を指定する。 • static : 初期値。top などの位置指定プロパティが適用されない。 • relative :
相対位置に配置する。 • absolute : 絶対位置に配置する。 • fixed : 絶対位置に配置し、なおかつスクロールしても動かない。
position 値にstatic以外を指定した場合、以下のプロパティを併用して位置を 指定する。 • top : 上方向に対する基準位置からの距離 • bottom :
下方向に対する基準位置からの距離 • left : 左方向に対する基準位置からの距離 • right : 右方向に対する基準位置からの距離
position : relative; 30px 値がstaticである時の位置を基準位置とする。 適用 30px(top) 30px(margin) 30px(left)
position : absolute; 30px 上位階層の要素で直近のposition: static; でない要素を基準位置とする。 適用 30px(top) 20px(margin)
30px(left)
position: fixed; 最初の表示位置はabsoluteと同様だが、画面上に固定される。 (スクロールしても位置が変わらない)
おしまい 次回は続けてCSSのプロパティです