lang-html1

=========================================================================================

<< BACK >>

CSSの `box-sizing: border-box;`

は、一言で言うと**「要素の『幅（width）』や『高さ（height）』に、パディング（内側の余白）とボーダー（枠線）を含める」**という設定です。

これを設定しない場合（デフォルト）と設定した場合では、レイアウトの計算方法が大きく変わります。

1. 設定しない場合（content-box）※デフォルト

通常、CSSで width: 300px; と指定すると、それはコンテンツ自体の幅を指します。そこにパディングや枠線を足すと、要素全体のサイズは指定した数値よりも大きくなってしまいます。

計算式: 全体の幅 = width + padding + border

例: width: 300px; / padding: 20px; / border: 5px; の場合実際に見える要素の横幅は 350px になります。

2. border-box を設定した場合

box-sizing: border-box; を指定すると、width は**パディングとボーダーを含んだ「全体の幅」**を指すようになります。どれだけ余白や枠線を太くしても、最初に決めた width からはみ出すことはありません。

計算式: 全体の幅 = width（この中に padding と border が収まる）

例: width: 300px; / padding: 20px; / border: 5px; の場合実際に見える要素の横幅は 300px のままです。（その分、文字などが入るコンテンツエリアが自動で狭くなります）

body, 
html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background-color: #1a1c23;
    color: #fff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    overflow-x: hidden;
}
1. 余白のリセット (margin: 0; padding: 0;)
ブラウザ（ChromeやSafariなど）は、デフォルトで body タグに数ピクセルの余白を持っています。

これらを 0 にすることで、コンテンツが画面の端にぴったりとくっつくようになり、意図しない隙間を排除します。

2. 高さの確保 (min-height: 100%;)
html と body の高さを、少なくともブラウザの表示領域（100%）分確保するという指示です。

これにより、コンテンツが少ないページでも背景色が途切れず、画面の一番下まで表示されるようになります。

3. 背景色と文字色 (background-color, color)
background-color: #1a1c23;: 濃いネイビーグレー（ダークモードのような色）を背景に設定します。

color: #fff;: 文字の色を白に設定します。

4. フォントの設定 (font-family)
左から順に、優先して使いたいフォントを指定しています。

'Helvetica Neue' や Arial があればそれを使い、どちらもなければOS標準のゴシック体（sans-serif）を使う、という指示です。

5. 横スクロールの禁止 (overflow-x: hidden;)
要素が画面の横幅からはみ出したとしても、横スクロールバーを出さないようにする設定です。

意図しないレイアウト崩れで画面が左右にガタつくのを防ぐ際によく使われます。

まとめた意味
このコード全体を日本語に訳すと、以下のようになります。

「ブラウザ標準の余白をすべて消し、画面全体をダークネイビー（#1a1c23）で塗りつぶします。文字は読みやすい白のサンセリフ体（ゴシック系）にし、コンテンツがはみ出しても横スクロールはさせない、モダンでクリーンな土台を作ります。」

1. 構造上の関係（親子）

HTMLのドキュメントにおいて、html はすべての要素の頂点にある「ルート要素」であり、body はその中に含まれる「子要素」です。

HTML

<html> <head> </head>
  <body> </body>
</html>

2. 役割の違い

よくある例えですが、Webページを「人」や「家」に例えると役割がはっきりします。

要素	役割	例え（家）	例え（人）
`html`	全体の枠組み・設定	敷地・土台	戸籍・設計図
`body`	目に見える中身	家具や壁紙	肉体・服

html 要素: ページ全体の言語設定（lang="ja"）や、フォントサイズの基準（rem 単位の計算根拠）などを司ります。
body 要素: ブラウザの画面に映るすべてのコンテンツ（テキスト、画像、ボタンなど）を配置する場所です。

3. CSSでの挙動の違い

先ほど提示されたコードに関連して、初心者の方が混乱しやすいポイントが「背景色」と「高さ」です。

背景色の特殊ルール:本来、背景は body に塗るものですが、html に背景色が指定されていない場合、body の背景色が html（画面全体）まで「浸食」して塗りつぶすという特殊なルールがあります。
高さの連動:body で height: 100% を使いたい場合、親である html にも height: 100% が設定されていないと、基準となる高さが定まらず、正しく100%になりません。

まとめ

html は「ブラウザのタブ全体」を支配する大きな枠組み。
body は「実際にユーザーが見るコンテンツ」を入れる箱。

今のコードで html, body { ... } とセットで書いているのは、**「ページの土台も、中身の箱も、両方まとめて同じルール（背景色や高さ）を適用して、画面全体を統一しよう」**としているからです。

.bg-fixed-back {
    width: 1000px;
    margin: 0 auto;
    background-image: url('./lv1/img/rasp-back.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;

    min-height: 100vh;
    position: relative;
    z-index: 1;
    padding: 5px; 

    display: flex; 
    flex-direction: column; 
    align-items: center;

    flex-shrink: 0;
}

ご提示いただいたCSSクラス .bg-fixed-back は、**「画面の中央に配置され、背景画像が固定された、コンテンツのメインコンテナ」**を作るための設定ですね。

非常にリッチな視覚効果を狙ったコードです。それぞれのプロパティがどんな役割を果たしているか、整理して解説します。

1. サイズと配置

width: 1000px;: 横幅を1000pxに固定します。
margin: 0 auto;: 左右の余白を自動調整し、この1000pxの箱を画面の中央に寄せます。
flex-shrink: 0;: 親要素が display: flex だった場合でも、この箱が1000pxより小さく潰されないようにします。

2. 背景画像の特殊演出（ここが肝！）

ここがこのクラスの最大の特徴です。

background-attachment: fixed;: スクロールしても背景画像だけはその場に固定されます。中身の文字だけが動く、パララックス（視差効果）のような演出になります。
background-size: cover;: 画像を隙間なく、かつ縦横比を保ったままエリアいっぱいに広げます。
background-position: center;: 画像の中心が常に中央に来るようにします。

3. 高さの確保と重なり

min-height: 100vh;: 最低でもブラウザの表示画面いっぱいの高さを確保します。コンテンツが少なくても、背景が途切れません。
z-index: 1; / position: relative;: この要素を他の要素（もしあれば）より手前に表示させるための設定です。

4. 中身の並べ方（Flexbox）

display: flex; / flex-direction: column;: 中身の要素を縦に並べます。
align-items: center;: 縦に並んだ中身を、横方向の真ん中に揃えます。
padding: 5px;: 内側にわずかな余白を作り、中身が枠線ぴったりにくっつくのを防ぎます。

注意点：スマートフォン表示

このコードには1つだけ懸念点があります。 width: 1000px; と固定されているため、画面幅が1000px以下のスマホなどで見ると、横にはみ出して（突き抜けて）しまいます。

もしスマホ対応も考えるなら、以下のように書き換えるのが一般的です。

CSS

.bg-fixed-back {
    width: 100%;       /* 基本は幅いっぱい */
    max-width: 1000px; /* でも1000px以上にはならない */
    /* ...他の設定はそのまま... */
}

あなたのコードでは、以下の設定が組み合わさっています。

background-image: 画像を読み込む。
background-size: cover;: 画像を画面いっぱいに引き延ばす。
background-repeat: no-repeat;: **「もし」**画像がエリアより小さくても、繰り返さない。

なぜこれが必要なの？ background-size: cover; を使っている場合、基本的には画像が隙間なく広がるため、画像が繰り返される（タイル状になる）ことはまずありません。

しかし、画像の読み込みに失敗したときや、ブラウザの特殊な挙動、あるいは非常に複雑なレイアウト崩れが起きた際に、「変な隙間ができても絶対にタイル状に並べないでね」という保険として書くのがプロの定石（お約束）になっています。

まとめ

このCSSを適用すると、**「画面中央に幅1000pxの柱のようなエリアができ、その背景にはスクロールしても動かない写真がどっしりと構えている」**という、非常にかっこいいレイアウトになります。

.info-card {
    width: 100%; 
    max-width: 900px;
    padding: 10px 30px;
    border-radius: 20px;
    transition: 0.3s;
    background: rgba(0, 0, 0, 0.6); /* 背景を少し暗く */
    border: 1px solid var(--theme-bg);
    margin: 30px 0;
}

このコードは、メインのコンテンツ（1000pxの箱）の中に置く**「半透明でおしゃれなカード型の枠」**を作るための設定ですね。

それぞれのプロパティが、見た目にどう影響するか解説します。

1. サイズとレスポンシブ

width: 100%;: 基本は親要素（先ほどの1000pxの箱）いっぱいに広がります。
max-width: 900px;: 親要素が広くても、このカード自体は 900px 以上には大きくならないように制限しています。左右に少しゆとりができる設計です。

2. 余白と角丸

padding: 10px 30px;: カードの内側に余白を作ります。
- 上下：10px
- 左右：30px（文字が左右の端にぶつからないように広めに設定されています）
border-radius: 20px;: 四隅をかなり丸くします。これにより、モダンで柔らかい印象になります。

3. 背景色（ここがポイント！）

background: rgba(0, 0, 0, 0.6);:
- 0, 0, 0 は「黒」を指します。
- 0.6 は**不透明度（60%）**です。
- 効果: 後ろの背景画像（rasp-back.jpg）がうっすら透けて見える「グラスモーフィズム」に近い、奥行きのあるデザインになります。

4. 枠線とアニメーション

border: 1px solid var(--theme-bg);:
- var(--theme-bg) というのは、CSS変数（別の場所で定義された色）を使っています。統一感のある枠線が引かれます。
transition: 0.3s;:
- これは「変化のスピード」です。例えば、後から「マウスを乗せた時に色を変える（hover）」といった設定を追加した際、パッと変わるのではなく、0.3秒かけてふわっと滑らかに変化するようになります。

5. 外側の余白

margin: 30px 0;:
- 上下に 30px の隙間を開けます。カードが複数並んだときに、くっつきすぎないようにしています。

まとめたイメージ

このCSSを適用すると、以下のような見た目のパーツになります：

背景画像の上に、角が丸くて黒っぽい「半透明の板」が浮いているような状態。中身の文字は読みやすく、かつ後ろの景色も透けて見える、とても洗練されたカード。

=========================================================================================

1. CSSプロパティとしての `display: table`

今回、リストの中央寄せに使用したのがこの設定です。

通常、<ul>（リスト）などの要素は「ブロック要素」と呼ばれ、横幅いっぱいに広がろうとする性質があります。これを display: table; に設定すると、要素の挙動が以下のように変化します。

コンテンツ幅にフィットする: 要素の横幅が、中身（文字や画像）の長さに合わせて自動的に縮まります。
マージンの自動計算が可能になる: 幅が中身に合わせて確定するため、margin: auto; を指定することで、親要素の中央に配置できるようになります。

なぜこれを使ったのか？ text-align: center; を親要素にかけるだけでは、リストの「中身のテキスト」が中央揃えになってしまい、行頭の・（ポインタ）の位置がバラバラになってしまいます。display: table; を使うことで、**「リストの形（左揃え）を保ったまま、塊として中央に置く」**ことが可能になります。

=========================================================================================

type=”number”

数値入力専用の入力フィールドを作成

基本的な書き方
<label for="age">年齢:</label>
<input type="number" id="age" name="age" min="0" max="120">

　属性	　　　　　　　　　説明	　　　　　　　　　　　　　例
　min	　　　　入力できる最小値を指定します。	　　　min="1"
　max	　　　　入力できる最大値を指定します。	　　　max="100"
　step	　　　　数値の増減の間隔を指定します　　　　　step="0.5"
　　　　　　　　（デフォルトは 1）。	
　value	　　　　初期状態の数値を設定します。	　　　value="20"
　placeholder	入力ヒントとして薄い文字を表示します。placeholder="例: 25"

小数点を許可する方法
デフォルトでは整数しか入力できません。小数点を含めたい場合は、step 属性を調整します。
    特定の刻み（例：0.1単位）にする場合: step="0.1"
    任意の小数を許可する場合: step="any"

<input type="number" step="any">

利用上のヒントと注意点

    モバイルでの表示: 
　　　　　スマートフォンでこのフィールドをタップすると、自動的に数字キーボードが表示
　　　　　されるため、ユーザーの利便性が向上します。

    数値以外のバリデーション: 
　　　　　type="number" を使うと、ユーザーがアルファベットを打ち込むのを防げますが、
　　　　　より確実なチェックのために、送信後のサーバー側でのチェックも忘れないようにしましょう。

   「数字の文字列」には不向き: 
　　　　　クレジットカード番号、電話番号、郵便番号などは「数値（計算するもの）」ではなく
　　　　　「数字の羅列（ID）」です。これらには type="text" や type="tel" を使うのが一般的です
　　　　　（スピンボタンが表示されると邪魔になるため）。

<< BACK >>

=========================================================================================

selected

HTMLのドロップダウンリスト（select要素）でoption要素にselected属性を追加すると、ページ読み込み時にその項目が選択される。

<select name="mySelect">
  <option value="apple">りんご</option>
  <option value="banana" selected>バナナ</option> // ← これがデフォルトで選択される
  <option value="orange">みかん</option>
</select>

<< BACK >>

=========================================================================================

margin

要素の外側に余白（スペース）を設定するためのプロパティ。
主なmarginの指定方法

一括指定（全方向）
- margin: 10px; → 上下左右すべてに10pxの余白。
一括指定（上下・左右）
- margin: 10px 20px; → 上下に10px、左右に20pxの余白。
一括指定（上・左右・下）
- margin: 10px 20px 30px; → 上に10px、左右に20px、下に30pxの余白。
一括指定（上・右・下・左：時計回り）
- margin: 10px 20px 30px 40px; → 上(10px)、右(20px)、下(30px)、左(40px)の順。
個別指定（特定の辺のみ）
- margin-top: 10px; (上)
- margin-right: 20px; (右)
- margin-bottom: 30px; (下)
- margin-left: 40px; (左)
auto（自動調整）
- margin: 0 auto; などでブロック要素の左右マージンをautoにすると、親要素内で中央寄せができます。

marginの特徴

マージンの相殺: 上下のmarginは、隣接する要素間で大きい方の値が適用される（相殺される）ことがあります。
負の値: 負の値を指定すると、要素を重ねて表示するなど、通常より近づけることができます。
背景: margin領域は透過（背景色なし）になります

<< BACK >>

=========================================================================================

<input>

ユーザーからデータを受け取る

<input> の型

指定しない場合の既定の型は text です。

型	説明
button	プッシュボタンで、既定の動作を持たず、`value` 属性の値（既定では空）を表示します。
checkbox	チェックボックスで、選択または未選択のうちひとつの値をとることができます。
color	色を指定するためのコントロールです。対応しているブラウザーでは、アクティブになったときにカラーピッカーが開きます。
date	日付（時刻を除いた年、月、日）を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは年月日の数値のホイールが開きます。
datetime-local	タイムゾーン情報がない日付と時刻を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは日付および時刻部分の数値のホイールが開きます。
email	電子メールアドレスを編集するための欄です。`text` 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。
file	ユーザーがファイルを選択するコントロールです。`accept` 属性を使用して、コントロールが選択することができるファイル形式を定義することができます。
hidden	表示されないコントロールですが、その値はサーバーに送信されます。隣の列には例がありますが、非表示です。
image	グラフィックの `submit` ボタンです。`src` 属性で定義された画像を表示します。`alt` 属性は `src` の画像が見つからないときに表示されます。
month	タイムゾーン情報がない年と月を入力するためのコントロールです。
number	数値を入力するためのコントロールです。スピナーを表示し、既定の検証を追加します。動的キーボードを持つ一部の端末では、テンキーを表示します。
password	入力値を隠す単一行テキストフィールド。サイトが安全ではない場合はユーザーに警告します。
radio	ラジオボタンで、同じ `name` の値を持つ複数の選択肢から一つの値を選択することができます。
range	厳密な値であることが重要ではない数値を入力するためのコントロールです。範囲のウィジェットを表示し、既定では中央の値になります。 `min` と `max` の組み合わせで、受け入れる値の範囲を定義することができます。
reset	フォームのコントロールを既定値に初期化するボタンです。推奨しません。
search	検索文字列を入力するための単一行のテキスト欄です。入力値から改行が自動的に取り除かれます。対応しているブラウザーでは、入力欄を初期化するための削除アイコンが表示されることがあり、欄の内容を消去するために使用することができます。動的なキーパッドを持つ一部の端末では、Enter キーの代わりに検索アイコンを表示します。
submit	フォームを送信するボタンです。
tel	電話番号を入力するためのコントロールです。動的なテンキーを備えた一部の機器では、電話用のテンキーを表示します。
text	既定値です。単一行のテキスト入力欄です。改行は自動的に入力値から取り除かれます。
time	タイムゾーン情報がない時刻を入力するためのコントロールです。
url	URL を入力するための入力欄です。`text` 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。
week	年と週番号で構成される日付を入力するためのコントロールです。週番号はタイムゾーンを伴いません。

属性

属性	型	説明
`accept`	`file`	ファイルアップロードコントロールで期待されるファイル形式のヒント
`alt`	`image`	image 型の alt 属性です。アクセシビリティのために必要です。
`autocapitalize`	`url`, `email`, `password` を除くすべて	入力されたテキストの自動大文字化を制御します。
`autocomplete`	`checkbox`、`radio`、ボタンを除くすべて	フォームの自動補完機能のためのヒント
`capture`	`file`	ファイルアップロードコントロールのメディアキャプチャ入力方法
`checked`	`checkbox`, `radio`	コマンドやコントロールがチェックされているか
`dirname`	`hidden`, `text`, `search`, `url`, `tel`, `email`	フォーム送信時に要素の書字方向を送信するために使用するフォームフィールドの名前
`disabled`	すべて	コントロールが無効であるかどうか
`form`	すべて	コントロールを form 要素に関連付ける
`formaction`	`image`, `submit`	フォームの送信に使用する URL
`formenctype`	`image`, `submit`	フォームの送信に使用するデータセットのエンコード種別
`formmethod`	`image`, `submit`	フォームの送信に使用する HTTP メソッド
`formnovalidate`	`image`, `submit`	フォームの送信でフォームの検証をバイパス
`formtarget`	`image`, `submit`	フォーム送信に使用する閲覧コンテキスト
`height`	`image`	`<img>` の height 属性と同じで、垂直方向の大きさ
`list`	`hidden`, `password`, `checkbox`, `radio`, ボタンを除くすべて	自動補完の選択肢の入った `<datalist>` の id 属性の値
`max`	`date`, `month`, `week`, `time`, `datetime-local`, `range`	最大値
`maxlength`	`text`, `search`, `url`, `tel`, `email`, `password`	`value` の最大長（文字数）
`min`	`date`, `month`, `week`, `time`, `datetime-local`, `range`	最小値
`minlength`	`text`, `search`, `url`, `tel`, `email`, `password`	`value` の最短長（文字数）
`multiple`	`email`, `file`	論理属性。複数の値を許可するかどうか
`name`	すべて	入力欄コントロールの名前。名前/値の組の部分としてフォームと一緒に送信される
`pattern`	`text`, `search`, `url`, `tel`, `email`, `password`	有効になるために `value` が一致する必要があるパターン
`placeholder`	`text`, `search`, `url`, `tel`, `email`, `password`, `number`	フォームコントロールが空の時にフォームコントロール内に表示される内容
`popovertarget`	`button`	`<input type="button">` がポップオーバー要素の制御用として指定する
`popovertargetaction`	`button`	ポップオーバー制御で実行するアクションを指定する
`readonly`	`hidden`, `range`, `color`, `checkbox`, `radio`, ボタンを除くすべて	論理属性。値が編集できない
`required`	`hidden`, `range`, `color`, ボタンを除くすべて	論理属性。フォームが送信できるようにするためには値が必要
`size`	`text`, `search`, `url`, `tel`, `email`, `password`	コントロールの大きさ
`src`	`image`	`<img>` の `src` 属性と同じで、画像リソースのアドレス
`step`	`date`, `month`, `week`, `time`, `datetime-local`, `range`	有効と見なされる増分
`type`	すべて	フォームコントロールの型
`value`	すべて	コントロールの値。HTML で指定された場合、初期値に相当する
`width`	`image`	`<img>` の `width` 属性と同じで、水平方向の大きさ

サンプルデモ

type=”text”：1行テキストボックスを作る。

`1`	`<input` `type="text"` `name="text"` `value="初期値（任意の値）">`

type=”password”：入力した内容にマスクがかかるテキストボックスを作る。

`1`	`<input` `type="password"` `name="password"` `value="1234">`

type=”radio”：ラジオボタンを作る。

`1`	`<input` `type="radio"` `name="radio"` `value="radio1">radio1`

`2`	`<input` `type="radio"` `name="radio"` `value="radio2">radio2`

type=”checkbox”：チェックボックスを作る。

`1`	`<input` `type="checkbox"` `name="checkbox"` `value="checkbox1">checkbox1`

`2`	`<input` `type="checkbox"` `name="checkbox"` `value="checkbox2">checkbox2`

type=”file”：ファイル参照ボタンを作る。

`1`	`<input` `type="file"` `name="file">`

type=”hidden”：非表示のテキストボックスを作る。

`1`	`<input` `type="hidden"` `name="hidden"` `value="初期値（任意）">`

type=”submit”：フォームの実行ボタンを作る。

`1`	`<input` `type="submit"` `value="実行する">`

type=”image”：画像を使ったフォームの実行ボタンを作る。

`1`	`<input` `type="image"` `src="btn_send.png"` `width="224"` `height="64"` `alt="送信する"` `value="送信する">`

type=”reset”：フォームに入力した内容をリセットするボタンを作る。

`1`	`<input` `type="reset"` `value="リセットする">`

type=”button”：汎用的なボタンを作る。

`1`	`<input` `type="button"` `value="ボタン">`

size=”20″：テキストボックスのサイズを変更する。

`1`	`<input` `type="text"` `name="text"` `value=""` `size="10">`

`2`	`<input` `type="text"` `name="text"` `value=""` `size="20">`

maxlength=”10″：入力できる文字数を制限する。

`1`	`<input` `type="text"` `name="text"` `value=""` `maxlength="10">`

<< BACK >>

=========================================================================================

CSSの box-sizing: border-box;

1. 設定しない場合（content-box）※デフォルト

2. border-box を設定した場合

1. 構造上の関係（親子）

2. 役割の違い

3. CSSでの挙動の違い

まとめ

1. サイズと配置

2. 背景画像の特殊演出（ここが肝！）

3. 高さの確保と重なり

4. 中身の並べ方（Flexbox）

注意点：スマートフォン表示

まとめ

1. サイズとレスポンシブ

2. 余白と角丸

3. 背景色（ここがポイント！）

4. 枠線とアニメーション

5. 外側の余白

まとめたイメージ

1. CSSプロパティとしての display: table

type=”number”

selected

margin

<input>

<input> の型

属性

サンプルデモ

type=”text”：1行テキストボックスを作る。

type=”password”：入力した内容にマスクがかかるテキストボックスを作る。

type=”radio”：ラジオボタンを作る。

type=”checkbox”：チェックボックスを作る。

type=”file”：ファイル参照ボタンを作る。

type=”hidden”：非表示のテキストボックスを作る。

type=”submit”：フォームの実行ボタンを作る。

type=”image”：画像を使ったフォームの実行ボタンを作る。

type=”reset”：フォームに入力した内容をリセットするボタンを作る。

type=”button”：汎用的なボタンを作る。

size=”20″：テキストボックスのサイズを変更する。

maxlength=”10″：入力できる文字数を制限する。

CSSの `box-sizing: border-box;`

1. CSSプロパティとしての `display: table`