はじめに
独学プログラミング学習の3日目
忘れっぽいので備忘録代わりに残しておこうと思う
※人に見せる前提ではないよ
目標
- 簡単なページをサクっと作れるようになる
- Web上に自分のポートフォリオを公開
- アウトプットのスキルを身につける
CSSとは
プログラミング学習2日目でも軽く触れたけど，webサイトのデザインを作るための言語
今回はCSSでも土台になるpositionとdisplayについて勉強したのでアウトプットをば
potisonとは
positonとは，要素の位置を決めるためのプロパティ
- 位置を決めるには4つに方法がある
| プロパティ名 | 説明 |
|---|---|
| static | 初期値(ほぼ使わない) |
| fixed | 固定 |
| relative | 相対位置 |
| absolute | 絶対位置 |
ほぼ使わないstaticは割愛して，fixedから解説していく
fixed
fixedは画面の決まった位置に要素を固定させる効果がある
例えば，ヘッダーをページ上部に固定しておきたいときなどに使われる
relative
relativeは移動させたい対象が元々いた位置が基準となる
たぶん要素の左上が基準になると思う
また，relativeの特徴として要素を移動させても元あった要素分の空間が確保され続けるといったものがある
absolute
absoluteはウィンドウまたは親要素が基準となる
absoluteの特徴として，親要素にstatic以外が指定されている場合，親要素の左上が基準点となる
また，relativeと違い要素が移動したら元あった空間に別の要素が詰めて入る
要素のど真ん中に要素を置きたい
たぶんこんな感じ
動作確認はしていないです
/* 親要素 */.wrap{position:relative;}/* 子要素 */.inner{position:absolute;top:50%;left:50%;/*
* 上記までだと子要素の左上が中央に来るので，
* 子要素の半分だけ上と左に戻す
*/transform:translateX(-50%)translateY(-50%);}※iOSとかに対応させるときはwebkitとか使っていい感じにやる
displayとは
displayとは，要素の表示形式を指定するプロパティ
- たぶんよく使うdisplayプロパティの値
| 値 | 説明 |
|---|---|
| block | 縦に積み上がっていく |
| inline | 横に並んでいく |
| inline-block | 横に並んでいくけど，blockの特徴も持つ |
| flex | 横に並んでいく |
| none | なし |
詳しくは下で解説するので，どの値を設定したらどの方向に並ぶのかだけ覚えていればいいよ
block
display: blockは内部要素を包み込むタグの初期値だよ
div, p, ulなどの初期値はdisplay: blockになるよ
blockの特徴は以下のとおり：
1. 要素は横いっぱいに広がる
2. 要素が縦に積み上がっていく
3. 幅と高さが指定できる
4. 上下左右で余白を指定できる
5. text-alignやvertical-alignは指定できない
inline
display: inlineは中に要素が入らないタグの初期値だよ
主にspan, a, imgなどがあるよ
inlineの特徴は以下の通り：
1. 要素が横に並んでいく
2. 幅と高さが指定できない
3. 縦の余白が指定できない
4. text-alignとvertical-alignが指定できる
inline-block
display: inline-blockはblockとinlineのどっちの特徴ももっているよ
inline-blockの特徴は以下の通り：
1. 要素が横に並んでいく
2. 幅と高さが指定できる
3. 上下左右で余白を指定できる
4. text-alignとvertical-alignが指定できる
かっこいいボタンとか作るときによく見かける気がする
flex
display: flexはフレックスボックスを作るために指定する値だよ
フレキシブルの略で，曲げるって意味があるよ
最近使い勝手がよくなって，よく使われるようになったからモダンコーディングではこれを使うのかな？どうなんでしょう？
ともかく，レスポンシブとの親和性が高いという特徴を持っているよ
まずはフレックスボックスってなんぞや？ってなったので調べました
「親要素にdisplay: flexを設定した場合，親要素がフレックスコンテナになる．子要素はフレックスアイテムになって色々なレイアウトが設定できる」
・・・なんのことを言っているのかわからないけど，スゴイやつってことでいいかな？いいよね
ちょっと整理してみようと思う．
| 項目 | 説明 |
|---|---|
| display: flex | フレックスコンテナを指定 |
| flex-direction | 子要素の並ぶ方向を指定 |
| flex-wrap | 子要素を横並びにするか縦積みにするかを指定 |
ということらしい
上記の他にjustify-content，align-itemsというプロパティもあって，
この2つどちらも子要素同士をどの間隔で並べるかを指定するプロパティだよ
どっちがどっちかは多分文字で覚えるより実際に使って身体で覚えたほうが良さそう(脳筋)
おわり
今日はCSSのプロパティのpositionとdisplayについて勉強したよ
今までなんとなく適当に使ってたけど，結構間違った使い方してたみたい
flexに関してはまだ親要素のことしか調べてないから子要素も含めてflexだけで勉強しなおす必要ありそうかな
ともあれ，今日は疲れたからここまで
次回はJavaScriptをかじってみるよ