本日のプログラミング学習
HTML & CSS / 2hour
Aug / 46hour
Total / 71hour
通勤で読んでいる書籍
CSSーpositionの復習
模写をするにあたって、「自分の思った通りの場所に、要素を配置する」ということが非常に重要だと感じる。
改めて、positionプロパティを復習。
・そもそもpositionプロパティとは何か？
→ボックス要素の位置を指定する際に使用するプロパティ。
（インライン要素には使用できない。インライン要素にも使用する場合にはdisplayでblockかinline-blockにする必要がある）
・種類は主に4種類
static＝何も指定しないときはこれがデフォルトで選択されている。この値の時には、top/right/bottom/left、またz-index（要素の重なり）は適用されない。
relative=現在の位置を基準に、相対的な位置を指定する。「現在の位置」とはstaticを指定した位置を表す。
absolute=絶対的な位置を指定する。親要素にstatic以外の要素が指定されている場合には親要素の左上を基準に、親要素にstaticが指定されていない場合には、ウィンドウ全体の左上が基準となる。
fixed=絶対的な位置を指定するが、画面がスクロールされても位置は固定となる。
＊上記のことから、absoluteを使用する場合はその親要素にrelativeを記述しないとダメ。
・位置はどうやって指定する？
top/right/bottom/leftで指定する。
top: 15px;
left: 15px;
と指定すると基準となる左上から、上から15px、左から15pxとして位置を指定する。
基本的には、「top or bottom」+「left or right」の二つの組み合わせで指定する。
・要素の重なりはz-indexで指定
z-index: 数字;
で指定することで、要素間の重なり順序を指定できる。
数字が大きいほど要素は上に表示される。
＊指定する要素には、static以外の要素（主にrelativeとabsolute）を指定する必要がある。
コードサンプル
上記のコード結果
学習は全てウェブカツ！！というプログラミングスクールで学んでいます。
大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール[…]