【メモ】CSSを始めて1週間で学習したこと

Posted at 2024-10-28

概要

普段はTypeScriptとNodeでバックエンドの勉強をしているが、そろそろフロント側の技術も学習すべきと思ったためCSSを勉強し始めた
YoutubeやMDN・Webサイトを覗き、CSSにおける汎用的な記法や考え方が少しつかめてきたため、備忘録としてまとめる

ブラウザに表示される文字やボタン、その他全ての要素は箱(ボックス)のような領域に囲われているという概念。ボックスモデル(MDN 2024/10/28参照)

以下のことをイメージしやすくなった

要素はコンテンツ・パティング・ボーダー・マージンの4つのレイヤーを持つ
子要素が参照する親要素の位置や大きさ
- top: 0やwidth: 100%など
positonのrelativeとabsoluteの参照/被参照の関係性
- absoluteをもつ要素は最も近いrelativeをもつ親を基準にする？
positionfixとstickyの基準
- 最も外側のタグ(<html>)を基準にする？

ブラウザの規定のCSSを消すためのCSSファイル
ブラウザ間の表示を統一するために使用する

利用者の端末の画面幅によって表示を変えること
@mediaで表示幅が規定以下・以上の時に適応するCSSを変えることができる

このcssを持つ親の子要素を横並びにする

.x {
    display: flex;
    flex-wrap: wrap;
}

等間隔で左右に配置

.x {
    display: flex;
    justify-conteint: space-between;
    flex-wrap: wrap;
}

左揃えのときはmargin-right, 右揃えのときはmargin-leftを使用する

.x {
    width: 90%; 
    margin: 0 auto; /*上下0 左右をwidthが親要素の幅に対して90%になるように自動調整*/
}

px数を指定する場合、特定の数の倍数に揃えるとレイアウトにメリハリが出るらしい

現在はこの程度しかわからないが、年末には適当に開いたウェブページの見た目を再現できるようにしたい