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
第06回Web講座
Search
北海道科学大学 電子計算機研究部
June 21, 2017
Programming
0
73
第06回Web講座
overflow, position , ボックスプロパティ
北海道科学大学 電子計算機研究部
June 21, 2017
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
56
第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 Programming
See All in Programming
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.6k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
29k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
KATA
mclloyd
30
14k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Visualization
eitanlees
146
16k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Transcript
第6回 Web講座 created by mathuura editor kagawa
概要 ボックスについて overflowプロパティ margin/padding/border marginの相殺 positionプロパティ 2
マージン ボーダー パディング ボックスとは 要素が生成する領域のこと。 コンテントとは要素の内容を示す。 コンテント 3
ボックスサイズの確認方法 ボックスサイズについては、ブラウザ付属のディベロッパーツールで、 インスペクタという機能を使用すると確認することができる。 1. ブラウザ上でF12キーを押すと、次のページのような画面になる (例はクロームの場合) 4
ボックスサイズの確認方法 5
ボックスサイズの確認方法 2. 左上の方にマウスカーソルを模したボタンがあるのでそれをクリック 6
ボックスサイズの確認方法 3. 確認したい要素をクリックする 7
ボックスサイズの確認方法 4. ディベロッパーツールの右側にある”Styles”というタブの一番下でボッ クスサイズが確認できる 8
overflow コンテントボックスに内容が入りきらない場合に、はみ出た部分の 表示方法を指定する。 visible : 初期値。ボックスからはみ出して表示される scroll : 入りきらない内容はスクロールして見られるようになる hidden
: はみ出た部分は表示されない 9
overflow overflow: visible;(初期値) 10
overflow overflow: hidden; 11
overflow overflow: scroll; 12
実例 新しいhtml !>p [tab キー] 13
実例 14
マージン (150px) width height パディング(50px) ボーダー (5px 破線) 15 解説
margin 要素同士の間隔・余白を一括で指定するプロパティ。 指定した値の数に応じて、マージンは下記の通りになる。 1つ・・・上下左右全てのマージンが指定した値になる 2つ・・・1つ目が上下、2つ目が左右の値になる 3つ・・・1つ目が上、2つ目が左右、3つ目が下の値になる
4つ・・・上、右、下、左の順に対応した値になる 16
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 17 ↑ ←→ ↓ 時計回り ↑→ ↓ ← ↑ ↓ ←→
padding 要素内の空白(ボーダーとコンテントとの間隔)を指定する。 値の指定方法は marginプロパティと同様。 padding: 0 30px; 18
border ボーダーに関する指定を一括で行う。 上下左右全てが指定された値になる。 border: 10px solid #ff0; 太さ スタイル 色
19
border borderの指定を上下左右別々に行いたい場合、2つの方法がある。 ① border-top, border-bottom, border-left, border-right を用いる border-topは上のみ、border-bottomは下のみ…という風に、対応した プロパティを用いて個別に設定する方法。
値の指定方法はborderと同様。 border-top: 3px double #909090; 太さ スタイル 色 20
border 2. border-width, border-style, border-color で太さ、スタイル、色につい て上下左右に別々の値を指定する -width 太さ |
-style スタイル |-color 色を指定する。 指定する際の順番はmargin/paddingと同様で、指定した値の数に応じ て上下左右に設定される。 21
border-style で指定できる値 一覧は右図の通り。初期値は none none と hidden は共に非表示(太さ0)で あるが、hidden は表のセルなどボーダーが
重なりあう場合も非表示となる。 22
結果 23
ちなみに border-collapse: collapse; が有効では 無い場合 ※border-collapse プロパティはボーダーを 重ね合わせるプロパティ 24
background-clip 背景の適用範囲の指定を行う。 border-box : 初期値。背景をボーダーボックスに適用する padding-box: 背景をパディングボックスに適用する
content-box : 背景をコンテントボックスに適用する 25
background-clip background-clip: border-box; (初期値) 26
background-clip background-clip: padding-box; 27
background-clip background-clip: content-box; 28
background-origin 背景の基準位置の指定を行う。 padding-box: 初期値。背景をパディングボックスに適用する border-box : 背景をボーダーボックスを基準に表示する
content-box : 背景をコンテントボックスに適用する 29
background-origin background-origin: padding-box; (初期値) 30
background-origin background-origin: border-box; 31
background-origin background-origin: content-box; 32
書いてみよう 以下のようなHTML文書を記述する。 (なるべくEmmetを用いて記述してみよう) 33
書いてみよう margin.css をcssフォルダ内に作成し、下記の通り書く 34
ここで h1要素の下マージンは20px + p要素の上マージンは30px ∴h1とpの間隔は 20px+30px=50px になるはず 35
しかし 実際には30pxしかない。 何故? ↓同じ長さ→ 36
マージンの相殺 上下に二つのマージンが重なり合う場合、 符号が同じ場合、値が大きい方が優先される。 30px > 20px ... 30px
符号が異なる場合、合算値になる。 30 – (-20) = 50 px このような状態を マージンの相殺という 37
結果 38
ちなみに マージンには負の値を指定することも可能。 h1の下マージンを -40px と書き変えた場合、 39
結果 このように表示される。 ※(-40px)+ 30px = -10px 40
演習:マージンの相殺について 41
考える divの中にp要素があり、p要素の上マージンは50pxなので、 下の通り表示される・・・? 50px 42
結果 実はマージンの相殺は親子要素同士でも起こる。 今回の場合、 h1の下マージン30px divの上マージン20px pの上マージン50px この3つが重なり、一番大きい50pxになる
50px 43
Div に追加 44 div要素に対して、 次の通りスタイルを追加する。
ボックスサイズ ボックスサイズ=マージン+ボーダー+パディング+コンテントであり、 高さ=上下マージン+上下ボーダー+上下パディング+height 幅=左右マージン+左右ボーダー+左右パディング+width で求められる 45
ボックスサイズの計算 今回の場合、div要素のボックスサイズは 高さ=20px+2px*2+20px+100px=144px 幅=0px+2px*2+10px*2+300px=324px ←このように表示されるはず 50px 324px 144px
46
結果 実際にはこうなる。 何故? 47
マージンの相殺の例外 実は、親要素に対して以下のスタイルを適用すると子要素との マージンの相殺が起こらない。 1. border(値が0以外) 2. padding(値が0以外) 3. overflow(値がhidden または
scrollの時) 4. position(値がabsolute または fixedの時) 他、floatプロパティを使用した場合も例外となる(次回解説) 48
解説 h1-div間のマージンは、p要素の下マージン が適用されて30pxとなる。 div内のp要素のマージンは相殺されないので、 ボーダーから50px下にp要素が表示される。 ボックスサイズは先ほど求めた通り。 49
box-sizing width , height プロパティで指定するボックスサイズの大きさの算出方 法を変更する際に使用する。 content-box : 初期値。パディング、ボーダーを幅と高さに含めない
padding-box : パディングを幅と高さに含める(ボーダーは除く) border-box : パディングとボーダーを幅と高さに含める 50
マージン ボーダー パディング つまり 1. content-boxの場合 コンテント マージン ボーダー+パディング +コンテント
width height width height 2. border-boxの場合 51
つまり box-sizing: border-box; と指定した場合、ボックスサイズの計算は 高さ=上下マージン+height 幅=左右マージン+width これだけで良い。 52
position ボックスの配置方法を指定する。 static : 初期値。top などの位置指定プロパティが適用されない。 relative :
相対位置に配置する。 absolute : 絶対位置に配置する。 fixed : 絶対位置に配置し、なおかつスクロールしても動かない。 53
position 値にstatic以外を指定した場合、以下のプロパティを併用して位置を指定する。 top : 上方向に対する基準位置からの距離 bottom : 下方向に対する基準位置からの距離
left : 左方向に対する基準位置からの距離 right : 右方向に対する基準位置からの距離 54
position : relative; 30px 値がstaticである時の位置を基準位置とする。 適用 30px(top) 30px(margin) 30px(left) 55
position : absolute; 30px 上位階層の要素で直近のposition: static; でない要素を基準位置 とする。 適用 30px(top)
20px(margin) 30px(left) 56
position: fixed; 最初の表示位置はabsoluteと同様だが、画面上に固定される。 (スクロールしても位置が変わらない) 57
おしまい 次回は続けてCSSのプロパティです 58