CSS辞書

レスポンシブデザインを実装できる

Transition/Animation（CSSアニメーション）

ローダー

$cBlack: black;

.three-dot-spinner {
  text-align: center;

  & div{
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: $cBlack;
    border-radius: 50%;
    animation: sk-bouncedelay 1.4s infinite;
  }

  & .bounce1 {
    animation-delay: -0.32s ;
  }

  & .bounce2 {
    animation-delay: -0.16s ;
  }
}

@keyframes sk-bouncedelay {
  0% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
  80% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

スピナーのスタイル

.three-dot-spinner {
  text-align: center;

  & div {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: $cBlack; // ここで black が使用される
    border-radius: 50%; // 丸い形にする
    animation: sk-bouncedelay 1.4s infinite; // アニメーションを指定
  }

  & .bounce1 {
    animation-delay: -0.32s; // 最初のドットのアニメーション開始を遅らせる
  }

  & .bounce2 {
    animation-delay: -0.16s; // 2番目のドットのアニメーション開始を遅らせる
  }
}

.three-dot-spinner は、スピナー全体のクラスです。text-align: center; で、スピナーの中身を中央に配置します。& div の部分では、スピナーの各ドットのスタイルを設定しています：

• display: inline-block; で、ドットを横に並べます。
• width と height で、各ドットのサイズを設定。
• background-color: $cBlack; で、背景色を黒に設定。
• border-radius: 50%; で、ドットを丸くします。
• animation: sk-bouncedelay 1.4s infinite; で、アニメーションを指定し、1.4秒間隔で無限に繰り返します。

@keyframes sk-bouncedelay {
  0% {
    transform: scale(0); // 初めは小さい
  }
  40% {
    transform: scale(1); // 大きくなる
  }
  80% {
    transform: scale(0); // 再び小さくなる
  }
  100% {
    transform: scale(0); // 小さい状態で終わる
  }
}

• @keyframes sk-bouncedelay では、アニメーションの段階を定義しています。
  • 0% では、ドットはスケールが 0（見えない状態）。
  • 40% では、ドットが最大のサイズ（スケール 1）。
  • 80% では、再び小さくなる（スケール 0）。
  • 100% では、また小さく（スケール 0）して終了。

まとめ

このコード全体で、黒いドットが中央に並び、アニメーションによって跳ねるように見えるスピナーを作成します。各ドットが少しずつずれてアニメーションすることで、より自然な動きを演出しています。

以下は、CSSのアニメーションに関連する各プロパティの意味です。

1. animation-play-state

• 説明: アニメーションの再生状態を設定します。
• 値:
  • running: アニメーションが再生中。
  • paused: アニメーションが一時停止中。

2. animation-timing-function

• 説明: アニメーションの進行速度を設定します。時間の経過に対するアニメーションの速度を定義できます。
• 値:
  • linear: 一定の速度で進行。
  • ease: 初めは遅く、次第に速く、最後は遅くなる。
  • ease-in: 初めが遅く、徐々に速くなる。
  • ease-out: 初めが速く、徐々に遅くなる。
  • ease-in-out: 初めと終わりが遅く、中間が速くなる。

3. animation-delay

• 説明: アニメーションが開始するまでの遅延時間を設定します。
• 値: 時間を指定（例: 2s, 500ms など）。

4. animation-iteration-count

• 説明: アニメーションの繰り返し回数を設定します。
• 値:
  • 数値: 繰り返す回数（例: 3）。
  • infinite: 無限に繰り返す。

5. animation-direction

• 説明: アニメーションの進行方向を設定します。
• 値:
  • normal: 通常の方向（1回目は通常通り、2回目も同じ）。
  • reverse: 逆の方向（1回目は通常通り、2回目は逆）。
  • alternate: 偶数回目は逆の方向で、奇数回目は通常通り。
  • alternate-reverse: 偶数回目は通常通りで、奇数回目は逆の方向。

6. animation-fill-mode

• 説明: アニメーションが終了した後のスタイルを設定します。
• 値:
  • none: アニメーションが終了した後、スタイルは元に戻る。
  • forwards: 最後のキーフレームのスタイルを保持。
  • backwards: 最初のキーフレームのスタイルを適用。
  • both: 最後のキーフレームと最初のキーフレームのスタイルを両方適用。

reset.css

destyle.css

1. ボックスモデルと境界線のリセット

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

全ての要素（*）と疑似要素（::before、::after）に対して、ボックスモデルのサイズ計算をborder-boxに設定し、要素の枠線が幅に含まれるようにしています。加えて、デフォルトの境界線を「なし」に設定しています。

2.ドキュメント設定

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

• line-height: 1.15; → 全てのブラウザで統一された行間を設定しています。
• -webkit-text-size-adjust: 100%; → iOSの画面回転時に自動的にフォントサイズが変更されるのを防ぎます。
• -webkit-tap-highlight-color: transparent; → iOSデバイスでリンクをタップした際のグレーのハイライトを無効化します。

3.要素のマージンをリセット

body {
  margin: 0;
}

4.見出しのフォントと余白をリセット

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

5.リストのスタイルをリセット

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

順序付きリスト（ol）と順序なしリスト（ul）のデフォルトの余白やインデント、リストのマーカー（list-style）をリセットしています。

6.リンクやテキストのデフォルトスタイルをリセット

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

リンク（aタグ）の背景色や下線をリセットし、親要素のカラー設定を引き継ぐようにしています。

7.テキストレベルの装飾

b,
strong {
  font-weight: bolder;
}

bやstrongタグで囲まれたテキストのフォントウェイトを「より太く（bolder）」します。

8.インラインコードのフォント

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

9.小さな文字サイズ

small {
  font-size: 80%;
}

smallタグを使用した場合、文字サイズを通常の80％に設定しています。

10.上付き文字・下付き文字

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

sub（下付き文字）とsup（上付き文字）のデフォルトのフォントサイズと位置を調整し、親要素との行間を崩さないように設定しています。

CDN

CDNで読み込むとは、「コンテンツデリバリーネットワーク（Content Delivery Network, CDN）」を通じてファイルをウェブページに読み込むことを指します。CDNは、世界中に分散されたサーバー群を利用して、ユーザーがアクセスする際に最も近いサーバーからコンテンツ（例えば、CSSやJavaScriptなどのファイル）を配信する仕組みです。

CDNを使って読み込む具体例

例えば、CSSライブラリ「destyle.css」をCDNから読み込む場合、HTMLファイルの<head>タグ内に以下のように書きます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.css">

CDNで読み込むとは、「コンテンツデリバリーネットワーク（Content Delivery Network, CDN）」を通じてファイルをウェブページに読み込むことを指します。CDNは、世界中に分散されたサーバー群を利用して、ユーザーがアクセスする際に最も近いサーバーからコンテンツ（例えば、CSSやJavaScriptなどのファイル）を配信する仕組みです。

CDNで読み込むメリット

1. 高速化: ユーザーに最も近いサーバーからファイルが提供されるため、読み込み速度が速くなります。
2. 信頼性の向上: 世界中に複数のサーバーが存在するため、特定のサーバーがダウンしても他のサーバーからコンテンツが配信され、安定性が増します。
3. サーバー負荷の軽減: 自分のウェブサーバーではなく、CDN上のサーバーからファイルが配信されるため、自分のサーバーにかかる負荷を減らすことができます。
4. キャッシュ: 多くのユーザーが同じCDNを使用している場合、既に他のサイトで使用したファイルがキャッシュされていることがあり、再度ダウンロードする必要がなくなります。

CDNを使って読み込む具体例

例えば、CSSライブラリ「destyle.css」をCDNから読み込む場合、HTMLファイルの<head>タグ内に以下のように書きます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.css">

これにより、destyle.cssが自分のサーバーからではなく、CDN（この場合はjsDelivr）から読み込まれることになります。

CDNを使うと、特定のライブラリやフレームワークを簡単にインターネット上で共有されている最新のバージョンから素早く読み込むことができます。

flexboxが使える

float 要素を右または左へ寄せて配置

clear・・・ 要素の回り込み（float）を解除

一般的なCSSプロパティの記述順

1. 位置と表示

要素の配置や表示方法を決定するプロパティ。

• position
• top, right, bottom, left
• z-index
• display
• visibility
• float
• clear
• vertical-align
• overflow, overflow-x, overflow-y
• bottom
• left
• right

2. ボックスモデル

要素の大きさや間隔に関連するプロパティ。

• width, height
• max-width, max-height
• min-width, min-height
• margin, margin-top, margin-right, margin-bottom, margin-left
• padding, padding-top, padding-right, padding-bottom, padding-left
• border, border-top, border-right, border-bottom, border-left
• border-radius
• box-sizing

3. フォント・テキスト・文字色

テキストの表示に関連するプロパティ。

• color
• font, font-family, font-size, font-style, font-weight
• text-align
• text-decoration
• text-indent
• letter-spacing
• line-height
• text-overflow /* 要素からはみ出した文字を省略する */
• white-space /* テキスト内の空白、タブ、改行の表示の仕方を指定する */
• word-break /* 文章の改行の仕方について指定する */
• writing-mode /* 文字表記の方向（縦横）を指定する */
• font-feature-settings・・・ OpenTypeフォント機能の利用について、有効/無効を指定する
• font-kerning・・・ 欧文フォントにカーニングを適用する
• font-stretch・・・ 文字フォントの横幅の広さを指定する
• font-variant・・・ 文字フォントの表示に関するサブプロパティの値をまとめて指定する
• font-variant-caps・・・ スモールキャップス（small caps）などの、文字フォントのグリフ（字形）を指定する
• font-variant-ligatures・・・ 隣り合った文字フォントの合字（リガチャ）を指定する
• font-variant-numeric・・・ 数字の表示形式を指定する
• text-decoration-color・・・ 文字の装飾線の色を指定する
• text-decoration-line・・・ 文字の装飾線の位置を指定する
• text-decoration-style・・・ 文字の装飾線の種類を指定する
• text-emphasis・・・ 要素内のテキストに付与する強調マークに関する指定を行う
• text-emphasis-color・・・ 要素内のテキストに付与する強調マークの色を指定する
• text-emphasis-position・・・ 要素内のテキストに付与する強調マークの位置を指定する
• text-emphasis-style・・・ 要素内のテキストに強調マークを付与する
• text-transform・・・ テキストの大文字表示・小文字表示を指定する

「文字揃え・段落の振る舞い」

• direction・・・ 文字表記の方向（左右）を指定する
• line-break・・・ 要素内での行末や行頭の禁則処理の厳密さを指定する
• unicode-bidi・・・ 文字表記の方向（左右）を指定する
• word-spacing・・・ 単語の間隔を指定する

4. 背景と装飾

要素の背景や装飾に関連するプロパティ。

• background, background-color, background-image
• background-position, background-repeat, background-size
• background-attachment /* 背景画像の固定・移動を指定する */
• box-shadow
• border-radius

5. 外枠（ボーダー・アウトライン）

要素のボーダーやアウトラインに関連するプロパティ。

• border, border-top, border-right, border-bottom, border-left
• border-radius
• border-color
• border-style
• border-width, border-top-width, border-right-width, border-bottom-width, border-left-width
• border-image
• border-top-color, border-top-style, border-top-width
• border-bottom-color, border-bottom-style, border-bottom-width
• border-left-color, border-left-style, border-left-width
• border-right-color, border-right-style, border-right-width
• outline
• border-image-outset・・・ ボーダーイメージエリアを広げる
• border-image-repeat・・・ ボーダー（枠線）に指定された画像の繰り返し方法を指定する
• border-image-slice・・・ ボーダー（枠線）に指定された画像の使用範囲を指定する
• border-image-source・・・ ボーダー（枠線）に使用する画像ファイルを指定する
• border-image-width・・・ 画像ボーダーの太さを指定する
• outline-color・・・ アウトラインの色を指定する
• outline-offset・・・ アウトラインのオフセット値を指定する
• outline-style・・・ アウトラインのスタイルを指定する
• outline-width・・・ アウトラインの太さを指定する

6. カラム・レイアウト関連

Flexboxやグリッドレイアウトに関連するプロパティ。

• flex, flex-direction, flex-wrap
• align-items
• justify-content
• align-content /* flexコンテナ内の縦に余白がある場合にflexアイテムの並べ方を指定する */
• columns /* カラム幅とカラム数を指定する */
• flex-basis /* flexbox内のアイテムの固定幅を指定する */
• flex-flow /* flexbox内のアイテムの並び順と折り返しの指定をまとめて行う */
• flex-grow /* flexbox内のアイテムの伸びる倍率を指定する */
• flex-shrink /* flexbox内のアイテムの縮む倍率を指定する */
• order /* flexbox内のボックスの配置順序を指定する */
• align-self・・・ flexコンテナ内にあるflexアイテムの位置揃えを個別に指定する
• column-count・・・ カラム数を指定する
• column-fill・・・ カラム同士の高さ（長さ）を揃えるかどうかを指定する
• column-rule・・・ カラムの区切り線のスタイル・幅・色を指定する
• column-rule-color・・・ カラムの区切り線の色を指定する
• column-rule-style・・・ カラムの区切り線のスタイルを指定する
• column-rule-width・・・ カラムの区切り線の幅を指定する
• column-width・・・ カラム幅を指定する

7. リスト（list）関連

リストの表示に関連するプロパティ。

• list-style
• list-style-image・・・ リストマーカーに画像を指定する
• list-style-position・・・ リストマーカーの表示位置を指定する
• list-style-type・・・ リストマーカーの種類を指定する

8. 内容の挿入・置換

疑似要素で使用されるコンテンツ挿入に関するプロパティ。

• content
• counter-increment /* contentで挿入されたカウンタの値を進める */
• counter-reset /* contentで挿入されたカウンタの値をリセットする */

9. アニメーションとトランジション

アニメーションやトランジション効果に関連するプロパティ。

• animation
• animation-delay /* アニメーションが開始するタイミングを指定する */
• animation-direction /* アニメーションの再生方向を指定する */
• animation-duration /* アニメーションの再生一回分の時間の長さを指定する */
• animation-fill-mode /* アニメーションが再生されていない時にどのような状態で待機するかを指定する */
• animation-iteration-count /* アニメーションの繰り返し回数を指定する */
• animation-name /* アニメーションの名前を定義する */
• animation-play-state /* アニメーションを再生させるか一時停止させるか指定する */
• animation-timing-function /* アニメーションの再生タイミングに変化を付ける */
• transition
• transition-delay /* 時間によって変化するトランジション効果の要求が発生してから実際に開始するまでの時間を指定する */
• transition-duration /* 時間によって変化するトランジション効果が開始してから終了するまでの時間を指定する */
• transition-property /* 時間によって変化するトランジション効果の対象となるプロパティを指定する */
• transition-timing-function /* 時間によって変化するトランジション効果の変化に緩急を指定する */

10. 変形・トランスフォーム

要素を変形させるプロパティ。

• transform
• transform-origin /* 要素を変形させる際の基準点を指定する */
• transform-style /* 要素を変形させる際の基準点を指定する */
• backface-visibility・・・ 要素の裏面を見られるようにするかどうかを指定する
• perspective・・・ 子要素に対して遠近効果を指定する
• perspective-origin・・・ perspectiveで指定した遠近投影の基点となる位置を指定する

11. その他のプロパティ

特殊な効果やインタラクションに関連するプロパティ。

• cursor

::before と ::after

CSS（カスケーディングスタイルシート）で使われる疑似要素です。

1. ::before と ::after って何？

• ::before と ::after は、それぞれ指定した要素の「前」と「後ろ」に何かを追加するためのものです。
• 例えば、「ボタン」の前にアイコンを追加したり、リンクの後ろに矢印を表示したりすることができます。

2. どうやって使うの？

• これらはCSSで定義します。HTML側では何も追加する必要はありません。
• 一般的に content プロパティと一緒に使います。content は、表示するテキストやアイコン、画像を指定します。

4. このコードがすることは？

• 上記の例では、クラスが button のボタンの「前」にロケットアイコンが、「後ろ」に矢印アイコンが表示されます。
• ::before はボタンの前に、::after はボタンの後ろにそれぞれコンテンツを追加してくれます。

5. どんなときに便利？

• Webサイトをデザインする際、追加の装飾やちょっとしたアイコンなどをHTMLを書き換えずに加えたいときに便利です。
• また、サイトの見た目を調整するときに、コードを簡潔に保てるので、メンテナンスがしやすくなります。

6. 注意点

• ::before と ::after はブロック要素やインライン要素で使えますが、必ずしも全ての要素で効果的に機能するわけではないので、動作を確認することが重要です。
• 使う際には、display プロパティ（例えば block や inline-block など）を設定して、見た目を整えることも多いです。

box-shadow

box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2); は、CSSで要素に影をつけるプロパティです。このコードのそれぞれの数値には、影の位置やぼかし具合が定義されています。

各パラメータの意味

1. 0 (水平オフセット):
   • 影を横方向にどれくらいずらすかを指定します。0だと、左右にずれず、影は真下に付きます。
   • 正の値だと右方向に影がずれ、負の値だと左方向に影がずれます。
2. 4px (垂直オフセット):
   • 影を縦方向にどれくらいずらすかを指定します。ここでは影が下方向に4ピクセルずれることを示します。
   • 正の値だと影が下にずれ、負の値だと上にずれます。
3. 8px (ぼかしの半径):
   • 影のぼかし具合を指定します。数値が大きいほど、影はよりぼやけて広がります。
   • ここでは8ピクセルの範囲でぼかされています。
4. 4px (影の広がりの範囲):
   • 影の広がり具合を設定します。正の値だと影が広がり、負の値だと縮まります。
   • ここでは4ピクセル分、影が広がっています。
5. rgba(0, 0, 0, 0.2) (影の色):
   • 影の色をRGBA形式で指定しています。
   • rgba(0, 0, 0, 0.2)は「黒色」の20%の透明度（不透明度80%）の影を意味します。影の濃さを調整できます。

フクロウセレクタ

.Menu > * + * {
  border-left: 1px solid #888;
}

セレクターの意味

• .Menu: クラス名が Menu の要素を選択します。
• >: これは子孫セレクタではなく、直接の子要素を選択するためのセレクターです。つまり、.Menuクラスの要素に対して、直下の子要素を対象にします。
• * + *: この部分は、隣接兄弟セレクターです。ここでの * はすべての要素（div や li など、タグに関係なく）を意味し、+は前に要素がある場合に適用されます。つまり、2つ目以降の子要素をターゲットにします。具体的には、ある要素の次にもう1つ別の要素があれば、その次の要素に対してスタイルが適用されます。

Cursor

.Menu-Item {
  flex: 1;
  cursor: pointer;
  position: relative;
}

1. flex: 1;

• flex: 1は、Flexboxの子要素に適用されるプロパティです。
• 1 という値は、他の flex を持つ要素と比較して、その要素が利用可能なスペースを均等に占めるという意味です。例えば、flex: 1が3つの子要素に適用されている場合、親要素内で3つの子要素が均等に幅を分け合います。
  • この値は、 flex-grow 、 flex-shrink 、 flex-basis のショートハンドです。

具体例:

.Menu-Item が Flexbox レイアウトの子要素である場合、例えば横に並んだメニュー項目が親要素の幅全体に対して均等に広がります。

2. cursor: pointer;

cursor: pointer は、ユーザーが .Menu-Item 要素にマウスカーソルを重ねたときに、カーソルが手の形（ポインタ）に変わるように指定します。これは、クリックできる要素であることを視覚的に示すために使われます。

.Menu-Item に position: relative; を入れる理由

子要素に対する位置指定（positioning）を制御するためです。

具体的には、position: relative; を親要素である .Menu-Item に設定することで、その子要素が相対的な位置指定を基準に配置されるようになります。たとえば、もし子要素に position: absolute; を指定した場合、その子要素は .Menu-Item 内での位置に基づいて配置されます。

なぜ position: relative; が必要なのか

• 子要素に position: absolute; を使用する場合: 親要素に position: relative; がないと、子要素は画面全体や他の親要素を基準に絶対位置を決めてしまいます。position: relative; を使うことで、子要素が .Menu-Item の範囲内で動くようにできます。
• 影響を受けないレイアウト: relative そのものは要素の通常の位置に影響を与えませんが、子要素の絶対配置に影響します。これにより、他の要素に悪影響を与えることなく、子要素を .Menu-Item の中で動かせます。

.Menu-Item-Label {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 50px;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  color: #333;
}

で  position: relative;を入れる理由

.Menu-Item-Label に position: relative; を設定する理由は、他の要素と重なる可能性のある要素に対して、意図した位置を保持するためです。また、z-index: 10; と組み合わせることで、要素の重なり順（スタッキングコンテキスト）を制御します。

position: relative; の役割

1. z-index の有効化: z-index を機能させるには、要素に position: relative, absolute, fixed, または sticky のいずれかを設定する必要があります。position: relative; を指定することで、この要素が他の要素と重なった場合でも、z-index: 10; によって 前面に表示されるようになります。
2. 標準の位置からの微調整が可能: position: relative; は、要素が通常のフローの位置に表示されますが、必要に応じて top, left, right, bottom プロパティを使って微調整ができます。この例では特に指定されていませんが、将来的に位置を微調整する可能性を考慮して relative を入れておくこともあります。

実際に使うシナリオ

• 例えば、.Menu-Item-Label に重なる他の要素（例えばアイコンや装飾）がある場合、position: relative; と z-index: 10; の組み合わせによって、.Menu-Item-Label が常に他の要素より前面に表示されるようにできます。
• また、メニューの構造が複雑な場合やアニメーションの影響を受ける場合でも、relative を設定することで予期せぬ位置のずれを防ぎ、要素が意図した場所に留まります。

クラスを分ける理由

1. 構造とデザインの分離: .Menu-Item は構造を制御し、.Menu-Item-Label は見た目を制御しています。この分離により、コードがシンプルで管理しやすくなります。
2. 再利用性: 例えば、.Menu-Item-Label を他の部分でもラベルとして使いたい場合、スタイルを変更せずに使い回すことが可能です。
3. 柔軟性: 個別にスタイルを適用することで、必要に応じてメニュー項目のレイアウト（.Menu-Item）や表示部分のデザイン（.Menu-Item-Label）を簡単に変更できます。

まとめると、役割の違いによる分離と再利用性、柔軟性を高めるために、クラスを分けています。

remとem

どちらもフォントサイズや要素の幅、高さ、マージン、パディングなどに使える相対単位で、相対的にサイズを指定できるところが便利です。相対単位というのは、他の要素のサイズに基づいて決まる単位のことです。

CSSのremとemは、要素のサイズを指定するときに使う単位です。それぞれの特徴を高校生にもわかりやすく説明しますね！

rem（ルート エム）

• remとは？
  remは「root em」の略で、ページのルート（最初の）要素、つまり<html>のフォントサイズを基準にしてサイズを決める単位です。
• 使い方:
  デフォルトでは、ブラウザの標準フォントサイズは16pxです。たとえば、1remはデフォルトで16pxに相当します。
• 特徴：
  ページ全体で一貫したサイズを保ちやすく、メディアクエリなどでフォントサイズを変更しても、remの値はその変更に対応して自動的に調整されます。

html {
    font-size: 16px; /* ルートのフォントサイズが16px */
}
.example {
    width: 2rem; /* 16px × 2 = 32px */
}

em（エム）

emは、親要素のフォントサイズに基づく単位です。つまり、その要素が入っている親要素のサイズを基準にして決まります。

.parent {
    font-size: 20px; /* 親要素のフォントサイズ */
}
.child {
    font-size: 1.5em; /* 20px × 1.5 = 30px */
}

特徴:
親要素のフォントサイズに依存するため、入れ子が深くなるとサイズがどんどん大きくなったり小さくなったりすることがあります。例えば、.parentにfont-size: 20px;を設定し、その中の.childがfont-size: 1.5em;であれば、.childのフォントサイズは30pxになります。

どちらを使うべきか？

• remが向いている時:
  全体的に一貫したサイズを保ちたいとき、またはベースフォントサイズに応じて調整したいときに便利です。
• emが向いている時:
  親要素のサイズに基づいて柔軟に調整したいときに使います。ただし、計算が複雑になることもあるので注意が必要です。

transform-origin: top center;

CSSで要素を変形（回転、拡大縮小、移動など）するときに、どの位置を基準にして変形するかを決めるプロパティです。

• 意味: このプロパティは、変形の基準点を「要素の上端の中央」に設定します。つまり、要素の変形（例えば回転やスケール）が「上の真ん中」を中心に行われるようにするということです。
• 具体的に言うと:
  • top は要素の「上端」を指します。
  • center は要素の左右の「中央」を指します。

どう使われるのか

例えば、要素を回転させる場合、デフォルトでは要素の中心を基準に回転します。しかし、transform-origin: top center; を指定すると、要素の上端の中央を軸にして回転します。

イメージしやすい例

• 回転: 鉛筆を立てて、上の消しゴム部分を指で押して回すようなイメージです。消しゴム部分が回転の中心になるので、鉛筆の下側は大きく動きます。
• 拡大縮小: 要素が拡大する際に、上の真ん中を固定して左右や下方向に大きくなったり小さくなったりします。

opacity: 0; は、CSSで要素の透明度を設定するためのプロパティです。このプロパティの使い方を高校生にもわかりやすく説明しますね。

css.map ファイルは、CSSのデバッグを便利にするための「地図（マップ）」のような役割を持つファイルです。これを高校生にもわかりやすく説明しますね。

css.map とは？

• 役割: css.map ファイルは、元々書いたCSS（やSassやLESSなどのプリプロセッサで書いたスタイル）と、実際に使われているCSSファイルとの対応関係を示す「地図」のようなファイルです。
• 目的: ウェブブラウザの開発者ツールでデバッグを行う際に、どのCSSファイルのどの行が現在のウェブページの表示に影響しているかを分かりやすくしてくれます。

どうして必要なのか？

• プリプロセッサを使っている場合: SassやLESSなどのCSSプリプロセッサを使っていると、書いたコードがそのままではなく、変換されて別のCSSファイルとして出力されます。このとき、変換されたファイルのコードをデバッグするのは難しいです。css.map があれば、開発者ツールで元のコードがどこに対応しているかがすぐに分かります。
• 利便性: これがあると、例えば「どのファイルのどの行のスタイルがこの要素に適用されているのか？」という疑問に答えやすくなります。

イメージしやすい例

• 地図アプリと住所: 例えば、地図アプリで「今どこにいるのか？」を探すのに近いです。css.map があると、CSSファイルのどの部分が実際のウェブページに使われているのかという「場所」を教えてくれます。

css.map は、CSSのデバッグをしやすくするための「道しるべ」です。これがあると、ウェブサイトを作る際に書いた元のコードと実際の表示がどのようにつながっているのかが分かりやすくなります。簡単に言うと、どのスタイルがどこで使われているのかを教えてくれる「案内役」ですね。

transform: rotateZ(90deg); の意味

• 意味: transform は要素の変形（回転、拡大縮小、移動など）を行うプロパティです。
• rotateZ(90deg) は、Z軸（画面に対して垂直に突き出している軸）を中心に90度回転させるという意味です。

具体的にはどうなるのか

• 90度回転: rotateZ(90deg) を使うと、要素が時計回りに90度回転します。
• 回転の軸: Z軸を基準に回転するので、画面に対して「平面上で回る」ように見えます。想像してみると、本のページをめくるときに本を回すのと同じ動きです。

イメージしやすい例

• 時計の針: 時計の針が1時間分動くと90度回転するのと同じです。
• スマホの画面: スマホの画面を横向きにする感じで、上が右に移動して画面が横に倒れるイメージです。

opacity: 0; の意味

• 意味: opacity は要素の透明度を調整するプロパティです。値は0から1の範囲で指定し、0が完全に透明、1が完全に不透明（つまり見える）です。
• opacity: 0; とは:
  • opacity: 0; は、要素を完全に透明にします。つまり、その要素は画面上には見えなくなりますが、要素自体は存在しており、配置もそのままです。

perspective

3D効果を使って要素に奥行きを持たせるためのプロパティです。まるで、物体を遠近法で見るように、手前のものが大きく、奥のものが小さく見えるように表現。

1. transform-style: preserve-3d;

このプロパティは、3D空間での子要素の見え方を制御します。

• 意味: transform-style: preserve-3d; を使うと、親要素の中にある子要素も3D効果が反映されるようになります。簡単に言うと、親と子の関係が3D空間でもちゃんと保たれる、ということです。
• 例: 親要素が回転するだけではなく、その中にある子要素も一緒に3Dで見えるようにしたい場合に使います。

2. perspective: 300px;

このプロパティは、3D効果をつけたときの「遠近感」を設定します。

• 意味: perspective: 300px; は、「カメラの距離が300ピクセル離れている」という意味です。数字が小さいほど、要素が手前に飛び出して見え、大きいほど奥行きが浅くなります。
• 例: 例えば、perspective: 300px; を使うと、奥行き感が強くなり、手前のものが大きく、奥のものが小さく見えます。3Dの映画でメガネをかけると物が飛び出して見えるのと似ています。

使い方

• perspective: 1000px;: この場合、「カメラ」が1000ピクセル先にあるということです。値が小さくなると視点が近くなり、より強い遠近感が出ます。
• 値が大きくなると視点が遠くなり、遠近感が弱まります。

コード例

以下の例では、2つの四角形を回転させ、perspectiveの効果を見せます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSS Perspectiveの例</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 50px auto;
            perspective: 500px; /* ここで遠近感を設定 */
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: auto;
            transform-style: preserve-3d; /* 3D効果を保持 */
            transform: rotateY(45deg); /* Y軸方向に45度回転 */
        }
    </style>
</head>
<body>
    <h2>Perspectiveを使った3D効果</h2>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

どう見えるか？

• perspective: 500px; の設定によって、箱が手前にあるように見えます。まるで、真正面ではなく斜めから見ているかのような効果です。
• 値を小さくすると（例: perspective: 200px;）、箱がより劇的に手前に迫って見えます。
• 値を大きくすると（例: perspective: 1000px;）、遠近感が弱まり、ほぼ平面的に見えます。

重要なポイント

1. perspectiveは親要素に設定する
   遠近感を持たせたい要素を囲む親要素に対してperspectiveを設定します。
2. 奥行きがある動きを作る
   rotateX, rotateY, rotateZのような3D変形を子要素に対して行うことで、perspectiveの効果が現れます。
3. 単位はピクセル（px）
   値はピクセル単位で設定し、0を設定すると遠近感が消えます（すべて平面になります）。

z-index

CSSのz-indexは、要素が重なったときにどれが前に表示されるかを決めるプロパティです。z-indexは、要素の「重なり順」を決めるためのプロパティです。要素を紙に例えると、どの紙が一番手前に見えるかを指定するようなものです。

使い方のポイント

• z-indexは、positionプロパティがrelative, absolute, fixed, または stickyに設定されている要素に対して有効です。
• 数字が大きいほど前に表示され、小さいほど後ろに表示されます。
• z-indexの値は正の数、負の数、または0（ゼロ）に設定できます。

基本的な例

• z-index: 0;: 基本の位置。特に前でも後ろでもない状態。
• z-index: 1;: 他の要素よりも前に表示される。
• z-index: -1;: 他の要素の後ろに表示される。

応用例

サイトのナビゲーションバーやポップアップメニュー、モーダルウィンドウを前に出したいときによく使います。たとえば、ポップアップがページの他の要素に隠れてしまうのを防ぐために、z-indexを高く設定します。

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100; /* 他の要素よりも前に表示 */
    background-color: white;
    padding: 20px;
    border: 1px solid black;
}

overflow

CSSのoverflowプロパティは、要素の中に収まりきらない内容があるときに、どう表示するかを指定するプロパティです。

overflowを使うと、要素の中に収まらないコンテンツをどうするかを決めることができます。たとえば、テキストや画像が要素のサイズを超えてしまう場合に、隠したり、スクロールバーを表示したりできます。

overflow: visible;（ビジブル）

• 特徴: これはデフォルトの設定です。内容がはみ出しても、そのまま表示されます。
• どうなる？: ボックスの外に内容が出てしまっても、隠れずに見える状態です。
• 例: 特に調整せず、要素がはみ出ても気にしないとき。
• イメージ: ノートの端からはみ出したメモ用紙のように、普通に見えています。

.box-visible {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: visible;
}

overflow: hidden;（ヒドゥン）

• 特徴: 内容がはみ出しても、その部分は見えなくなります。
• どうなる？: ボックスの外にはみ出した部分が表示されず、切り取られます。
• 例: デザインの見た目を整えるために、はみ出した内容を見せたくないとき。
• イメージ: 引き出しの中にしまって、はみ出している部分は見えない状態。

.box-hidden {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
}

overflow: scroll;（スクロール）

• 特徴: はみ出した内容がある場合、スクロールバーが表示されます。
• どうなる？: 内容が多すぎる場合にスクロールバーを使って中身を見られるようになります。
• 例: テキストが多いエリアや、小さいスペースに情報をたくさん表示したいとき。
• イメージ: ノートの端にページが足りなくなったときに、スクロールして全部見られる感じ。

.box-scroll {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: scroll;
}

overflow: auto;（オート）

• 特徴: 内容がはみ出した場合にのみ、スクロールバーが表示されます。
• どうなる？: 必要に応じてスクロールバーが表示されるので、通常は表示されず、はみ出した場合のみ使われます。
• 例: ウィンドウのサイズに応じて、スクロールバーを出すかどうか自動で決めたいとき。
• イメージ: 自動ドアのように、必要なときだけ開くスクロールバー。

.box-auto {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: auto;
}

position

CSSのpositionプロパティは、ウェブページの要素をどこに表示するかをコントロールするためのものです。

position: static; （スタティック。あんまり使わない）

• 特徴: これがデフォルト（標準）の設定です。
• どうなる？: 要素は通常のフロー（順番）に従って表示されます。位置を特別に変更することはできません。
• 例: 普通の段落や見出しなど、特別な位置指定をしない場合。
• イメージ: 本の中で文章がページの上から下に並んでいるような感じ。

position: relative; （相対位置）

• 特徴: 通常の位置（static の位置）を基準にして、少しだけずらしたいときに使います。
• どうなる？: 自分の元の位置から、指定しただけの距離だけ動きます（上下左右に）。
• 例: ほんの少しズラして見た目を調整したいとき。
• イメージ: ページに印刷された文章を少しずらして貼り直す感じ。

.relative-box {
    position: relative;
    top: 20px;   /* 元の位置から20px下に移動 */
    left: 10px;  /* 元の位置から10px左に移動 */
}

position: absolute; （絶対位置）

• 特徴: 親要素（通常は最も近いrelativeまたはabsoluteの位置指定を持つ要素）を基準に、絶対的に位置を指定します。
• どうなる？: 親要素の指定位置から動かされ、ページの通常のフローから外れます。
• 例: ツールチップやモーダルウィンドウなど、固定の位置に置きたいもの。
• イメージ: 部屋の中で家具を自由に配置する感じ。部屋（親要素）が基準。

.absolute-box {
    position: absolute;
    top: 50px;   /* 親要素の上から50pxの位置 */
    right: 20px; /* 親要素の右から20pxの位置 */
}

position: fixed; （固定位置）

• 特徴: ブラウザの表示領域（ウィンドウ）を基準に、絶対位置で配置します。
• どうなる？: ページをスクロールしても動かず、常に固定された場所に表示されます。
• 例: ヘッダーやサイドバー、戻るボタンなど、常に同じ位置に表示したいもの。
• イメージ: 画面に張り付いたポストイットのように、スクロールしても動かない。

.fixed-box {
    position: fixed;
    bottom: 10px; /* 画面の下から10pxの位置 */
    left: 10px;   /* 画面の左から10pxの位置 */
}

position: sticky; （スティッキー）

• 特徴: スクロールに応じて動きますが、指定された位置に達すると止まります。
• どうなる？: スクロールしている間は動きますが、指定された位置に達するとそこにくっついて止まります。
• 例: ヘッダーや重要なナビゲーションがスクロールしても上部に固定されているとき。
• イメージ: ページの上部に貼り付くステッカーのような動き。

border

borderは、HTMLの要素（例えばボタンや箱のようなもの）の周りに線を引くためのCSSプロパティです。ボーダーを使うと、要素がはっきりと目立つようになります。

borderの書き方

borderを使うときには、以下の3つの情報を指定します。

• 太さ（幅）: ボーダーの線の太さを指定します。例えば、1px、2pxなど。
• スタイル: ボーダーのデザインを指定します。例えば、solid（実線）、dashed（破線）、dotted（点線）など。
• 色: ボーダーの色を指定します。例えば、red（赤）、#000（黒）、rgb(0, 0, 255)（青）など。

.box {
  border-top: 2px solid red;    /* 上 */
  border-right: 3px dotted blue;  /* 右 */
  border-bottom: 1px dashed green; /* 下 */
  border-left: 4px double purple;  /* 左 */
}

width（幅）と height（高さ）

• width（幅）: 要素の横のサイズを指定します。
• height（高さ）: 要素の縦のサイズを指定します。

この2つを使うことで、ボックスや画像、テキストのエリアの大きさを自由にコントロールできます。

height: 0; にすると、要素の高さが 0 になり、その結果として要素内に含まれるテキストやコンテンツが表示されなくなります。これは、コンテンツが表示されるためには、要素に十分な高さが必要だからです。

具体的な理由:

1. 高さがゼロになる
   • height: 0; は、要素自体の高さを 0 に設定するので、要素内に含まれるテキストや画像などのコンテンツが表示されるためのスペースがなくなるため、結果的にコンテンツも画面上に表示されなくなります。
2. overflow: hidden; の効果
   • overflow: hidden; は、要素の領域を超えたコンテンツを隠すプロパティです。したがって、要素に height: 0; を設定すると、その要素にコンテンツが含まれていても表示されず、完全に見えなくなります。

基本的な使い方

これらのプロパティは、ピクセル（px）、パーセント（%）、ビュー幅（vw）、または他の単位で指定できます。例えば、

.box {
    width: 200px;   /* 幅を200ピクセルに設定 */
    height: 100px;  /* 高さを100ピクセルに設定 */
}

単位について

1. ピクセル（px）
   • 画面上の点の数で指定します。
   • 例: width: 150px; は、150ピクセルの幅を意味します。
   • イメージ: 定規で計るような感覚で、固定のサイズを設定します。
2. パーセント（%）
   • 親要素に対する割合でサイズを指定します。
   • 例: width: 50%; は、親要素の幅の50%のサイズになります。
   • イメージ: コップの中の水のように、親の大きさに応じて変わる柔軟なサイズ。
3. ビュー幅（vw）とビュー高さ（vh）
   • ビューポート（画面の表示領域）の幅と高さに基づいてサイズを指定します。
   • 例: width: 50vw; は、画面幅の50%のサイズを意味します。
   • イメージ: 画面の大きさに合わせて変わるスライムのように、画面サイズに応じてサイズが変わります。

width: 80%; は、ウェブページの要素の横幅を指定するためのCSS（カスケーディングスタイルシート）という言語の一部です。これを使うことで、ウェブページの見た目を整えることができます。

• 意味: width: 80%; は「この要素の幅を、親要素の幅の80%にする」という指示です。
• 親要素: 親要素とは、今設定しようとしている要素を囲んでいる大きな要素のことです。

例えば、親要素がウェブページ全体だった場合、width: 80%; はそのページの幅の80%のサイズに要素を設定するということになります。

具体例

もし、親要素の幅が1000ピクセルなら、

• width: 80%; と指定すると、要素の幅は 1000 ピクセル × 80% = 800 ピクセル になります。

簡単に言えば、width: 80%; は親の幅に対してどれくらいの幅にするかをパーセンテージで決める設定です。この設定を使うと、ブラウザの画面サイズが変わっても要素の幅が自動で調整されるので、レスポンシブなデザインを作るときに便利です。

1. width: 100%;

• 幅を100%にする設定です。
• この要素の親要素（コンテナ）の幅に合わせて、子要素である .Menu-Item-Label が横幅いっぱいに広がることを意味します。たとえば、親要素の幅が500pxであれば、この要素の幅も500pxになります。

2. height: 40px;

• 高さを40ピクセルに固定する設定です。
• この要素は常に高さが40pxに設定されます。親要素の高さや内容に関わらず、.Menu-Item-Label の高さは40pxとなります。

具体例：

• もし .Menu-Item-Label がメニュー項目のラベルであれば、そのラベルの幅は親メニュー要素の幅に合わせて広がり、高さは40pxで固定されます。
• これにより、ラベルのサイズが一貫して表示されるので、視覚的に整ったメニューのレイアウトを提供できます。

まとめ：

• width: 100% は、要素の幅を親要素の幅いっぱいに広げる。
• height: 40px は、要素の高さを固定して、一定の見た目やレイアウトを維持する。

auto と max-width / max-height

• auto: 自動的に内容に合わせてサイズを決めます。たとえば、画像がその本来のサイズで表示されるときなどに使います。
• max-width / max-height: 要素の最大幅や最大高さを設定します。
  例: max-width: 100%; は、要素が親要素の幅を超えないようにします。これにより、画面サイズに合わせて自動調整されるので、レスポンシブデザイン（スマホやPCで見やすいデザイン）に使われます。

max-width: 800px; の意味は、「要素の幅を最大で800ピクセルまでに制限する」ということです。具体的には次のような役割を持っています。

詳しい説明：

1. 最大の幅を制限する：
   • 要素の幅が800ピクセルを超えないように制限されます。
   • 例えば、画面サイズが非常に広くても、要素の幅は800ピクセル以上にはなりません。
2. レスポンシブデザインに使われる：
   • 小さい画面では、要素の幅が画面のサイズに応じて縮まりますが、大きい画面では最大800ピクセルまで広がります。
   • これは、ページのデザインが大きな画面でも読みやすく、見た目が整うようにするために使用されます。

具体例：

• 画面幅が600ピクセルのデバイスでは、要素の幅は600ピクセル。
• 画面幅が1000ピクセルのデバイスでは、要素の幅は800ピクセルに制限されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>WidthとHeightの例</title>
    <style>
        .box {
            width: 200px;   /* 幅を200pxに設定 */
            height: 100px;  /* 高さを100pxに設定 */
            background-color: lightblue;  /* 背景色を水色に設定 */
            border: 1px solid black;  /* 黒い枠線を追加 */
        }
    </style>
</head>
<body>
    <div class="box">このボックスの幅は200pxで、高さは100pxです。</div>
</body>
</html>

.Tabs{
width: 100%;
display: flex;;
} で width: 100%;を入れる理由

.Tabsクラスに対して width: 100%; を指定する理由は、タブコンテナ要素がその親要素の幅全体にわたって表示されるようにするためです。これを詳しく説明します。

1. 親要素の幅に合わせてコンテンツを表示するため

• width: 100%; は、.Tabs 要素が親要素の幅に対して 100% の幅を持つように指定しています。つまり、親要素がどれくらいの幅であっても .Tabs がその幅いっぱいに広がるようになります。
• これにより、.Tabs コンテナ内のタブが、ページのデザインに応じて自動的に親要素の幅にフィットします。

2. レスポンシブデザインのため

• 現代のウェブデザインでは、画面サイズに応じてコンテンツのレイアウトが変わる レスポンシブデザイン が求められます。
• width: 100%; を指定することで、画面の幅に合わせて .Tabs 要素も自動的に幅を調整し、あらゆるデバイス（デスクトップ、タブレット、スマートフォンなど）で適切な見た目になります。

3. display: flex; によるフレックスボックスレイアウトとの相性

• .Tabs に display: flex; を指定することで、内部のタブ項目を 横並び に配置しています。flex では子要素の配置や間隔を柔軟に調整できますが、親要素（ここでは .Tabs）の幅が決まっていないと、全体のレイアウトが不安定になることがあります。
• width: 100%; を指定することで、.Tabs が親要素の幅に対して確実にフル幅を占め、内部のタブがきれいに横に並ぶようになります。

display

CSSのdisplayプロパティは、ウェブページで要素をどのように表示するかを決める重要なプロパティです。

1. display: block;

• 特徴: 要素は「ブロック要素」として表示されます。
• どうなる？: 要素が全幅を占め、他の要素はその下に配置されます（改行が入る感じ）。
• 例: 見出し（<h1>〜<h6>）、段落（<p>）、<div> など。
• イメージ: 本のページの章や段落のように、全体の幅を使って独立して並びます。

2. display: inline;

• 特徴: 要素は「インライン要素」として表示されます。
• どうなる？:他のインライン要素と横並びになり、幅や高さを指定できません。
• 例: 文字（<span>）、リンク（<a>）、画像（<img>）など。
• イメージ: 文章中の文字や単語のように、横にずらっと並びます。

3. display: inline-block;

• 特徴: 「インライン」の特徴（横に並ぶ）と、「ブロック」の特徴（幅と高さを指定できる）を持つ。
• どうなる？: 横並びになりながら、要素のサイズも自由に調整できます。
• 例: ボタンやナビゲーションメニューでよく使われます。
• イメージ: ボタンが横に並んでいるけど、それぞれの大きさやデザインが設定できる感じ。

display: inline-block; とは？

display: inline-block; は、ウェブページの要素の表示方法を指定するCSSのプロパティです。

• 「inline」 と 「block」 という2つの特徴を持っています。
• 「inline」 は、要素が横に並んで表示されることを意味します。例えば、文字やアイコンが続けて並ぶように見える状態です。
• 「block」 は、要素が上下に並び、幅や高さを自由に設定できることを意味します。

じゃあ、inline-block って何？

• 「inline」 のように横に並びつつも、「block」 のように幅や高さを指定できます。
• 簡単に言うと「横に並びつつ、ボックスの大きさも自由に決められる」状態です。

具体例：

想像してみてください、3つのボタンを横に並べたいとします。しかし、それぞれのボタンの大きさやマージン（余白）を調整したい。display: inline-block; を使うと、ボタン同士が横に並びつつ、ボタンのサイズや位置を自由に設定できます。

例えば：

<style>
  .button {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: blue;
    color: white;
    text-align: center;
    line-height: 50px;
    margin: 5px;
  }
</style>

<div class="button">Button 1</div>
<div class="button">Button 2</div>
<div class="button">Button 3</div>

4. display: flex;

• 特徴: フレックスボックスというレイアウト方式を使って、子要素を自由に配置できます。
• どうなる？: 縦横の整列が簡単で、レスポンシブ（画面サイズに応じて変化する）なデザインが得意です。
• 例: ナビゲーションバーやカードレイアウトなど、複雑な配置に使います。
• イメージ: 頭の中で並べたいようにブロックやアイテムを自由自在に配置できるゲームのようなもの。

display: flex; の基本的な機能

1. 親要素（フレックスコンテナ）と子要素（フレックスアイテム）
   • display: flex; を指定した要素は「フレックスコンテナ」になります。
   • その中に含まれる要素（子要素）は「フレックスアイテム」になります。
2. アイテムを横並び（デフォルト）にする
   • 通常のレイアウトでは、ブロック要素は縦に並びますが、display: flex; を使うと、デフォルトでは横並び（水平配置）になります。これはフレックスコンテナが水平方向に子要素を整列させるためです。
3. スペースの効率的な配分
   • フレックスボックスでは、コンテナ内の余白やスペースを自動的に均等に割り当てることができます。これにより、異なる幅や高さの要素もきれいに揃います。

1. flex-direction：アイテムを並べる方向を指定

• row（デフォルト）: 横並び
• column: 縦並び
• row-reverse: 逆の順番で横並び
• column-reverse: 逆の順番で縦並び

2. justify-content：アイテムの水平方向の揃え方

• flex-start: 左寄せ（デフォルト）
• center: 中央揃え
• flex-end: 右寄せ
• space-between: アイテム間のスペースを均等にし、両端を詰める
• space-around: アイテムの間と端に均等な余白を作る

3. align-items：アイテムの垂直方向の揃え方

• stretch（デフォルト）: アイテムの高さを親の高さに合わせて引き伸ばす
• flex-start: 上寄せ
• center: 中央揃え
• flex-end: 下寄せ

4. flex-wrap：アイテムを折り返し表示するかどうか

• nowrap（デフォルト）: 折り返さずに一行で表示
• wrap: アイテムがコンテナを超える場合は折り返して表示

5. display: grid;

• 特徴: グリッドレイアウトシステムを使って、ページを行と列で整理して配置します。
• どうなる？: フレックスボックスよりも複雑なレイアウトが可能で、ウェブページ全体のレイアウトにも向いています。
• 例: ギャラリーや複雑なウェブページの全体レイアウト。
• イメージ: チェス盤のようにマス目で整理されたスペースに、パーツを配置していく感じ。

6. display: none;

• 特徴: 要素をページ上に表示しません。
• どうなる？: その要素はあたかも存在しないように扱われます（画面にも表示されず、スペースも取らない）。
• 例: モーダルウィンドウの中身や、条件付きで表示されるコンテンツ。
• イメージ: 忍者のように隠れて見えないけど、コードには存在しています。

justify-content

justify-contentは、CSSで要素（特にFlexboxやGridの中のアイテム）の横方向の配置を決めるプロパティ。

具体的な使い方

例えば、Flexboxを使って横に並んだアイテムがあったとします。そのアイテムの並び方を調整するのがjustify-contentです。

1. flex-start
   アイテムを左寄せにします。
2. flex-end
   アイテムを右寄せにします。
3. center
   アイテムを中央に寄せます。
4. space-between
   アイテムの間に均等なスペースを入れ、端に寄せます。
5. space-around
   アイテムの周りに均等なスペースを入れます（両端も少しスペースができます）。
6. space-evenly
   アイテム間のスペースを全て均等にします。

align-items

align-itemsは、CSSでFlexboxやGridの中のアイテムを縦方向にどう配置するかを決めるプロパティです。つまり、アイテムが上下にどう揃うかを調整します。

例えば、Flexboxで縦に配置されたアイテムの並び方を調整したいときに使います。以下のような配置方法があります：

1. flex-start
   アイテムをコンテナの上に揃えます。
2. flex-end
   アイテムをコンテナの下に揃えます。
3. center
   アイテムをコンテナの中央に揃えます。
4. baseline
   テキストのベースライン（文字の底辺）を揃えます。テキストがある場合に便利です。
5. stretch（デフォルト）
   アイテムがコンテナの高さに合わせて伸びます。

@keyframes

@keyframes sk-bouncedelay {
    0% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
    80% {
        transform: scale(0);
    }
    100% {
        transform: scale(0);
    }
}

• @keyframes は、アニメーションの動きを定義するためのCSSのルールです。
• これを使うと、要素に「どんな動きをするか」を指示できます。

アニメーションの名前

• sk-bouncedelay という名前のアニメーションを作っています。
• この名前は、あとでCSSで使って、どの要素にこのアニメーションを適用するかを指定します。

アニメーションの動き

アニメーションは、時間の経過に応じて要素がどう変化するかを、いくつかのステップに分けて指示します。このコードでは、4つのステップ（0%、40%、80%、100%）で定義されています。

各ステップの説明:

1. 0%（アニメーションの最初）
   • transform: scale(0); とありますが、これは「要素を小さくして、見えなくする」ことを意味します。
2. 40%（アニメーションの40%の時点）
   • transform: scale(1); になっています。これは、「要素が元の大きさに戻る（大きくなる）」ことを意味します。
3. 80%（アニメーションの80%の時点）
   • 再び transform: scale(0); になっています。要素はもう一度小さくなって見えなくなります。
4. 100%（アニメーションの終わり）
   • 最後も transform: scale(0); で、小さいままです。

アニメーションの動きのイメージ

このアニメーションは、要素が「小さくなったり大きくなったりする」動きです。
具体的には、最初は小さく（見えない状態）、途中で一度大きくなって、また小さくなるという動きを繰り返します。

ポイント

• scale(0) は小さい状態（見えない）で、scale(1) は元のサイズです。
• アニメーションの進行に合わせて、要素が指定されたタイミングで変化します。
• 0% から 100% までの間にどんな動きをするかを細かく制御できるのが @keyframes の強みです。

object-fit

See the Pen
Untitled by 片山勇大 (@sdsuqpzt-the-selector)
on CodePen.

使用方法

1. index.html: 画像とコントロール用のセレクトボックスがあり、ユーザーがobject-fitの異なる値を選ぶことができます。
2. styles.css: 画像の初期設定としてobject-fit: fill;を適用しています。コンテナのサイズを固定し、object-fitの効果が分かりやすいように設定しています。
3. script.js: ユーザーがセレクトボックスでobject-fitの値を変更すると、その値が画像に適用されるようにしています。

object-fitの値の説明

• fill: 画像がコンテナを完全に埋めるようにリサイズされます（デフォルト）。
• contain: 画像のアスペクト比を保ちながら、コンテナに収まるようにリサイズされます。
• cover: 画像のアスペクト比を保ちながら、コンテナを覆うようにリサイズされます。
• none: 画像のサイズは変更されず、元のサイズのまま表示されます。
• scale-down: noneまたはcontainのうち、画像が小さく表示される方を選びます。

Sass（SCSS記法が主流となっている）

@mixin

CSS（Sass）というCSSの拡張言語で書かれたもので、アニメーションを簡単に設定するための「ミックスイン」です。ミックスインは、CSSのプロパティをまとめて使いやすくするためのテンプレートのようなものです。

1. @mixin って何？

• @mixin は、Sassで使うことができる便利な機能です。
• ミックスインを使うと、CSSのコードをまとめておいて、必要なときに再利用できます。プログラムの「関数」みたいなものだと思ってください。

2. このミックスインの目的

• このミックスイン animation は、CSSのアニメーションを簡単に設定するためのものです。
• いくつかのアニメーションの設定をまとめて使うことができるようになっています。

3. 各パラメータの説明

このミックスインには、いくつかのパラメータがあります。それぞれがアニメーションの設定項目に対応しています。

1. $name
   • アニメーションの名前（どのアニメーションを使うか）。
2. $duration
   • アニメーションが何秒かけて再生されるか（デフォルトは 1s、つまり1秒）。
3. $timing-function
   • アニメーションの速さの変化の仕方（デフォルトは ease で、ゆっくり始まって速くなり、またゆっくり終わる）。
4. $delay
   • アニメーションを始める前の待ち時間（デフォルトは 0s）。
5. $iteration-count
   • アニメーションが何回繰り返されるか（デフォルトは 1 回）。
6. $direction
   • アニメーションがどの方向に再生されるか（デフォルトは normal、通常の方向）。
7. $fill-mode
   • アニメーションが終わった後に、要素がどう見えるか（デフォルトは forwards、アニメーションの最後の状態を保持）。

これがどうなるか

• .my-element クラスに対して、sk-bouncedelay というアニメーションが2秒かけて再生されます。
• アニメーションは「ゆっくり始まり、速くなり、またゆっくり終わる」動き方で、0.5秒の待ち時間があります。
• このアニメーションは無限に繰り返され、再生のたびに逆方向（行ったり来たり）します。
• アニメーションが終わった後も、最後の状態がそのまま残ります。

アニメーションのプロパティ設定のためのショートカット

• このミックスインでは、アニメーションのプロパティをまとめて設定するショートカットになっています。
• 書くべきプロパティが多いときに、何度も同じコードを書く手間を省くことができます。

注意点

• コード内の animation: { ... } は、少し正確なCSSではない形になっているので、修正が必要です。正しい形式は、例えば animation-name: $name; などです。
• 正しく書くと次のようになります。

@mixin animation(
  $name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards
) {
  animation: {
    name: $name;
    duration: $duration;
    timing-function: $timing-function;
    delay: $delay;
    iteration-count: $iteration-count;
    direction: $direction;
    fill-mode: $fill-mode;
  }
}

.rect {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: $cBlack;
  @include animation($name: sk-bouncedelay);

@include ディレクティブ: Mixinを適用するために使います。ここでは、animation mixin を使って、sk-bouncedelay というアニメーションをこの要素に適用しています。アニメーションの他のパラメータはデフォルト値が使用されます（例: 1s, ease, 0s など）。

「パーシャル（Partial）」

Sass（Syntactically Awesome Stylesheets）において、ファイル名に アンダースコア（_） が付いているファイルは「パーシャル（Partial）」と呼ばれます。

特徴

1. 直接コンパイルされない:
   • アンダースコアが付いたファイルは、単独ではCSSファイルにコンパイルされません。つまり、_example.scss というファイルは自動的に example.css に変換されないという特徴があります。
   • パーシャルは他のSassファイルに「インポート」されて使用されます。
2. 複数ファイルへの分割:
   • Sassプロジェクトでは、スタイルシートを複数の小さなファイルに分割することが一般的です。アンダースコア付きファイルは、スタイルを分割して管理するための役割を果たします。
   • 例: _variables.scss, _mixins.scss など、変数やミックスインなどの共通スタイルを保存するために使われます。

@use

• @use は、Sassで他のファイルを「読み込む」ためのものです。
• 他のファイルにあるCSSのコードやSassの機能（ミックスインや変数など）を使うことができます。

どうして @use を使うの？

• コードをもっと整理して書けるようにするためです。
• 一つのファイルにすべてのスタイルを書くと、後で見直すのが大変になりますよね。@use を使うと、スタイルを複数のファイルに分けて管理できるので、見やすくなります。

@use の使い方

例えば、ファイルを次のように使い分けます。

// _colors.scss
$primary-color: blue;
$secondary-color: green;

// styles.scss
@use 'colors';

body {
  background-color: colors.$primary-color;
}

h1 {
  color: colors.$secondary-color;
}

ファイル_colors.scss

このファイルには、色に関する変数が定義されています。

4. @use の特徴

• 名前空間: @use では、読み込んだファイルの内容は「名前空間」によって分けられます。上の例では、colors.$primary-color のように colors という名前空間を使って変数にアクセスしています。
• 管理が簡単: 名前空間を使うことで、同じ名前の変数があっても混乱せずに管理できます。
• 再利用: 一度定義したスタイルや変数を、何度でも、どこでも再利用できるので効率的です。

5. なぜ @import じゃないの？

以前は @import が使われていましたが、@use の方が新しくて、いくつかの利点があります：

• パフォーマンスの向上: @import はファイルを何度も読み込むことがあるのに対して、@use は一度だけ読み込みます。
• 名前の衝突を防ぐ: @use は名前空間を使うので、変数やミックスインの名前がかぶっても大丈夫です。

6.まとめ

• @use はSassで他のファイルを読み込むための便利な機能です。
• 名前空間を使って整理されたコードが書けるので、大きなプロジェクトでもスタイルがごちゃごちゃにならずにすみます。
• パフォーマンスが良く、名前の衝突も防いでくれるので、より良い管理が可能です。

名前空間

@use "other-folder/mixin" as mixin;

$cBlack: black;

body {
  text-align: center;
}

.rect {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: $cBlack;
  @include mixin.animation($name: sk-bouncedelay);
}

このコードでは、Sassの@useディレクティブを使って外部のSassファイルを読み込み、mixinという別のファイルに定義されたミックスイン（animation）を使用しています。それぞれの概念を詳しく解説します。

1. @use ディレクティブ

@use "other-folder/mixin" as mixin;

説明:

• @useは、Sassファイルのモジュールシステムの一部で、他のSassファイルをインポートして使うための方法です。
• @useを使うことで、外部ファイルに定義された変数やミックスイン、関数を呼び出すことができます。

特徴:

• インポートしたファイル内で定義されたものは名前空間を持ち、直接使うのではなく、名前空間を介してアクセスする必要があります。ここでは、mixinという名前空間を使ってanimationミックスインにアクセスしています。
• as mixinは、other-folder/mixin というパスからインポートしたものに対して、mixinという別名（エイリアス）を付けています。これにより、mixin.animation() のように明確にファイルから呼び出すことができます。

メリット:

• 名前空間を使うことで、異なるSassファイル間で同じ名前の変数やミックスインがあっても、衝突を防ぐことができます。
• モジュールの再利用性が向上し、大規模なプロジェクトで管理がしやすくなります。

@forward

このコードは、Sassのモジュールシステム（@useや@forward）を使って、異なるファイルからスタイルや変数を取り込み、利用している例です。それぞれの部分を詳しく解説します。

1. @forward ディレクティブ

@forward "child";
@forward "child2";

説明:

• @forwardは、Sassでモジュールを他のファイルに再エクスポート（転送）するためのディレクティブです。
• @forward "child"; と @forward "child2"; は、それぞれ child.scss と child2.scss の内容をこのファイルから他のファイルに転送することを意味します。

特徴:

• @forward を使うことで、複数のファイルの内容を1つの場所でまとめ、それを他のファイルに渡せます。
• これにより、例えばmain.scssのようなメインのファイルに一度だけ他のモジュールを読み込むことで、再利用性が向上し、管理が容易になります。

2. @use ディレクティブ

@use "child";

説明:

• @useは、Sassファイルをインポートしてその内容を使用できるようにするディレクティブです。
• @use "child"; では、child.scssというファイルをインポートしています。

名前空間の使用:

• @useを使うと、そのファイル内のすべての変数、ミックスイン、関数は名前空間を使ってアクセスする必要があります。ここでは、childという名前空間を通じて、child.scssで定義された内容を利用しています。
  • 例えば、child.$cBlueのように、child.scssで定義されている変数$cBlueにアクセスしています。

ドロップダウンメニュー

<nav class="DropdownMenu"> と <ul class="Menu"> を2つ作る理由は、HTMLの構造を整理して意味を持たせ、使いやすくするためです。それぞれに役割がありますので、簡単に説明します。

1. <nav class="DropdownMenu">

• ナビゲーション要素として、このタグはページの他の部分と区別される役割を持っています。
• ナビゲーションメニューとしての機能を明確にするため、<nav> タグを使っています。これにより、開発者やブラウザが「この部分はメニューです」と認識しやすくなります。

2. <ul class="Menu">

• <ul> は リスト形式のメニュー を作るために使われます。通常、複数のメニュー項目を表示する場合、リスト (<ul>) の中にメニュー項目 (<li>) を入れます。
• ここでは、メニューの項目1つ1つを <li> タグで囲み、ユーザーが選べるリスト形式で表示しています。

具体的な役割

• <nav> タグは、全体としてメニュー（ナビゲーション）のエリアを指定。
• <ul> タグは、リスト形式でメニュー項目を整理して表示。