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
52
第6回ネットワーク講座
北海道科学大学 電子計算機研究部
June 06, 2016
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
37
第11回Network講座2019
densan
0
65
第10回Network講座2019
densan
0
34
第09回Network講座2019
densan
1
130
第08回Network講座2019
densan
0
40
第07回Network講座2019
densan
0
40
第06回Network講座2019
densan
0
47
第05回Network講座2019
densan
0
41
第04回Network講座2019
densan
0
62
Other Decks in Education
See All in Education
「ロータリーって何?」と訊かれたら:国際ロータリー 2720地区 2023-2024年度 公共イメージ部門 副委員長・ 熊本南ロータリークラブ・ 株式会社ヒデコーポレーション 代表 大津 英敬 氏
2720japanoke
0
530
Monaca Educationを活用したプログラミング授業実践
asial_edu
0
150
情報Iの「縦糸」と「横糸」を意識したプログラム教育の実践
asial_edu
0
150
D&I推進レポート〜テクノロジー分野のジェンダーギャップとその取り組みについて〜
codeforeveryone
1
420
自己紹介 / who-am-i
yasulab
2
3k
Interactive Tabletops and Surfaces - Lecture 7 - Next Generation User Interfaces (4018166FNR)
signer
PRO
1
1.2k
2 занятие. Бизнес-модели и метод наблюдения PINT/SIRP #ideaNN 26.01.2024.
karlov
0
140
Earthquake and Disaster Prevention Information for UTokyo International Students
utokyoissr2360
0
520
【業務イメージスライド】コンサル_メルカリの成長戦略_セナカインターン
cenaka_intern
0
190
Best Wedding day perfume
vicjon
0
240
千葉県印西市立・原山小学校における新たな学び「情報探究の時間」実践報告』
codeforeveryone
1
480
Часто задаваемые вопросы
pnuslide
0
11k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
76
4.5k
Building Applications with DynamoDB
mza
88
5.6k
Building an army of robots
kneath
300
41k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
How to train your dragon (web standard)
notwaldorf
71
5.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
A designer walks into a library…
pauljervisheath
199
23k
Scaling GitHub
holman
456
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Code Review Best Practice
trishagee
54
15k
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のプロパティです