Zenn
🐕

[HTML・CSS】復習メモ

2024/02/07に公開
CSS
HTML
tech

HTML

HTML の基本テンプレートを自動入力

!

!を入力して予測変換が出た状態でTabを押す

結果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>

ブラウザは<!DOCTYPE html>を読み込むことによって、
このファイルが html ファイルであると認識する

head タグ

メタ的な情報を格納する

  • 文字コード
  • 画面の情報

body タグ

文字、写真、動画などを表示させる

タグ

大きく 2 種類

  • 開始タグ(<div/>のようなものは空タグという)
  • 終了タグ
<div>hoge</div>

インライン要素とブロック要素

インライン要素

ヨコに並ぶ
タテヨコの大きさを設定できない

<span>hoge</span>
<span>hoge</span>

出力

hogehoge
配置を変更したい

親要素にtext-centerなどをつける

ブロック要素

タテに並ぶ

<div>hoge</div>
<div>hoge</div>

出力

hoge
hoge
配置を変更したい

margin を利用する
例: margin-auto

ややこしい css 記法

&

.

# A
.container__btn.btn--filled:hover {
  color: white;
  background-color: black;
  margin-top: 30px;
}

# B
.container__btn .btn--filled:hover {
  color: white;
  background-color: black;
  margin-top: 30px;
}

A は container_btn クラスと btn--filled クラスが同じエレメントにあれば発動する。

B は container_btn クラスのついた要素の子階層以下に btn-filled クラスがある場合、子以下の要素が発動

position

<default>
position:static

position:relative

position:absolute

position:fixed

position:sticky

absolute の親に relative があると、それに対して top/left がかかる
もし relative の要素がないなら window に対して top/left がかかる

z-index

position が static 以外がかかっているものに対して有効
値が大きいほど上側に行く

stack context

  1. root context
  2. local context
    • z-index の値が設定(auto の場合は条件を満たさない)
    • position が relative/absolute

stack context に対して、重ね合わせが起こる

position:absolute と flex の使い分け

要素同士が重なる場合はabsoluteを使う。
そうでないならflexを利用

Discussion