DISPLAYプロパティについて

DISPLAYプロパティの説明CSSでレイアウトをする時にdisplayの概念を押さえておくと、柔軟なレイアウトが出来る。すべての要素にはデフォルトでdisplayが設定されている。例：divはdisplay:block、spanはdisplay:inline

代表的な値blockinlineinline-blockなどがある。

BLOCKてきすとてきすと

てきすとてきすと

てきすとてきすと

INLINEてきすとてきすと てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと てきすとてきすと てきすとてきすと

INLINE-BLOCKinlineBlock

inlineBlock

inlineBlock

inlineBlock

Span(inline)

DISPLAY:BLOCKとは？

特徴縦に積まれていく幅 width と高さ height が指定できる横幅を指定しない時には横いっぱいに表示される上下左右に margin を指定できる上下左右に padding を指定できる

使ってみようタイム以下のレイアウトをdisplay:blockで、positionプロパティを使わず再現してください。

例：HTTP://CODEPEN.IO/TAKUHITO-H/PEN/ICXDC

使い道レイアウト全般、一番使う機会が多い

代表的な設定要素divやp、h1など

DISPLAY:INLINEとは？

特徴横に並んでいく幅 width と高さ height は指定できない。幅や高さは文字列の長さや文字の大きさなど、内容物のサイズ。左右だけ margin を指定できるpadding を指定できる。

使ってみようタイム以下のレイアウトをdisplay:inlineで、positionプロパティを使わず再現してください。

例：HTTP://CODEPEN.IO/TAKUHITO-H/PEN/LHSNJ

使い道テキストの装飾。

テキストの色を変えたり、大きさをかえたり。レイアウトにはまず使わない。

代表的な設定要素spanやb、strongなど

DISPLAY:INLINE-BLOCKとは？

特徴親要素の横幅を超えない限り、横に並んでいく幅 width と高さ height が指定できる上下左右に margin を指定できる上下左右に padding を指定できるvertical-align が指定できる。text-alignプロパティが効く

使ってみようタイム以下のレイアウトをdisplay:inline-blockで、positionプロパティを使わず再現してください。

例：HTTP://CODEPEN.IO/TAKUHITO-H/PEN/RGWTA

一言で言えば画像要素<IMG>みたいなもの

代表的な設定要素img要素（だけ？）

使い道（例）ページング例：隣合う要素同士の上下センタリング例：

http://codepen.io/takuhito-h/pen/iGFjd

http://codepen.io/takuhito-h/pen/ACbuc

ただ残念な特徴もあるmarginを指定していないのによけいな余白が空く

（ホワイトスペース）

例：HTTP://CODEPEN.IO/TAKUHITO-H/PEN/IGFJD

この余白を消す方法もあるけど、今回は触れません。

知りたい人はこちら

POSITIONプロパティについて

代表的な値static（初期値）relativeabsoluteなどがある。

STATIC（初期値）初期値、静的配置。

つまり通常のレイアウト。leftやtopといったプロパティは効かない。

例：HTTP://CODEPEN.IO/TAKUHITO-H/PEN/OLHWD

RELATIVE相対位置指定。

通常位置からleftやtopで指定した値の分だけ移動する。後に続く要素はrelativeで移動した要素があっても、初期位置

に要素があるようにふるまう。

例：HTTP://CODEPEN.IO/TAKUHITO-H/PEN/WNDAG

ABSOLUTE絶対位置指定。

基準となる位置（static以外のpositionが指定された要素）から、絶対値での位置を指定する。positionの中では一番重要な値。

例：HTTP://CODEPEN.IO/TAKUHITO-H/PEN/ZUEYD

もう少し説明特徴

blockでwidth未指定でも横幅いっぱいじゃなくなるほかの値と違い、absoluteが指定されたものはレイアウト上ないものとして扱われるそのため、他の要素と重なることが多々ある先祖要素で一番近い、positionの指定された要素が基準になる初期ではウィンドウ全体の左上が基準位置

以上で終わりです。

ご清聴ありがとうございました。