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

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

## displayプロパティでできること
「要素を表示・非表示する」「要素を縦並び・横並びにする」など、表示形式を指定することができるプロパティ。
##### 指定できる主な値
| | |
|-|-|
|block|縦並び|
|inline|横並び|
|inline-block|横並びだが、bloclと同じような性質|
|none|非表示|
### (1)block
p要素は初期値がblockなので、自動で縦に並んでいく。
width、height、padding、marginなど幅や高さ、余白を設定できる性質を持つ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/ea287ec0-4948-8ece-744f-fcaf46bfa87a.png)
```css
#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,<br>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で上下に余白を取るとレイアウトが崩れてしまう可能性があるため、指定は左右のみにする。
![スクリーンショット 2023-11-05 074330.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/c993d41d-ed8c-5078-80cd-770339c9ed98.png)
```css
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を指定すると、横並びに表示される。
![スクリーンショット 2023-11-05 080558.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/302fa2a9-328a-fb8e-68cb-4784496b6bf7.png)
```css
#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
要素を非表示にするプロパティ。
![スクリーンショット 2023-11-05 081035.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/8d26c1b0-d1b5-ad7b-ae02-7c792ed99d2e.png)
```css
#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：本来の表示位置が基準
![スクリーンショット 2023-11-05 092228.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/dfddddaf-6e68-e676-4a38-fffb3dae624c.png)
```css
#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を設定しておく。
![スクリーンショット 2023-11-05 094800.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/786c24b7-09d0-6dd0-17fd-57f9435d5d09.png)
```css
.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：画面が基準
![スクリーンショット 2023-11-05 095834.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/2b0cf075-b66a-c44e-8997-ace059213c64.png)
```css
.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;
}
```
<hr>