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
第07回Web講座
Search
北海道科学大学 電子計算機研究部
June 27, 2017
Programming
0
38
第07回Web講座
float z-index
北海道科学大学 電子計算機研究部
June 27, 2017
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 Programming
See All in Programming
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
250
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
230
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
110
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
320
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
190
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
160
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
550
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
340
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Embracing the Ebb and Flow
colly
86
4.7k
The Invisible Side of Design
smashingmag
299
51k
Gamification - CAS2011
davidbonilla
81
5.3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Transcript
第七回Web講座資料 CSSのプロパティ4
概要 floatプロパティ z-indexプロパティ
float 要素の回り込みを指定する 値は以下の4つ。 left : 要素を左に寄せ、右余白部に下のブロックを回り込ませる right :
要素を右に寄せ、左余白部に下のブロックを回り込ませる none : 回り込みをしない(初期値) inherit : 親のfloatプロパティの値を引き継ぐ
clear floatプロパティによる回り込みを解除する。 値に設定できるのは以下の3つ。 left : 「float: left;」による回り込みを解除する right
: 「float: right;」による回り込みを解除する both : 全てのfloatプロパティの回り込みを解除する
floatプロパティの注意点 1. floatプロパティを指定する要素には 必ずwidth/heightを指定する 2. floatプロパティを指定した要素の後には clearプロパティを指定する
書いてみよう 1. Float.html float.css ファイルを作成し、↓tabキー class に left, right, clear
を書き足し, スタイルシート適用タグ↓
書いてみよう
結果
入れ替えて実験してみる 右寄せ 反転
結果 右寄せ:.leftが先に適用されている。 反転:要素が移動する(回り込むとも 実験し終わったら戻してください。
書き足してみよう p.leftとp.rightの間に新たにp.leftを追加する
書き足してみよう ついでに、見やすくするためにcssの.leftセレクタに↓の通り追加
結果 .leftが二つ、ボーダーに点線が入る。
書き足してみよう 更に、.left に marginを追加してみる 上0 左右20 下50
結果
解説 floatプロパティで左右に並ぶ場合、マージンの相殺は起きない。 50px 各20px 40px 20px divの 左端 各マージン→
書き足してみよう ここで、.clear[灰色] にmargin-topを指定すると、
結果 この通り、変わらない。マージンの相殺は起こっていない。
解説 「clearプロパティ」と「marginプロパティ」を 一つの要素に併用した場合、マージンは無効となる。
ただし .clearセレクタに対してさらに「float: left;」を追加すると、
結果 さっきより間隔が広くなる。
解説 floatプロパティが適用された要素同士 である場合、上下に隣接していても マージンの相殺は起こらない。 つまり、.leftの下マージン50pxと .clearの上マージン80pxの合計値、 130pxが要素同士の間隔となる。 130px 50px 80px
floatとmargin 相殺されないケース 1. floatプロパティで左右どちらかに寄っている要素が複数ある場合、 それらの左右マージンは相殺されない 2. floatプロパティを適用されている要素同士が上下に隣接している場合、 それらの上下マージンは相殺されない 3. clearプロパティとmargin/margin-topプロパティを同時に同じ要素に
対して適用した場合、その要素の上マージンは適用されない ※マージンが相殺されない →それぞれの要素のマージンの合計値になるということ
書き足してみよう 今更だが、親要素であるdivの境目が分かりにくいのでborderを設定 ←理想
結果 ボーダーがつぶれて表示されてしまう。 ↑現実
解決策 つまりは、このどちらかを実行すればよい 1. divセレクタに↓のとおり追加 2. .clearセレクタから↓を削除 ※ただし、上マージンは適用されない コメントアウト 「ctr+/」
解説 floatプロパティを適用すると、 「高さ」を得る。 →同じ高さの要素同士のマージン計算は可能。名前通り「浮かんだ状態」と捉えてもいい。 しかし、通常の親要素は高さを認識できないので、「高さ0」として扱われる。 対策として、 floatプロパティを適用している要素の後に適用していない要素を入れる (要するに.clear)
親要素に対して「overflow: hidden;」と指定する
結果
floatここまで
z-index 要素の重なりの順序を指定する。 positionプロパティでstatic以外が指定されている要素に適用される。 値は整数値で指定し、0を基準(背景)にして、値が大きいものほど要素 が重なった時に上に表示される 値には負の数も指定できる。
z-index の値の指標 “The Interactive Advertising Bureau”によれば、 0 - 4999:
主なコンテンツ、標準的な広告 5000 - 4999999: 種々の広告・ポップアップなど 5000000 - 5999999: ドロップダウンUI、サイト内ナビゲーションUI、固 定ヘッダや固定フッタなど (Expanding Site Navigation Elements) 6000000 - 6999999: 画面全体を覆う要素 (Full-page Overlays) ※広告業界における指標なので、これに必ず従わなければいけな いというものではない
書いてみよう 1. 「z-index.html」を作成し、↓の通り記述して展開 ※”$”は連番を表す。要素を繰り返したとき、その回数分の数字 に置き換わる 2. head内に→の通り記述して展開 3. cssフォルダ内に「z-index.css」を作成。次のスライド通りの記述を ページ下にコピペし用意してます。
書いてみよう
結果 z-indexの値が大きい順に、上に表示される
書き換えてみよう .No1セレクタのz-indexの値を60に変更すると、このように表示される。
書き換えてみよう .No5セレクタのz-indexの値を25に変更すると、このように表示される。
書き足してみよう 1. z-index.htmlのp.No5の後に図の文を記述して展開 2. z-index.htmlに次のスライドの通り追加
書き足してみよう
結果 z-indexの値が大きい方が前に表示される ので、大体こんな感じで表示される (各要素の黒字はz-indexの値)
結果 ・・・はずなのだが、実際にはこのように表示される
スタックコンテキスト Z軸方向(要素同士が重なる方向)の階層構造を形成するグループのこと。 スタックコンテキストを生成するのは、以下の二つ。 1. ルート要素(html要素) 2. z-index と position(static以外)を指定した要素 スタックコンテキストの内部に新たなスタックコンテキストを含むことも可能。
スタックコンテキスト 重要なのは、z-indexで指定した値(=スタックレベル)は、 同一スタックコンテキスト内でしか効果が無いということ。 →スタックコンテキストを生成する親要素内の子要素にz-indexを指定しても、 親要素のスタックコンテキスト内でしかz-indexの比較はされない。
スタックコンテキスト イメージ html p.No1 p.No2 p.No3 p.No4 p.No5 div.No6 p.No6-2
p.No6-1 スタックレベルを無視した場合、このように図示できる。
スタックコンテキスト イメージ スタックレベルを比較できるのは同一スタックコンテキスト内の 要素同士だけ、つまりこの例の同じ色の要素同士だけである。 p.No1 (60) p.No2 (20) p.No3 (30)
p.No4 (40) p.No5 (25) div.No6 (35)
つまり、htmlの作ったスタックコンテキスト内でこのよう に積み上げられることになる。 p.No2 (20) p.No5 (25) p.No3 (30) div.No6 (35)
p.No4 (40) スタックコンテキスト イメージ p.No1 (60)
そのあとで、div.No6の生成したスタックコンテキスト内の スタックレベルが比較される。 p.No2 (20) p.No5 (25) p.No3 (30) div.No6 (35)
p.No4 (40) スタックコンテキスト イメージ p.No1 (60) p.No6-1(15) p.No6-2 (55)
親要素がスタックコンテキストを持っている場合、 親要素が絶対であり、子要素にどんなスタックレベルを設定しても 上の階層のスタックレベルとの比較はできない。 p.No2 (20) p.No5 (25) p.No3 (30) div.No6(親)
(35) スタックコンテキスト イメージ p.No6-1 (15)(子 p.No6-2 (55)(子 p.No4 (40) p.No1(親) (60)
疑問 では、右に示した通りに表示するためには どうしたらよいのか?
答え 親要素(div.No6)がスタックコンテキストを生成しないようにすればよい。 div.No6に対して、以下のようにスタイルを指定すればスタックコンテキス トを生成しない。 1. z-index: auto; と指定する 2. position:
static; と指定する
書き換えてみよう
結果
おしまい 次回はJavaScriptです。