【CSS・学習ログ5】display・positionプロパティ

教材：侍テラコヤ『HTML/CSSの基礎を学ぼう』https://terakoya.sejuku.net/programs/51/chapters

displayプロパティでできること

「要素を表示・非表示する」「要素を縦並び・横並びにする」など、表示形式を指定することができるプロパティ。

指定できる主な値

block	縦並び
inline	横並び
inline-block	横並びだが、bloclと同じような性質
none	非表示

(1)block

p要素は初期値がblockなので、自動で縦に並んでいく。
width、height、padding、marginなど幅や高さ、余白を設定できる性質を持つ。

#first-paragraph {
	padding: 100px;
	background-color: yellow;
}
#second-paragraph {
	margin:  100px;
	background-color: orange;
}
#third-paragraph {
	padding: 50px;
	margin: 50px;
	background-color: pink;
}

プロパティの初期値

block	h1～h2,p,div,ul,ol,form,main,header, footer,section,nav,article,aside,body,htmlなど
inline	a,span,img,iframe,video,label,brなど
inline-block	input,button,textarea,selectなど
none	head,title,meta,link

(2)inline

span要素は初期値がinlineなので、自動で横に並んでいく。
親要素の幅を超えた場合は自動で折り返される。
幅と高さは指定できないが、左右の余白のみ調節ができる。上下左右に指定を入れた場合は、左右にのみ値が適応される。
paddingで上下に余白を取るとレイアウトが崩れてしまう可能性があるため、指定は左右のみにする。

p {
	background-color: yellow;
}
#first-span {
	margin: 20px;
	background-color: lightblue;
}
#second-span {
	margin: 30px;
	background-color: lightgreen;
}
#third-span {
	margin: 40px;
	background-color: lightgrey;
}

(3)inline-block

初期値blockであるdiv要素にinline-blockを指定すると、横並びに表示される。

#first-div {
	display: inline-block;
	width: 100px;
	height: 100px;
	padding: 10px;
	margin: 10px;
	background-color: lightblue;
}
#second-div {
	display: inline-block;
	width: 100px;
	height: 100px;
	padding: 20px;
	margin: 20px;
	background-color: lightgreen;
}
#third-div {
	display: inline-block;
	width: 100px;
	height: 100px;
	padding: 30px;
	margin: 30px;
	background-color: lightgray;
}
#fourth-div {
	width: 100px;
	height: 100px;
	padding: 40px;
	margin: 40px;
	background-color: yellow;
}

(4)none

要素を非表示にするプロパティ。

#first-paragraph {
	background-color: yellow;
}
#second-paragraph {
	display: none;
	background-color: orange;
}
#third-paragraph {
	background-color: pink;
}

positionプロパティでできること

「要素をどのように配置するか」決めるためのプロパティ。

static	配置方法を指定しない(初期値)
relative	本来の表示位置を基準にした相対位置
absolute	親要素を基準にした絶対位置
fixed	画面を基準にした絶対位置(スクロールしても位置が固定される)

基準からの具体的な値は以下のプロパティで指定する。

• topプロパティ：上からの距離を指定
• bottom：下からの距離を指定
• left：左からの距離を指定
• right：右からの距離を指定

(1)relative：本来の表示位置が基準

#first-div {
	width: 100px;
	height: 100px;
	background-color: orange;
}
#second-div {
	width: 100px;
	height: 100px;
	background-color: yellow;
}
#third-div {
	position: relative;
	top: 50px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: pink;
}

(2)absolute：親要素が基準

基準にしたい親要素にはrelativeを設定しておく。

.parent {
	position: relative;
	height: 400px;
	background-color: lightgray;
}
#first-div {
	width: 100px;
	height: 100px;
	background-color: orange;
}
#second-div {
	width: 100px;
	height: 100px;
	background-color: yellow;
}
#third-div {
	position: absolute;
	top: 50px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: pink;
}

(3)fixed：画面が基準

.parent {
	height: 2000px;
	background-color: lightgray;
}
.child {
	position: fixed;
	bottom: 20px;
	left: 100px;
	width: 100px;
	height: 100px;
	background-color: orange;
}
.background {
	height: 2000px;
	background-color: honeydew;
}

---