HTML・CSS備忘録🍅Vol1

Last updated at 2025-05-02Posted at 2025-05-01

まさかのまさか、数年ぶりにCSSを触ることになりました✍🏻
そこで今回は、久しぶりに勉強を再開して、つまづいたことや覚えておきたいことをつらつらと書いていきます。

あ、ちなみにテキストはこちら。結構よかったです🧚🏻
PXXと書いてあるところは、このテキスト内で内容が書かれているページの数字となります。

HTML

基礎知識

<h1 id="id1">
    かちかちやま
</h1>

要素：h1のタグ全体
- 要素名：h1
属性（プロパティ）：id="id1"
- 属性名：id
- 属性値：id1
リンクについて
- アンカーリンク：ウェブページ内の特定の位置へ直接ジャンプできるように設定されたリンク

ブロックレベルとインライン

ブロックレベル要素

1つのまとまった単位となっているひとかたまり（見出しや段落）
常に改行されて縦につまさる
幅は横に広がる（デフォルトで横幅100%）
子には、インライン要素もブロック要素も入れることができる
注意点
- pタグの中に他のブロック要素は入れない

section
h1〜h6
hgroup: 見出しのグループ化
p
blockquote: 引用文
pre: 整形済みテキスト
div: 汎用ブロックレベル要素

インライン要素

ブロックレベルの中に入っているテキストの一部分
改行されず横に並ぶ
幅・高さの指定は基本的にできない
中身の幅にフィット
ブロック要素は子には入れられない

img
br 
em: 強調されている部分
strong
q: 引用文、「」になる
cite: 作品のタイトル
code: ソースコード
small: 付帯情報や注意
span: 汎用インラインレベル要素　などなど（他P69）

ChatGPTが比較表出してくれた！
優秀すぎる👏🏻

比較項目	ブロック要素	インライン要素
表示形式	常に改行されて表示される	改行されず横に並ぶ
幅の扱い	デフォルトで横幅100%	中身の幅にフィット
高さの扱い	内容に応じて広がる／`height`指定OK	内容に応じて広がる／`height`は効かない
幅・高さの指定	`width` / `height` 指定できる	基本的に指定できない（一部可能）
子要素に入れられるもの	ブロック要素・インライン要素どちらもOK	原則としてインライン要素のみ（HTML5では多少緩和）
margin / padding の効き方	上下左右すべて効く	上下には効かないことが多い（ブラウザによる）
displayでの切り替え	`display: inline;` にすればインライン化できる	`display: block;` にすればブロック化できる
応用	`inline-block`で中間的な表示形式が可能	同上：`inline-block`で幅・高さ指定OKにできる
注意点	`<p>`の中にブロック要素を入れるのはNG（HTML仕様違反）	`<span>`で囲んだ中に`<div>`など入れるのは非推奨

属性について

属性名	よく使うタグ	どんなときに使う？（意味）
`id`	すべてのタグ	1つだけの名前をつける。CSSやJSで特定の要素を操作したいとき。
`class`	すべてのタグ	複数の要素に名前をつけて、グループでまとめて操作できる。
`href`	`<a>`	リンク先のURLを指定する。
`src`	`<img>`など	画像や動画のファイル場所を指定する。
`alt`	`<img>`	画像が表示できないときに出る代わりのテキスト。
`title`	すべてのタグ	マウスを乗せたときに出てくる説明文（ツールチップ）。
`target`	`<a>`	`_blank`にすると新しいタブでリンクが開く。
`type`	`<input>`	入力欄の種類（例：`text`、`password`、`email`など）。
`value`	`<input>`	入力欄やボタンの中の初期値を指定。
`name`	`<input>`	フォームで送信するときのデータ名（サーバー側で使われる）。
`placeholder`	`<input>`	入力欄に薄く表示されるヒント文字。
`checked`	`<input type="checkbox">`	最初からチェックを入れておく。
`disabled`	フォームタグ	選択や入力ができなくなる。
`required`	フォームタグ	入力が必須になる（空だと送信できない）。

セクションについて

名	意味	覚え方
`section`	一般的なセクションを定義し、文章や節を示すもの	見出し（h1〜h6）をつけられるような区切り。説明書の章や節みたいな感じ。
`article`	独立した内容のまとまり	ニュースやブログ記事など、サイト内で自己完結していて、それ自体が独立したコンテンツとして成り立つもの。

💡 まとめ：どう使い分けるか？

考えること	使う要素
「このまとまり、ページ外に出しても意味が通じるか？」	→ YES → `<article>`
「このまとまり、見出しがついて1つの話題を語ってるだけか？」	→ YES → `<section>`

画像・動画・音声関連

画像

imgについて

src 画像のURL 必須
alt 代替テキスト
width 幅
height 高さ

ディセンダについて

imgを設定すると、下に余白ができることがある
→これは　imgタグがインライン要素だから存在する
→インライン要素は文字を表示するために確保される領域のため、下にはみ出る「しっぽ」も確保している
→画像にはしっぽがないので、隙間ができてしまう
→解決するためにvertical-alignを設定する　P119

CSS

基礎知識

セレクタ：CSSをどの要素に対して適用するかを指定するもの
セレクタの組み合わせ方

ユニバーサルセレクタ　OR　タイプセレクタ
　　　　　　　　　　　＋
クラスセレクタ　OR IDセレクタ　OR 擬似クラス　OR 属性セレクタ

- セレクタは、結合子でいくつでも指定できる
- 擬似要素は、セレクタ全体の最後尾に1つだけ指定できる

セレクタの優先順位
- !important のついている指定は最優先
- 使用しているセレクタの種類から優先度を計算
- 計算結果の優先度が同じだった場合、後の指定を優先

→使用しているセレクタの種類から優先度を計算について　P110

優先度は「ポイント（数字）」で考えられていて、セレクタの種類ごとに重み（点数）が違う
覚え方のコツ：「ID ＞クラス＞要素」

セレクタの種類	優先度ポイント	例
インラインスタイル	1000点	`<p style="color: red;">`
IDセレクタ（`#id`）	100点	`#header`
クラス（`.class`）属性（`[type="text"]`）擬似クラス（`:hover`など）	10点	`.btn`, `[type="text"]`, `:hover`
要素セレクタ（`div` など）擬似要素（`::before`など）	1点	`div`, `p`, `::after`
ワイルドカード（`*`）	0点	`*`（ほぼ優先度なし）

例）同じ<p>タグにすべて当たるとしても…
#mainが最も強い → 緑になる！
/* 優先度：10点 */
.btn {
  color: blue;
}

/* 優先度：1点 */
p {
  color: red;
}

/* 優先度：100点 */
#main {
  color: green;
}

結合子

セレクタ1>セレクタ2　セレクタ1の子要素であるセレクタ2
セレクタ1+セレクタ2　共通の親要素を持つ要素の中で、「セレクタ1」の直後にある「セレクタ2」
 /*  h2直下にあるpタグにスタイルを設定、その後のp要素はすぐ後ろではないので対象外。*/
 h2 + p {
  color: green;
  font-weight: bold;
}

<h2>タイトル</h2>
<p>この段落だけが緑色で太字になります。</p>

<p>この段落は無関係なので普通の表示です。</p>

セレクタ1~セレクタ2　共通の親要素を持つ要素の中で、「セレクタ1」の後にある「セレクタ2」

セレクタについて

タイプセレクタ：要素名をそのまま使って指定する（h1とか）
ユニバーサルセレクタ：*
idセレクタ
擬似クラス：後述＋結合子
属性セレクタ：後述
擬似要素：後述

4.擬似クラス

ある要素が特定の状態にあるとき限定して適用する
優先順位があるので、指定順序に注意（CSSはあとの指定だけが有効となるため）-> 下記の順番でかこ。

使用頻度が高い4つ
要素:link リンク先をまだ見ていない状態のa要素
要素:visited リンク先をすでに見た状態のa要素
要素:hover カーソルが上にある状態の要素　//カーソルがある前提なので、スマホ・タブレットでは無効である
要素:active マウスのボタンなどが押されている状態の要素

式擬似クラス

式にはodd（奇数）/even（偶数）のキーワード、数字のみも可

要素:nth-child(式):先頭からX個目の要素からXXおきに適用
要素:nth-last-child(式):最後からX個目の要素からXXおきに適用
要素:nth-of-child(式):先頭からX個目の要素からXXおきに適用（同じ要素の要素のみ対象）
要素:nth-last-of-child(式):先頭からX個目の要素からXXおきに適用（同じ要素の要素のみ対象）

簡単確認CSS
/* ① :nth-child(2n) → 先頭から偶数番目のすべての要素に */
li:nth-child(2n) {
  background-color: lightblue;
}

/* ② :nth-last-child(2) → 最後から2番目の要素に */
li:nth-last-child(2) {
  background-color: lightgreen;
}

/* ③ :nth-of-type(3n) → 同じタグ（li）のうち3の倍数番目に */
li:nth-of-type(3n) {
  border: 2px solid orange;
}

/* ④ :nth-last-of-type(1) → 同じタグ（li）のうち最後の要素に */
li:nth-last-of-type(1) {
  font-weight: bold;
  color: red;
}

兄弟擬似クラス

first-child: 最初の要素
last-child:　最後の要素
first-of-child:　最初の要素（同じ要素名の要素のみ対象）
last-of-child:　最後の要素（同じ要素名の要素のみ対象

/* 3番目以降かつ奇数番目 */
li:nth-child(n + 3):nth-child(odd) {
  background-color: lightpink;
}

/* 最初と最後のアイテムを強調 */
li:first-child,
li:last-child {
  background-color: gold;
  font-weight: bold;
}

/* 3の倍数のliに下線 */
li:nth-of-type(3n) {
  border-bottom: 2px dashed gray;
}

その他擬似クラス

要素:focus　選択された要素
要素:checked　チェックされた要素
要素:disabled　
要素:enabled
要素:root　html要素に設定する、CSS変数を使う時に活用される
要素:empty　要素が子要素を持たない（つまり、内部が空である）場合にスタイルを適用
 /* 中身が空のdivに背景色を適用 */
    div:empty {
      background-color: lightcoral;
      color: white;
      text-align: center;
      padding: 20px;
    }
要素:target　URLの最後が「＃XXX」となっているリンクをクリックした対象要素
要素:lang（言語コード）
要素:not（セレクタ）指定した要素（セレクタ）を除外する
/* div以外の要素に背景色を付ける */
*:not(div) {
      background-color: lightgray;
    }

5.属性セレクタ

特定の属性が指定されている要素、または特定の属性に特定の値が指定される要素を適用対象とするセレクタ

[属性名]             ← 属性がある要素すべてに適用  
[属性名="値"]        ← 属性の値が完全一致する要素に適用  
[属性名~="値"]       ← 値がスペース区切りの中に含まれる  
[属性名|="値"]       ← 値が「値」または「値-〜」で始まる  
[属性名^="値"]       ← 値の先頭が「値」で始まる  
[属性名$="値"]       ← 値の末尾が「値」で終わる  
[属性名*="値"]       ← 値の中に「値」が含まれている

6.擬似要素

タグがつけられない範囲に対してCSSを適用するセレクタ

要素::first-line　ブロック要素の1行目
要素::first-letter　ブロック要素の1文字目
/* pタグの１行目にstyleを追加*/
p::first-line {
  color: blue;
  font-weight: bold;
}
要素::first-before　要素内容の先頭にCSSで要素内容を追加
/* pタグの先頭にstyleを追加*/
p::before {
  content: '👉 ';
  color: green;
}
要素::first-after　要素内容の末尾にCSSで要素内容を追加

背景について

body {
  background-color: pink;
  background-image: url(images/lavender_flower.jpg); //背景の画像
  background-repeat: no-repeat;　//背景の画像をどのように表示させるか
}

テキストプロパティについて

フォント関連

-font style P84が指定できる
-font-weight
-font-size 必須
-line-height P80
-font-family 必須

※表示順序について、text-shadow　P86

text-align

ブロックレベル要素にしか指定できない（ブロックレベルに指定して、中のインライン要素全体が設定される）

letter-spacing

文字間隔

text-indent

１行目のインデントを下げる

🐈‍⬛ボックス関連プロパティについて

HTMLのそれぞれの要素には、ボックスと呼ばれる四角い表示領域が用意される
ボックスの初期状態は、要素の種類やブラウザの種類によって異なる
- 初期状態の違いをなくす目的で用意されたCSSをリセットCSSという

┌───────────────────────────────┐
│         外側の余白（Margin）        
│   ┌───────────────────────┐   │
│   │     境界線（Border）          
│   │   ┌───────────────────┐   │
│   │   │   内側の余白（Padding）  ← 背景色が適用される範囲
│   │   │ ┌─────────────────┐ 　│
│   │   │ │ 表示領域（Content）   │ 
│   │   │ └─────────────────┘   │
│   │   └───────────────────┘   │
│   └───────────────────────┘ 　│
└───────────────────────────────┘
- margin：他の要素との外側のすき間
- border：枠線（太さ・色など指定できる）
- padding：内側の余白（この中に背景色が塗られる）
- content：実際にテキストや画像が表示される領域

※インライン要素のボックス表示

　　　　　　　　 ┌──────────────┐ 
              │  Padding     │
              │ ┌──────────┐ │
              │ │ Content  │ │
              │ └──────────┘ │
              └──────────────┘
インライン要素のボックスが「行の一部」として現れます。
（上下marginは基本的に無視される
　paddingは効くけど行ボックスには影響しにくい）

margin・paddingの設定

1つの値を設定

/* 上下と左右に異なる余白を設定 */
margin（padding）: 20px 10px; /* 上下20px、左右10px */

2つの値を設定

/* 上下と左右に異なる余白を設定 */
margin（padding）: 20px 10px; /* 上下20px、左右10px */

3つの値を設定

/* 上、左右、下に異なる余白を設定 */
margin（padding）: 20px 10px 30px;  /* 上20px、左右10px、下30px */

4つの値を設定

/* 上、右、下、左に異なる余白を設定 */
margin（padding）: 20px 10px 30px 40px; /* 上20px、右10px、下30px、左40px */

ブロック要素の場合、上下のmarginが隣接している場合、重なり合う（左右は重なり合わない）
- 10pxと10pxが重なり合っていると、計10px
- 10pxと20pxが重なり合っていると、計20px
インライン要素には横のmargin/paddingは効くが、縦（上下）は非推奨かつ非安定。
- インライン要素の上下スペースを調整したいときは、line-height や padding を使おう！

border

borderプロパティ

border: [太さ] [スタイル] [色];

省略すると、初期値が適用される

border: 2px none（styleの初期値） currentColor（色の初期値）;

要素を表示する領域（Content）について

プロパティの種類は以下。(P112)

- width
- height
- min-width,height
- max-width,height

パーセンテージで高さを指定する場合の注意
- 親要素に高さを指定しない、正しく指定されない

*NG
/*divのみに設定する*/
div {
  height: 100%;
  background-color: pink;
}

*OK
/*divとbodyに設定する*/
/*bodyの親要素はhtmlなので、ここもきちんと設定する*/
html,
body {
  height: 100%;
}

div {
  height: 100%;
  background-color: pink;
}

✍🏻備忘録　bodyに画像も設定できる！

/*どこかで拾った画像です*/
html,
body {
  background-image: url(images/443308-PF9228-827.jpg);
  background-repeat: no-repeat;
  font-family: 'Courier New', Courier,
    monospace;
  height: 100%;
}

div {
  height: 100%;
  background-color: pink;
}

widthとheightはそのままだとボックスのContentのみに設定される。
それをボーダーまで広げて適用するにはbox-sizingを設定しよう！

HTML
 <div id="d1">
      box-sizing: content-box
    </div>
    <div id="d2">
      box-sizing: border-box
    </div>

CSS
iv {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin-bottom: 20px;
}

#d1 {
  box-sizing: content-box;
  background-color: lightblue;
}
/*全部で幅200px → 中身が調整されて小さく見える*/
#d2 {
  box-sizing: border-box;
  background-color: lightgreen;
}

borderの角を丸くするにはborder-radiusを設定する　P139

background

背景画像の表示位置を指定する　background-position P141

/*背景画像を真ん中に表示させる*/
html,
body {
  background-image: url(images/lavender_flower.jpg);
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
}

height:100%が必要な理由
- bodyが空=contentが0=bodyの高さが0と考えて、高さの真ん中に設定してしまう
- それを防ぐために高さを設定するよ。
全部まとめて設定できるbackgroudプロパティ
- 各プロパティの順番は決まっているけど、必ずしも全部書く必要はない。書かない部分はデフォルト値が使われるから、必要なものだけ書けばOK！
- positionとsizeを両方指定したいとき
  - はじめにpositionの値をかき、/ を区切ってsizeをかく

background: [color] [image] [repeat] [position] [attachment] [size];

フロートについて

ある要素を左または右に寄せて配置し、その反対側に後続の要素が回り込むようにした状態のこと

- left
　左側に寄せて配置し、その右側に後続の要素を回り込ませる
- right
　右側に寄せて配置し、その左側に後続の要素を回り込ませる
- none
　フロートしていない通常の状態に戻す

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up