2025.12.16 学習記録 ～HTML/CSS⑤～
Kumiko Okawara疑似クラス
特定の状態になった要素だけにスタイルを当てるための使われる。
疑似クラスを指定する部分にはスペースを入れないよう注意！
- link 擬似クラス（未訪問リンクスタイル）
セレクタ:link { プロパティ名: 値; }
未訪問のリンク表示に関わるスタイルを指定する。
例）検索結果ページで未訪問のサイトのページ名が青く表示される - visited 擬似クラス（訪問済リンクスタイル）
セレクタ:visited { プロパティ名: 値; }
訪問済みのリンク表示に関わるスタイルを指定する。
例）検索結果ページで訪問済みのサイトのページ名が紫で表示される - hover 擬似クラス（オンカーソルスタイル）
セレクター:hover { プロパティ名: 値; }
オンカーソル時（要素にカーソルが乗った時）のスタイルを指定する。
例）メニューにカーソルを合わせると項目で分類された一覧が表示される - first-child/last-child 擬似クラス（先頭・最終の子要素指定）
セレクター:first-child { プロパティ名: 値; }
セレクター:last-child { プロパティ: 値; }
例）表のように罫線を引きたいとき、先頭or最終の罫線を引く場所を変える
（両側に線を引くと隣とダブるため、片側にだけ線を引く→端はもう片方にも線を引かないと閉じられない。） - first-letter 擬似要素（要素の 1 文字目を指定）
セレクター::first-letter { プロパティ: 値; }
例）1文字目の文字を大きくする、色を変える - first-line 擬似要素（要素の 1 行目を指定）
セレクター::first-line { プロパティ: 値; }
例）1行目の文字を大きくする、色を変える - before/after 擬似要素（要素の直前・直後にコンテンツの挿入）
セレクター::before { プロパティ: 値; }
セレクター::after { プロパティ: 値; }
要素の直前（::before）または直後（::after）へのコンテンツの挿入を指定する。
実際に挿入するコンテンツは、content プロパティで指定。
例）項目の文頭に記号をつける
テーブル
table 要素（テーブル作成）
<table> テーブルコンテンツ </table>
テーブルを定義する。テーブルとは、行と列の組み合わせで構成されたセルを用いて作成する表組。
テーブルを作成するための先頭要素（親要素）は table 要素で、子要素を組み合わせてテーブル構成を作成する。
テーブルを作成する手順
- table 要素を使用してテーブル作成を開始する。
- tr 要素を使用して一行（横軸）の作成を開始する。
- 見出しが必要な場合は、一行に格納するセルの個数分の th 要素を使用して見出しを指定する。
- 一行に格納するセルの個数分の td 要素を使用して個別データ（セルデータ）を指定する。
- 行数分、tr 要素の定義から繰り返す。
使用上の注意事項
- レイアウトの初期値はブロックレベル。文章の改行に影響を与える。
- display プロパティ値は、規定値で table になる。
子要素
- caption…キャプション設定
- tr…テーブル横一行設定
- th…テーブル見出しセル設定
- td…テーブルセル設定
- colgroup…縦列グループ設定
- col…テーブル縦列属性設定
- thead…テーブルヘッダー設定
- tbody…テーブル本体設定
- tfoot…テーブルフッター設定
caption 要素（テーブルキャプション）
<caption> テーブルキャプションコンテンツ </caption>
テーブルのタイトルを定義する。
タイトルを指定する場合は、table 要素の直後に子要素として caption 要素を配置する。
使用上の注意事項
- caption 要素は、table 要素の開始直後にだけ配置可能。
- display プロパティ値は、規定値で table-caption になる。
tr 要素（テーブル一行）
<tr> テーブル一行コンテンツ </tr>
テーブルの一行を定義する。
一般的には、tr 要素の子要素に複数の th 要素や td 要素を配置し一行のデータを作成する。
使用上の注意事項
- レイアウトには影響を与えない。
- tr は、table row の略称。
- display プロパティ値は table-row になる。
th 要素（テーブル見出しセル）
<th colspan="列方向のセル結合数"
rowspan="行方向のセル結合数"
scope="見出しの対象セル"
headers="セルの対象ヘッダー"
abbr="セルの説明">
テーブル見出しセルコンテンツ </th>
テーブルの見出しとなるヘッダーセルを定義する。
tr 要素の子要素として配置。見出しが行と列のどちらの方向を対象にしているかは scope 属性で指定する。
通常のセルを作成する場合は td 要素を使用すること。
主な固有属性
- colspan…列方向にセルを結合する数を指定する。初期値は 1 で、最大値は 1000 。
- rowspan…行方向にセルを結合する数を指定する。初期値は 1 で、最大値は 1000 。
- scope…見出しの対象となるセルを指定する。
scope 属性が指定されていない場合は、自動的に見出しセルが適用されるセルの集合を選択する。
row（同じ行に属するセルが対象）col（同じ列に属するセルが対象）rowgroup（行のグループに属するセルが対象）colgroup（列のグループに属するセルが対象） - headers…セルが対象にしているヘッダーを明示する。th 要素の id 属性が持つ値を空白区切りのリストで指定する。
- abbr…セルの内容に関する簡単な説明を指定する。
使用上の注意事項
- th は、table header の略称。
- display プロパティ値は、table-cell となる。
td 要素（テーブルセル）
<td colspan="列方向のセル結合数"
rowspan="行方向のセル結合数"
headers="セルの対象ヘッダー">
テーブルセルコンテンツ </td>
テーブルのデータセルを定義する。
tr 要素の子要素として配置。見出しセルを作成する場合は、th 要素を使用すること。
主な固有属性
- colspan…列方向にセルを結合する数を指定する。初期値は 1 で、最大値は 1000 。
- rowspan…行方向にセルを結合する数を指定する。初期値は 1 で、最大値は 1000 。
- headers…セルが対象にしているヘッダーを明示する。th 要素の id 属性が持つ値を空白区切りのリストで指定する。
使用上の注意事項
- td は、table data の略称。
- display プロパティ値は、table-cell になる。
border-collapse プロパティ（隣接セルの表示方法）
border-collapse: 隣接セルの表示方法;
テーブルの隣接するセルの表示方法を指定する。
隣接セルの表示方法は、以下の値で指定すること。
- collapse…隣接するセルのボーダーを重ねて表示する。
- separate…隣接するセルのボーダーを間隔をあけて表示する。
使用上の注意事項
- 初期値は、normal 。
- table および inline-table 要素に適用できる。
- 継承される。
border-spacing プロパティ（隣接セルのボーダー間の間隔）
border-spacing: 隣接セルのボーダー間の間隔;
テーブルの隣接するセルのボーダー間の間隔を指定する。
border-collapse プロパティに separate が指定されている時に有効。
隣接セルのボーダー間の間隔は、複数指定でき指定した個数により対象位置が異なる。
- 1 個の指定…「上下左右」のすべての指定になる。
- 2 個の指定…「左右」と「上下」の順で指定する。
使用上の注意事項
- 初期値は 0 。
- table および inline-table 要素に適用できる。
- 継承される。
フォーム（HTML）
記載例）
<form action="#" method="post">
<p>問い合わせフォーム</p>
<div>
名前：<br>
<input type="text" name="name" size="38">
</div>
<div>
メールアドレス：<br>
<input type="text" name="mail" size="38">
</div>
<div>
性別：
<input type="radio" name="gender" value="m">男
<input type="radio" name="gender" value="w">女
</div>
<div>
端末：
<input type="checkbox" name="device" value="p">PC
<input type="checkbox" name="device" value="s">スマホ
<input type="checkbox" name="device" value="t">タブレット
</div>
<div>
種別：
<select name="kind">
<option value="kind-a">報告</option>
<option value="kind-b">連絡</option>
<option value="kind-c">相談</option>
<option value="kind-d">その他</option>
</select>
</div>
<div>
内容：<br>
<textarea name="comment" rows="4" cols="40"> 問い合わせ内容を書いて下さい。</textarea>
</div>
<div>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</div>
</form>
form 要素（フォーム作成）
<form action="処理プログラムURL"
method="フォーム送信時のHTTPメソッド"
target="レスポンス表示位置"
enctype="送信MIMEタイプ"
novalidate
accept-charset="サーバー文字エンコーディング"
autocomplete="入力補完有無"
name="フォーム名称"
rel="送信先リソースとの関係">
フォームコンテンツ </form>
Web サーバーに情報を送信するための入力フォームを定義する。
子要素にパーツを組み込むことでユーザーが操作可能なページを提供する。
この機能を使いこなすには、クライアントのリクエストとサーバーのレスポンスを理解する必要がある。
主な固有属性
- action
…フォームデータを処理する送信先の処理プログラムの URL を指定する。
この値は、button 要素や input（type="submit"）要素などの formaction 属性で上書きできる。
また、method 属性に dialog が指定されている場合は無視される。 - method
…フォームデータを送信する時に使用する HTTP メソッドを以下の値で指定する。
この値は、button 要素や input（type="submit"）要素などの formmethod 属性で上書できる。初期値は get 。
get GET メソッドで送信する。フォームデータは、action 属性の URL の後ろにクエスチョン（?）で区切って追加される。
post POST メソッドで送信する。フォームデータは、リスエスト本体として送信される。
dialog dialog 要素の子要素として form 要素を記述した時に有効で、送信を行うとダイアログを閉じて submit イベントを発行する。データを送信したりクリアしたりはししない。 - target
…フォーム送信後に受け取ったレスポンスを開くフレーム名やウィンドウ名を指定する。
_self 同じウィンドウで開く。（初期値）_blank 新しいタブまたは新しいウィンドウで開く。 - enctype
…method 属性が post の場合にサーバーに送信するデータの MIME タイプを以下の値で指定する。
この値は button 要素や input（type="submit"）要素など… formenctype 属性で上書できる。
application/x-www-form-urlencoded 通常の MIME タイプ。（初期値）multipart/form-data子要素に input（type="file"）要素が含まれている時に指定する。text/plain デバック時に有用な MIME タイプ。 - novalidate
…フォームデータを送信する時に検証しないことを指定する。論理値で値なし。
この属性を指定していない場合は、既定の設定を button 要素や input（type="submit"）など の formnovalidate 属性で上書きすることが可能。 - accept-charset
…フォームデータを送信するサーバーが受け付ける文字エンコーディングを指定を空白区切りのリストで指定する。
初期値は、ページのエンコーディングと同じ。 - autocomplete
… input 要素がブラウザによる値の入力補完を受け付けるか否かを以下の値で指定する。必ず動作するわけではなくブラウザの仕様に依存する。
off ブラウザは自動的に項目を補完しない。on ブラウザは自動的に項目を補完することがある。 - name…フォームの名前を指定する。
- rel
…フォームが存在する文章と送信先のリソースの関係を指定する。
注釈を表す値には external | nofollow | opener | noopener | noreferrer がある。
リンク種別を表す値には help | prev | next | search | license がある。
これらの値を空白区切りのリストで指定する。
使用上の注意事項
- レイアウトの初期値はブロックレベル。
- 文章の改行に影響を与える。
フレックスレイアウト
フレックスレイアウトとは、Flexible Box Layout Module のことで、フレキシブルで簡単にレイアウトが組める。
項目の横並びは、float や inline-block でもできますがフレックスレイアウトを使用すると色々なレイアウトが簡単に作れる。
フレックスレイアウトのメリットは
「① CSSがシンプルな記述で済む、② 垂直方向の位置を柔軟に調整できる、③ CSSだけで並び順や折り返しを簡単に調整できる」などがある。
基本形
フレックスレイアウトでは、親要素は Flex コンテナ、子要素は Flex アイテムと呼ばれる。
親子関係が出来れば ul などの他のタグでも構成可能。
HTML
<p>Flexコンテナ（親要素）</p>
<div class="container">
<div class="item">Flexアイテム-1（子要素-1）</div>
<div class="item">Flexアイテム-2（子要素-2）</div>
<div class="item">Flexアイテム-3（子要素-3）</div>
</div>
- 親要素に「display: flex;」を指定すると、親要素は block 属性になり直下の子要素が横並びになる。
- 親要素に「display: inline-flex」を指定すると、親要素は inline-block 属性になる。
CSS
.container {
display: flex;
padding: 10px;
background-color: pink;
border: 1px #333 solid;
}
.item {
padding: 10px;
background-color: paleturquoise;
border: 1px #333 solid;
}
Flex コンテナ（親要素）に指定可能なプロパティ
display（Flex コンテナ作成）
display: コンテナ属性;
Flex コンテナの作成を指定する。display プロパティは多くの値を持つが、今回はフレックスレイアウトに関する値に関して記載。
コンテナ属性は以下の値を指定すること。
- flexblock…属性の Flex コンテナを作成する。
- inline-flexinline-block…属性の Flex コンテナを作成する。
使用上の注意事項
- この注意事項は、display プロパティの一般的な事項と同様。
- 初期値は、inline（インライン属性）。
- すべての要素に適用できる。
- 継承されない。
flex-direction（Flex アイテム並び順）
flex-direction: Flex アイテムの並び順;
Flex アイテムの並び順を指定する。Flex アイテムの並び順は下記の値で指定する。
- row…Flexアイテムを水平方向に左から右へと配置
- row-reverse…Flexアイテムを水平方向に右から左へと配置
- column…Flexアイテムを垂直方向に上から下へと配置
- column-reverse…Flexアイテムを垂直方向に下から上へと配置
使用上の注意事項
- 初期値は row。
- フレックスコンテナに適用できる。
- 継承されない。
flex-wrap（Flex アイテム折り返し）
flex-wrap: （Flex アイテム折り返し）;
Flex アイテムの折り返しを指定する。以下の値で指定する。
- nowrap…Flex アイテムを折り返さずに一列に配置
- wrap…複数行の Flex アイテムを上から下へと配置
- wrap-reverse…複数行の Flex アイテムを下から上へと配置。
使用上の注意事項
- 初期値は、nowrap 。
- フレックスコンテナーに適用できる。
- 継承されない。
備考・メモ
スマホはタップ→他の要素をタップするまではhover状態。
flex-direction と flex-wrap は一括で指定することもできる。（Flex アイテム並び・折り返し一括指定）
flex-flow: Flexアイテム並び・折り返し一括指定;
