SlideShare a Scribd company logo
1 of 5
displayの使い方
a{ display: block;}
block
inline
inline-block
none
p、div、ul、dl、h1〜h6 などの初期値
a、span、img などの初期値
display: block; display: inline;
*要素が横までいっぱいに広がり
縦に並ぶ。
背景に色をつけると
端から端まで色がつく。
要素
要素
*要素が文字の大きさに
合わせた大きさで
横に並ぶ。
要素
要素
要素 要素
ブロックレベル要素 インライン要素
p、div、ul、dl、h1〜h6 など a、span、img など
display: block; display: inline;
要素
要素
要素
幅 width
高さ height
余白 padding
margin
指定できる
指定できる
指定できる
指定できない
指定できない
左右は指定できる
上下は指定できない
上下のpaddingは指定できるが❌
要素 要素 要素
block と inline をCSSで入れ替える
display:block;
display:inline;
display:none; とは?
ブラウザ上で非表示になる

More Related Content

More from sayoko miura (20)

Css selector
Css selectorCss selector
Css selector
 
Prevnext
PrevnextPrevnext
Prevnext
 
J query place
J query placeJ query place
J query place
 
This
ThisThis
This
 
Event.key
Event.keyEvent.key
Event.key
 
Readyevent
ReadyeventReadyevent
Readyevent
 
J query element.key
J query element.keyJ query element.key
J query element.key
 
J query ready2.key
J query ready2.keyJ query ready2.key
J query ready2.key
 
WhatsjQuery
WhatsjQueryWhatsjQuery
WhatsjQuery
 
Form
FormForm
Form
 
Web2 mission
Web2 missionWeb2 mission
Web2 mission
 
Html
HtmlHtml
Html
 
Table
TableTable
Table
 
上へ戻る
上へ戻る上へ戻る
上へ戻る
 
form
formform
form
 
Time datetime
Time datetimeTime datetime
Time datetime
 
ぶら下げインデント
ぶら下げインデントぶら下げインデント
ぶら下げインデント
 
CSSスプライト
CSSスプライトCSSスプライト
CSSスプライト
 
JQueryプラグイン
JQueryプラグインJQueryプラグイン
JQueryプラグイン
 
Figure
FigureFigure
Figure
 

Display