HTML・CSSの学び直し。

Last updated at 2025-11-04Posted at 2025-05-19

HTML

タグ構成

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

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

属性について

属性は、タグに「もっと詳しい情報」を伝えるためのものです。
- タグに「付け足し説明」をしてあげるイメージ。

書き方

<tag 属性名="値">コンテンツ</tag>

属性名：何を指定するかの名前
値：その属性に与える具体的な情報

例

<a href="https://example.com">リンク</a>

→ href が「属性」で、「リンク先URL」を指定してる

よく使う属性

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

終了タグが不要な要素

HTMLには2種類のタグがあります。

1. 内容を持つタグ

開始タグと終了タグでコンテンツを囲むタイプです。

例:
- <p>ここにテキストが入る</p>
- <div>色々な要素を囲む</div>
- <a>リンクのテキスト</a>
- <h1>見出し</h1>

2. 内容を持たないタグ

開始タグだけで完結し、終了タグは不要なタイプです。
これらのタグは、それ自体が機能や情報を示し、中にコンテンツを置くことはありません。

例:
- <input> (入力フォーム)
- <img> (画像)
- <br> (改行)
- <hr> (水平線)
- <meta> (メタ情報)
- <link> (CSSファイルなどの外部リソースのリンク)

CSS

セレクタ

セレクタとは、CSSをどの要素に対して適用するのかを指定するものです。

セレクタ {
  プロパティ: 値;
}

CSSセレクタの種類

1.ユニバーサルセレクタ：*（全部の要素にマーク）
2.タイプセレクタ：pやdivなどタグ名そのもの
3.クラスセレクタ：classで指定したもの（例：.menu）
4.IDセレクタ：idで指定したもの（例：#header）
5.属性セレクタ：[type="text"]のように、属性で選ぶ
6.擬似クラス：:hoverや:nth-child()のような状態や順番の指定
7.擬似要素：タグがつけられない範囲に対してCSSを適用するセレクタ

複雑なものをメインに、詳しく解説していきます。

属性セレクタ

HTMLのタグには、いろんな属性（href や type、disabled など）がついています。
その属性をもとにスタイルを当てられるのが、属性セレクタです。

[属性名] {
  スタイル;
}

下記のとき、よく利用されます。

フォームの種類ごとに見た目を変えたい（inputのtype属性）
リンク先が外部サイトか内部かでスタイルを変えたい（href属性）
クラス名に特定の文字が含まれる要素をまとめて選びたい

使用例

<input type="text" placeholder="名前">
<input type="submit" value="送信">
<input type="checkbox" checked>
<a href="https://example.com/page1">ページ1</a>
<a href="https://example.com/page2">ページ2</a>

/* typeが"text"のinput要素にスタイルを適用 */
input[type="text"] {
  border: 1px solid green;
  padding: 5px;
}

/* typeが"submit"のinput要素にスタイルを適用 */
input[type="submit"] {
  background-color: #007bff;
  color: white;
  border: none;
}

/* hrefが特定のURLと完全に一致するa要素にスタイルを適用 */
a[href="https://example.com/page1"] {
  font-weight: bold;
}

/* ======== クラス名に「card」を含む要素を選ぶ ======== */
    [class*="card"] {
      border: 2px solid #4caf50;  /* 緑色の枠線 */
      padding: 10px;
      margin: 10px 0;
      border-radius: 8px;
      background-color: #f1fff1;
}

擬似クラス

「特定の状態になった要素」にスタイルを当てるための特別なセレクタです。
例えば、「マウスがのったとき」とか、「最初の子だけ」とか、HTMLでは書けない状態や条件にCSSを適用できます。

いくつか種類があるので、それぞれ解説していきます。

1.式擬似クラス

「子要素の中で〇番目の子だけにスタイルを当てたい！」というときに使える、ちょっぴり便利なルール付きセレクタです。
式にはodd（奇数）/even（偶数）のキーワード、数字のみも可となります。

a:`:nth-child(n)`

「親の中でn番目の要素」にスタイルを当てる

/*liの2番目の要素だけが赤くなる*/
li:nth-child(2) {
  color: red;
}

入れ子が多いパターンも見てみましょう！

<div class="grandparent">
  <p>Grandparent's first child (paragraph)</p>
  <div class="parent">
    <span>Parent's first child (span)</span>
    <p>Parent's second child (paragraph)</p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
    <div>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <span>Grandparent's third child (span)</span>
</div>

上記のHTML要素のように複数入れ子になっている場合、
下記のようにCSSを指定することで「親要素.parentの中のul要素の中にある、2番目のli要素」にスタイルを適用できます。

.parent ul li:nth-child(2) {
  color: blue;
  font-weight: bold;
}

b:`nth-of-type(n)`

同じタグ（要素）の中でn番目にスタイルを当てる

/*<p>の中で最初の要素にだけ青にする*/
p:nth-of-type(1) {
  color: blue;
}

<div class="container">
    <p>1番目の p タグです。（青くなる）</p> 
    <h1>これは見出しです</h1> 
    <p>2番目の p タグです。（青くならない）</p>
    <p>3番目の p タグです。（青くならない）</p>
    <div>これは別のタグです</div>
    <p>4番目の p タグです。（青くならない）</p>
</div>

c:`nth-last-of-type(n)`

「同じタグの中で、後ろから数えて〇番目」にスタイルを当てる

/*最後の`<p>`タグだけが赤くなる*/
p:nth-last-of-type(1) {
  color: red;
}

<div class="container">
    <p>1番目の p タグです。（赤くならない）</p> 
    <h1>これは見出しです</h1> 
    <p>2番目の p タグです。（赤くならない）</p>
    <div>これは別のタグです</div>
    <p>3番目の p タグです。（赤くならない）</p>
    <p>4番目の p タグです。（赤くなる）</p>
</div>

偶数指定の方法はいくつかあります

even

#footlinks section:nth-child(even){
}

2n

#footlinks section:nth-child(2n){
}

n + 2

#footlinks section:nth-child(n + 2){
}

2.兄弟擬似クラス

a:`first-child`/ `last-child`

親要素の中にあるすべての子要素のうち、最初または最後の要素にスタイルを適用できる

/* 最初と最後のアイテムを強調 */
/* <ul>の子要素の「最初」と「最後」が <li> であればスタイルが適用される */
li:first-child,
li:last-child {
  background-color: gold;
  font-weight: bold;
}

<ul>
  <li>リストアイテム 1 (最初)</li> 
  <li>リストアイテム 2</li>
  <div>--- 区切り ---</div> 
  <li>リストアイテム 3</li>
  <li>リストアイテム 4 (最後)</li>
</ul>

b:`first-of-child`/`last-of-child`

親要素の「同じタグ名を持つ子要素」の中で、最初に現れる要素か最後に現れる要素に適用。
他のタグが間にあってもカウントされない。

<style>
        /*
        p:last-of-type は p:nth-last-of-type(1) と同じ意味です。
        */
        /* 💡 親要素の中のpタグ群を後ろから数えて「最後」のpタグに適用 */
        p:last-of-type {
            color: red; /* 文字色を赤にする */
            font-weight: bold;
            border: 1px dashed red;
            padding: 5px;
        }
</style>

<body>
    <div class="container">
        <p>1番目の p タグです。（赤くならない）</p> 
        <h1>これは見出しです</h1> 
        <p>2番目の p タグです。（赤くならない）</p>
        <div>これは別のタグです</div>
        <p>3番目の p タグです。（赤くなる）</p>
    </div>
</body>

3.その他擬似クラス

HTMLのルート要素（＝ページ全体の一番上）に指定する

要素:root

選択された要素に指定

要素:focus

チェックされた要素に指定

要素:checked

要素が子要素を持たない（内部が空である）場合にスタイルを適用

要素:empty

/* 中身が空のdivに背景色を適用 */
    div:empty {
      background-color: lightcoral;
      color: white;
      text-align: center;
      padding: 20px;
    }

指定した要素（セレクタ）を除外する

要素:not(セレクタ)

/* div以外の要素に背景色を付ける */
*:not(div) {
      background-color: lightgray;
    }

リンクに使う4つの擬似クラスの優先順位

以下の4つには優先順位があります。

a:link → a:visited → a:hover → a:active

擬似クラス	意味
`:link`	まだクリックしていないリンク
`:visited`	一度訪れたことがあるリンク
`:hover`	マウスを上にのせているとき
`:active`	リンクをクリックして押してる最中

擬似要素

タグがつけられない範囲に対してCSSを適用するセレクタ
インライン要素として作成されるので、ブロックレベルにしたいときはdisplayを設定すること

使用例紹介

段落やブロックの「最初の行」だけを対象にスタイルを変えられる擬似要素
段落やブロックの「最初の1文字」だけを特別に装飾できる擬似要素

p::first-letter {
  font-size: 2em;        /* 文字を大きく */
  color: blue;           /* 青色に */
  float: left;           /* 左に浮かせて段落と並べる */
  margin-right: 5px;     /* 文字の右に余白 */
}

ある要素の「あと」に、見た目だけの内容を追加できる機能

h1::after {
  content: "🌸";
}

結合子

セレクタ同士をつなげて、もっと細かく狙いたい場所を指定できるものです。
よく使う結合子をご紹介します。

1. セレクタ1>セレクタ2：子セレクタ（直下の子だけに適用）

セレクタ1の子要素であるセレクタ2にスタイルを適用します。
- セレクタ1: 親となる要素。
- セレクタ2: セレクタ1 の直接の子要素。

ul > li {
  font-weight: bold;
}

例：<ul>の直下の<li>だけに適用する

<ul>
    <li>OK</li>
    <div>
        <li>NG</li>
    </div>
</ul>
/*この場合、2つ目の`<li>NG</li>は選ばれない。*/

2.セレクタ1△セレクタ2：子孫セレクタ

「セレクタ1 の中に含まれる（子孫である）すべてのセレクタ2にスタイルを適用する」という意味になります。
- 親となる要素をセレクタ1で指定します。
- セレクタ1 の子孫にあたる要素をセレクタBで指定します。

nav li,
nav a {
   background-color: yellow;
}

nav li → <nav>の中にある<li>要素すべてに、黄色の背景がつく。
nav a → <nav>の中にある<a>要素すべてに、黄色の背景がつく。

上記の例のように、違うセレクタを「,」でまとめてグループ化して、そのグループに同じスタイルを一気に適用できます！

3.セレクタ1+セレクタ2：隣接兄弟セレクタ

同じ親要素を持つ要素の中で、「セレクタ1」の直後にある「セレクタ2」にスタイルを適用します。
- セレクタ1 : 基準となる要素。
- セレクタ2 : セレクタ1 の直後に続く兄弟要素。

<div class="parent">
  <p>最初の段落</p>
  <p>二番目の段落</p>
  <span>これはスパン</span>
  <p>三番目の段落</p>
</div>

<p>これは兄弟ではない段落</p>

/* p要素の直後に続くp要素にスタイルを適用 */
p + p {
  color: blue;
  margin-top: 20px;
}

最初の段落の直後に続く二番目の段落は青色になり、margin-top が適用されます。
二番目の段落の直後には <span>要素が続くため、三番目の段落は p + pの対象になりません。
これは兄弟ではない段落はdiv.parentの外にあり、同じ親を持たないので、対象外です。

4.セレクタ1~セレクタ2：一般兄弟セレクタ

同じ親要素を持つ要素の中で、「セレクタ1」の後にあるすべての「セレクタ2」にスタイルを適用します。
- セレクタ1: 基準となる要素。
- セレクタ2: セレクタ1 の後に続くすべての兄弟要素。

<div class="parent">
  <p>最初の段落</p>
  <p>二番目の段落</p>
  <span>これはスパン</span>
  <p>三番目の段落</p>
</div>

<p>これは兄弟ではない段落</p>

/* p要素の後に続くすべてのp要素にスタイルを適用 */
p ~ p {
  color: green;
  border-left: 3px solid green;
  padding-left: 5px;
}

最初の段落の後に続く二番目の段落は緑色になり、左ボーダーが適用されます。
最初の段落の後に続く三番目の段落も緑色になり、左ボーダーが適用されます。間に <span>が挟まっていても適用されます。
これは兄弟ではない段落は同じ親ではないので、対象外です。

結合子では、ul.myListなど、ある要素のクラス名・id名などの指定も可能です。

5.スペースがないクラス

セレクタA.セレクタB

スペースがない場合、「セレクタA」と「セレクタB」の両方のクラス（またはタグとクラス）を同時に持っている要素を指定します。
下記の組み合わせで使用されることが多いです。

タグとクラスの組み合わせ

セレクタ	意味するもの
`p.error`	`<p>` タグであり、`error` というクラスも持っている要素。
`h1.main-title`	`<h1>` タグであり、`main-title` というクラスも持っている要素。

数のクラスの組み合わせ

セレクタ	意味するもの
`.button.active`	`button` クラスと、`active` クラスの両方を同時に持っている要素。

CSSセレクタの優先順位

CSSでは、!importantのついている指定は最優先として扱います。
残りは、使用しているセレクタの種類から優先度を計算します。
- 計算結果の優先度が同じだった場合、後の指定を優先

優先度早見表

セレクタの種類	優先度ポイント	例
インラインスタイル	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;
}

`color`：文字色

color : #eee;

`background`：背景設定

HTML要素の背景色や、背景画像を設定できます。
backgroundプロパティで設定できるのは、Content、Padding、Border の領域となります。
　
よく使うプロパティは以下です。

プロパティ	内容
`background-color`	背景の色
`background-image`	背景に画像を設定する
`background-repeat`	背景画像を繰り返すかどうか
`background-position`	背景画像の表示位置
`background-size`	背景画像のサイズ
`background-attachment`	スクロール時の背景の動き
`background-blend-mode`	複数の背景画像や色を「混ぜる」

個人的に複雑なものを、解説していきます。

1.`background-repeat`

背景画像を繰り返すかどうかを指定します。

div {
  background-repeat: no-repeat; /* 繰り返さない */
}

値	意味
repeat	縦横に繰り返す（初期値）
no-repeat	繰り返さない
repeat-x	横だけ繰り返す
repeat-y	縦だけ繰り返す

2.`background-position`

背景画像の表示位置を指定します。

div {
  background-position: center top;
}

指定方法

1.キーワード指定

値	意味
left, right, center	横方向の位置
top, bottom, center	縦方向の位置

background-position: left top;  /* 画像の左上を切り取って表示 */
background-position: center center;  /* 画像の中央を切り取って表示  */
background-position: right bottom;  /* 画像の右下を切り取って表示  */

1つだけ設定した際は、
横方向と縦方向の両方に同じ値が適用されます。

/*横も縦も中央に設定*/
background-position: center;

2.数値指定

background-position: 20px 10px;  /* 左から20px、上から10pxの位置 */
background-position: 50% 50%;    /* 横・縦ともに中央 */
background-position: 100% 0%;    /* 右上 */

3.`background-size`

背景画像の大きさを調整します。

div {
  background-size: cover;
}

値	意味
auto	元のサイズ（初期値）
cover	背景画像を要素全体に表示し、要素の領域を完全に覆うようにする
contain	背景画像が要素内に収まるように、縦横比を保ったまま可能な限り拡大します。要素からはみ出ることはありません。
幅高さ	`100px 50px` のように指定

contain
- 画像の縦横比を維持したまま、要素の幅または高さのいずれかが要素いっぱいに広がるように縮小・拡大されます。
- 画像全体が必ず表示されます。
- 要素のアスペクト比と画像のそれが異なる場合、画像が表示されない領域（余白）が上下または左右に発生する可能性があります。
- 画像が引き伸ばされることはありません。
- 例えるなら: 映画館のスクリーンに、画像全体が収まるように表示されるイメージです。スクリーンの形と映画の画面の形が違う場合、余白ができますが、映画の映像は全て見ることができます。
cover
- 画像の縦横比を維持したまま、要素の幅または高さのいずれかが要素いっぱいに広がるように拡大・縮小されます。
- 要素全体を覆うことを優先するため、画像の一部がトリミングされる可能性があります。
- 画像が表示されない余白は発生しません。
- 画像が引き伸ばされることはありません。
- 例えるなら: 壁一面にポスターを貼るイメージです。壁の形とポスターの形が違う場合、ポスターの一部が壁からはみ出すことがありますが、壁はポスターで完全に覆われます。

4.`background-attachment`

背景画像を「固定して動かさない」か「コンテンツと一緒にスクロールさせる」かを決めます。

div {
  background-attachment: fixed;
}

値	意味
scroll	一緒にスクロール（初期値）
fixed	背景だけ固定して動かない
local	コンテンツに合わせて動く

scrollは、スクロールして見上げたり見下ろしたりすると、画像も一緒に動いて見えなくなったり、再び見えたりします。
fixedは、上下にスクロールしても、背景画像は常に同じ位置に固定されて見えます。
localは、要素のコンテンツと一緒に背景がスクロールします。

5.`background-blend-mode`

背景画像や背景色が複数ある場合に、それらをどのように合成するかを制御するために使用されます。
このプロパティは、以下の要素の組み合わせに適用されます。
- background-image (複数指定可)
- background-color
これらの背景が重なっている場合に、それぞれがどのように混ざり合って最終的な色になるかを指定します。

background-image: url("画像1.jpg"), url("画像2.jpg");
background-color: rgba(255, 0, 0, 0.5);
background-blend-mode:  <mode>;

モード名	効果のイメージ
`normal`	ブレンドは行われず、一番上の背景が下の背景をそのまま覆い隠します。
`multiply`（使用頻度高）	上下の色を掛け合わせます。暗い色が優先され、全体的に暗くなります。白い部分は透明になり、黒い部分は黒のまま残ります。
`screen`（使用頻度高）	上下の色を反転させて掛け合わせます。明るい色が優先され、全体的に明るくなります。黒い部分は透明になり、白い部分は白のまま残ります。
`overlay`（使用頻度高）	`multiply`と`screen`を組み合わせたようなモードです。下のレイヤーの明るい部分はより明るく、暗い部分はより暗くなります。コントラストが上がります。
`darken`	上下のピクセルを比較し、より暗い色のピクセルが表示されます。
`lighten`（使用頻度高）	上下のピクセルを比較し、より明るい色のピクセルが表示されます。
`color-dodge`	下のレイヤーを明るくし、コントラストを下げます。
`color-burn`	下のレイヤーを暗くし、コントラストを上げます。
`difference`	上下の色の差分を表示します。似た色だと黒っぽく、異なる色だと鮮やかになります。
`luminosity`	下のレイヤーの色相と彩度を保ち、上のレイヤーの明度を適用します。

background-imageを複数指定した場合:

最初に書いた画像が一番手前（一番上）のレイヤー。
次に書いた画像がその下（奥）のレイヤー。
一番最後に書いた画像が、そのすぐ下のレイヤーになります。
そして、すべてのbackground-imageの一番下に、background-colorが配置されます。

※画像が1枚しかないときは、画像と色の比較となります。

レイヤーのイメージ図は下記です。

[一番手前（一番上）のレイヤー: background-image (1つ目)]
[その下のレイヤー: background-image (2つ目)]
[さらにその下のレイヤー: background-image (3つ目)]
-------------------------------------------------
[一番奥（一番下）のレイヤー: background-color]

適用される順番

指定された複数の背景画像（一番下層の画像から順に、background-colorとブレンドされる）、または一番上の背景画像とbackground-colorの間に適用されます。
複数のbackground-imageがある場合、一番上の画像から順に、そのすぐ下の画像や色とブレンドされていきます。
例えば、background-image: url(img1.png), url(img2.png); background-color: blue;の場合、img1.pngとimg2.pngがブレンドされ、その結果が blue とブレンドされます。ブレンドモードを複数指定することで、それぞれのブレンド方法を制御できます。

`background`一括指定

backgroundプロパティをそれぞれ一括で指定することも可能です。
各プロパティの順番は決まっていますが、必ずしも全部書く必要はありません。
- 書かない部分はデフォルト値が使われるから、必要なものだけ書けばOKです。

positionとsizeを両方指定したい場合のみ決まりがあります。
→はじめにpositionの値をかき、/ で区切ってsizeをかきましょう！

基本構文

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

使用例

div {
  background: url("flower.jpg") no-repeat center center / cover #fefefe;
}

上記はそれぞれに分割すると、下記の意味となります。

background-image: url("flower.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-color: #fefefe;

`linear-gradient()`

「ある地点から別の地点へ、色が直線的に変化する」背景画像を作成するCSSの関数

background: linear-gradient(
    to right, 
    yellow,
    green
);

かしこまりました！先ほどのシンプルな例に「方向」を加えて、どのように色が変化するのかを説明しますね。

🎨 方向を指定したグラデーションの例

この例では、グラデーションの方向を一番最初に指定します。

background: linear-gradient(
    to right, 
    yellow,
    green
);

方向

linear-gradient()の括弧の一番最初に書くのが「方向」です。
方向は、以下の2つの方法で指定できます。

1. 英語のキーワードで指定する (to 〇〇)

「to + 変化の終点」を指定します。これは、**「〇〇に向かって」**色が変化するという意味です。

キーワード	意味	変化の仕方
`to top`	上へ	下から上へ変化
`to bottom`	下へ	上から下へ変化 (方向の指定なしの時の初期値)
`to left`	左へ	右から左へ変化
`to right`	右へ	左から右へ変化
`to top right`	右上へ	左下から右上へ変化 (斜め)

上記の例 (to right) では、「左から右に向かって」黄色から緑へと変化します。

2. 角度で指定する `(〇〇deg)`

基本原理は、「0degを真上（上方向）として、そこから時計回りに回転する」ということです。
- 0deg（上）→ 90deg（右）→ 180deg（下）→ 270deg（左）
そして、指定した角度がグラデーションの終点（ゴール）を指すため、色の変化は常に「終点の反対側（始点）から終点へ」と起こります。

角度 (deg)	終点方向（キーワード）	始点方向（色の始まり）	色の変化
0	上 (to top)	下	下から上へ変化
90	右 (to right)	左	左から右へ変化
180	下 (to bottom)	上	上から下へ変化
270	左 (to left)	右	右から左へ変化

グラデーションの最初の色

2つ目が、グラデーションの最初の色と、その開始位置を指定しています。

yellow：黄色を使います。
0%：グラデーションの開始地点（この場合は一番左）にこの色を配置します。

グラデーションの最後の色

最後は、グラデーションの最後の色と、その終了位置を指定しています。

green：緑色を使います。
100%：グラデーションの終了地点（この場合は一番右）にこの色を配置します。

テキストプロパティ

フォント関連

プロパティ名	意味・効果	よく使う値例	補足
`font-style`	文字のスタイルを指定します。	`normal`, `italic`, `oblique`	`italic`で斜体、`normal`で通常、`oblique`で斜め体。
`font-weight`	文字の太さを指定します。	`normal`, `bold`, `lighter`, `100`, `700`	`bold`で太字、数字で細かく指定可能（100が細く、700が太く）。
`font-size`	文字の大きさを指定します。	`16px`, `1em`, `larger`, `smaller`	`px`や`em`、相対単位でも指定可能。

上記以外にも色々あるので、紹介していきます。

1.`text-align`

テキスト（文字）を左寄せ・中央寄せ・右寄せにできるCSSです。
ブロックレベル要素にしか指定できないプロパティです。
インライン要素に設定したい時は、ブロックレベルに指定すると、中のインライン要素全体が設定されます。

主な値は下記です。

値	説明
`left`	左に寄せる（初期値）
`center`	真ん中に揃える
`right`	右に寄せる
`justify`	両端揃え（行の左右がそろう）

2.`letter-spacing`

文字間隔を設定できます。

p {
  letter-spacing: 0.5px; /* 文字間を0.5ピクセル広げる */
}

h1 {
  letter-spacing: 2px; /* 文字間を2ピクセル広げる */
}

.tight-text {
  letter-spacing: -1px; /* 文字間を1ピクセル狭める */
}

3.`vertical-align`

imgを設定すると、下に余白ができることがあります。
- これはimgタグがインライン要素であり、インライン要素の挙動として文字を表示するために領域確保をする時、gやjなどの下にはみ出る「しっぽ」分も確保しているため起こり得ます。
画像にはしっぽがないので、隙間があるように見えます。
- 解決するためにvertical-alignを設定するとよいでしょう。

img {
  vertical-align: buttom;
}

指定できる値

baseline: 初期値。
top: 要素の上端に揃える。
buttom: インラインのディセンダ領域削除。画像の下の隙間を削除したい時などに利用する。
text-top: 親要素のテキストの上端に揃える。
text-buttom: 親要素のテキストの下端に揃える。
文字の位置をbaselineから下に9px下げることもできる。

nav a {
  vertical-align: -9px;
}

表にも指定可

表セルの中の文字や画像の見え方を変更できる

値	意味	よくある見え方
`top`	上に寄せる	セルの上端にくっつく
`middle`	中央に配置する（初期値）	だいたい真ん中に見える
`bottom`	下に寄せる（セルの一番下の枠線に揃える）	セルの下端にくっつく

4.`line-height`

行の高さ（行間）を指定するために使われます。

line-height: 30px;

上記は、「その要素内のテキストの一行の高さが30ピクセルになる」という指示です。
例えば、font-sizeが16pxのテキストにline-height: 30px;を設定した場合、文字自体の高さは16pxですが、一行全体が占める垂直方向の空間は30pxになります。
残りの30px - 16px = 14pxが、テキストの上下に均等に（7pxずつ）分配される行間（leading）として機能します。

`px`以外の`line-height`の値

1.単位なしの数値 (推奨されることが多い)

line-height: 1.5;

これは「フォントサイズの倍率」として機能します。
例えば、font-size: 16px;なら1.5は24pxになります。
この方法だと、font-sizeが変わっても自動的に行間が調整されるため、レスポンシブデザインに適しています。

2.`em`

line-height: 1.5em;`

これは「その要素のフォントサイズ」を基準にした倍率です。
em単位は入れ子になった場合に親の影響を受けるため、font-sizeが変化すると、行の高さも連鎖的に変化する可能性があります。

3.`%`

line-height: 150%;

これも「その要素のフォントサイズ」を基準にした割合です。
emと同じように動作します。

用途	タグ	順序あり？	主な使い方
箇条書き	`<ul><li>`	❌	メニュー・買い物リストなど
順序付き手順	`<ol><li>`	✅	手順、ランキングなど
用語の説明	`<dl><dt><dd>`	-	辞書のような説明リスト

プロパティ名	意味・効果	よく使う値例	補足
`list-style-type`	リストマークの種類を変える	`disc`, `circle`, `square`, `decimal`, `none`	マークの見た目を変更できる
`list-style-position`	リストマークの位置を変える	`outside`, `inside`	`inside`にするとマークがテキストと揃う
`list-style-image`	リストマークを画像に変更する	`url('star.png')`, `none`	小さなアイコン画像を指定できる
`list-style`	上記3つをまとめて指定するショートハンド	`square inside`, `url('dot.png') outside`	一括で指定したいときに便利！

From

要素名	設定できる属性	意味・効果	よく使う値例	補足
`input`	`type`	入力フィールドの種類を指定	`text`, `password`, `email`, `radio`, `checkbox`, `submit`, `button`	例: テキスト入力用は `type="text"`、パスワード用は `type="password"`
	`value`	初期値を指定	`"sample"`	初期状態で入力される値を設定
	`placeholder`	入力欄にヒントテキストを表示	`"Enter your name"`	入力欄に薄く表示されるヒント文字
	`name`	フォーム送信時の識別名	`"username"`	サーバーに送信するデータ名
	`required`	必須項目として指定	`required`	この項目が必須であることを指定
	`maxlength`	入力できる最大文字数	`10`	最大文字数を指定
`textarea`	`rows`	テキストエリアの高さ（行数）	`4`	表示する行数を指定
	`cols`	テキストエリアの幅（文字数）	`50`	幅を指定
	`placeholder`	ユーザーへのヒントテキスト	`"Enter your message"`	入力がないときに表示されるヒント文字
	`name`	フォーム送信時の識別名	`"message"`	サーバーに送信するデータ名
	`required`	必須項目として指定	`required`	入力を必須にする
`button`	`type`	ボタンの種類を指定	`submit`, `reset`, `button`	例: `submit` は送信ボタン、`reset` はリセットボタン
	`name`	ボタンに名前をつける	`"submitButton"`	サーバーに送信する際の識別に使う
	`disabled`	ボタンを無効化する	`disabled`	ユーザーがクリックできないようにする
`select`	`name`	フォーム送信時の識別名	`"options"`	サーバーに送信するデータ名
	`multiple`	複数選択を可能にする	`multiple`	複数のオプションを選択可能にする
	`size`	表示される選択肢の行数	`5`	表示行数を指定
`fieldset`	`disabled`	フォームの入力を無効化（フォーム全体に影響）	`disabled`	フォーム内のすべての要素を無効化
	`form`	関連するフォームのID	`form="form1"`	`<form>`タグのIDと関連付ける
	`legend`	フィールドセットのタイトルを指定	`"Personal Info"`	グループ化されたフォーム要素のタイトル

input: ユーザーがデータを入力するための最も基本的なフォーム要素。type属性で入力の種類を指定します。
textarea: 複数行のテキストを入力できる領域。行数や幅を指定でき、長文の入力に使用します。
button: ユーザーがクリックして操作を実行するボタン。type属性で役割（送信、リセットなど）を指定します。
select: ドロップダウンリストを作成するための要素。複数選択可能にすることもできます。
fieldset: フォーム内の関連する要素をグループ化するためのコンテナ。legendタグでタイトルを付けることができます。

リサイズプロパティ

プロパティ	意味・効果	使用例
`resize: none;`	サイズ変更を完全に禁止する	`textarea { resize: none; }`
`resize: both;`	縦横どちらにもサイズ変更できる（初期値）	`textarea { resize: both; }`
`resize: vertical;`	縦方向のみサイズ変更できる	`textarea { resize: vertical; }`
`resize: horizontal;`	横方向のみサイズ変更できる	`textarea { resize: horizontal; }`
`resize: inline;`（非推奨）	インライン方向のみ（ブラウザ対応が少ない）	ほとんど使わないでOK

テーブル

基本構造

サンプルコード

/*html*/
<table>
      <tr>
        <th>セル１</th>
        <th>セル２</th>
        <th>セル３</th>
      </tr>
      <tr>
        <th>セル４</th>
        <th>セル５</th>
        <th>セル６</th>
      </tr>
</table>
    
/*style*/

table,
th,
td {
  border: 1px solid blueviolet;
}

セルの連結

サンプルコード

/*html*/
 <table>
      <tr>
        <th colspan="3">セル１</th>
      </tr>
      <tr>
        <th>セル４</th>
        <th>セル５</th>
        <th>セル６</th>
      </tr>
    </table>
    <br />
    <table>
      <tr>
        <th>セル１</th>
        <th>セル２</th>
        <th rowspan="3">セル３</th>
      </tr>
      <tr>
        <th>セル４</th>
        <th>セル５</th>
      </tr>
</table>

表の横列のグループ化

タグ	意味	どんな部分に使う？
`<thead>`	表の「見出し部分」	タイトルや列名（例：商品名、価格など）
`<tbody>`	表の「中身（本文）」	実際のデータ（例：商品リスト、点数など）
`<tfoot>`	表の「まとめや合計」	合計行や注釈など（例：合計金額、備考など）

サンプルコード

/*html*/
 <table>
      <thead>
        <tr>
          <th>商品名</th>
          <th>価格</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>りんご</td>
          <td>100円</td>
        </tr>
        <tr>
          <td>バナナ</td>
          <td>80円</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合計</td>
          <td>180円</td>
        </tr>
      </tfoot>
</table>

その他プロパティ

`border-collapse`

:テーブルのセル間の境界線（ボーダー）をどう表示するかを決めるプロパティ

border-collapse: collapse;

値	意味
`collapse`	セルの境界線を1本にまとめる（通常使われる）
`separate`	セル間にスペースを入れて、境界線を別々に表示する

`caption-side`

:テーブルのキャプションがどこに表示されるかを決めるプロパティ

table {
  caption-side: top;
}

値	意味
`top`	キャプションを上部に表示
`bottom`	キャプションを下部に表示

`iframe`

自分のページの中に、別のページを埋め込むことができます、

たとえばこんなことができます：
- YouTube動画をページに埋め込む
- Googleマップを表示する
- 他の自分のページを小窓で見せる

<iframe src="https://example.com" width="300" height="200"></iframe>

属性名	説明
`src`	表示するページのURL
`width`	横幅（px または %）
`height`	高さ（px または %）
`title`	iframeの内容を説明する（アクセシビリティ向け）
`frameborder`	枠線の有無（古いやり方。CSS推奨）
`allowfullscreen`	フルスクリーン許可（動画などで使用）
`loading`	読み込みタイミング（`lazy`で遅延読込）

calc関数

CSSで長さを指定するときに、計算式を使えるようにする関数です。

単位が違うものもOKです。（%、px、em、vh など）
例：calc(2em + 30px)

アウトライン

フォーカスの見た目をコントロールするときに、使用されるプロパティです。

borderと似ているけれど違う

比較ポイント	`outline`	`border`
配置・レイアウトに影響	しない（レイアウトが崩れない）	する（要素の大きさに影響）
角の丸み（`border-radius`）	効かない	効く
表示位置	ボックスのボーダー周り（外側）	ボーダー（内側）
指定	上下左右別々に指定することは不可	上下左右別々に指定することが可
主な用途	キーボード操作時のフォーカス表示など	枠線のデザイン装飾など

各プロパティの紹介

プロパティ名	意味・説明	例
`outline-width`	アウトラインの太さ	`1px`, `2px` など
`outline-style`	線のスタイル（`solid`, `dotted`, `dashed` など）	`solid`（実線）
`outline-color`	線の色	`blue`, `rgba(...)` など
`outline`（ショートハンド）	上3つをまとめて一括で指定	`outline: 2px solid red;`
`outline-offset`	アウトラインを外側にどれだけ離すかを指定	`outline-offset: 4px;`

よくある使い方の例

フォーカス時の見た目変更（例：フォーム入力中）

input:focus {
  outline: 2px solid #66f;
  outline-offset: 2px;
}

`content`

CSSで「内容（テキストや画像など）を追加するため」のプロパティ！
「疑似要素」の中だけで使用できます。

<h1>CSSで内容を追加する方法</h1>

h1::before {
  content: '特別コラム：';
  display: block;
  font-size: small;
  color: #f6d;
}

h1::after {
  content: url(images/sakura.png);
  display: block;
}

未来の自分のために、誰かのためにこの記事が役に立てば幸いです✨🧚🏻

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

HTML・CSSの学び直し。

HTML

タグ構成

属性について

書き方

例

よく使う属性

終了タグが不要な要素

1. 内容を持つタグ

2. 内容を持たないタグ

CSS

セレクタ

CSSセレクタの種類

属性セレクタ

使用例

擬似クラス

1.式擬似クラス

a::nth-child(n)

b:nth-of-type(n)

c:nth-last-of-type(n)

2.兄弟擬似クラス

a:first-child/ last-child

b:first-of-child/last-of-child

3.その他擬似クラス

リンクに使う4つの擬似クラスの優先順位

擬似要素

使用例紹介

結合子

CSSセレクタの優先順位

優先度早見表

color：文字色

background：背景設定

1.background-repeat

2.background-position

指定方法

3.background-size

4.background-attachment

5.background-blend-mode

background一括指定

基本構文

使用例

linear-gradient()

🎨 方向を指定したグラデーションの例

方向

1. 英語のキーワードで指定する (to 〇〇)

2. 角度で指定する (〇〇deg)

グラデーションの最初の色

グラデーションの最後の色

テキストプロパティ

フォント関連

1.text-align

2.letter-spacing

3.vertical-align

指定できる値

表にも指定可

4.line-height

px以外のline-heightの値

1.単位なしの数値 (推奨されることが多い)

2.em

3.%

リスト

リストに使用できるプロパティ

From

リサイズプロパティ

テーブル

基本構造

セルの連結

表の横列のグループ化

その他プロパティ

border-collapse

caption-side

iframe

calc関数

アウトライン

borderと似ているけれど違う

各プロパティの紹介

よくある使い方の例

フォーカス時の見た目変更（例：フォーム入力中）

content

a:`:nth-child(n)`

b:`nth-of-type(n)`

c:`nth-last-of-type(n)`

a:`first-child`/ `last-child`

b:`first-of-child`/`last-of-child`

`color`：文字色

`background`：背景設定

1.`background-repeat`

2.`background-position`

3.`background-size`

4.`background-attachment`

5.`background-blend-mode`

`background`一括指定

`linear-gradient()`

2. 角度で指定する `(〇〇deg)`

1.`text-align`

2.`letter-spacing`

3.`vertical-align`

4.`line-height`

`px`以外の`line-height`の値

2.`em`

3.`%`

`border-collapse`

`caption-side`

`iframe`

`content`