CSSプロパティ

文字の色を指定する: color

要素内の文字色を指定します。ウェブサイトのデザインを整えたり、情報を強調するために使われます。

• 色名: red, blue, green など（140種類の色名が使用可能）　
• 16進数: #ff0000（赤）や #000000（黒）
• RGB: rgb(255, 0, 0)（赤）、rgba(0, 0, 255, 0.5)（半透明の青）
• HSL: hsl(120, 100%, 50%)（緑）、hsla(120, 100%, 50%, 0.5)（半透明の緑）

p {
  color: #333333; 
}

背景色を指定する: background-color

要素の背景色を指定します。特定の要素を目立たせたり、ページ全体の雰囲気を調整するのに役立ちます。

• transparent（透明）　
• 色名、16進数、RGB、HSL など（color と同じ形式）

div {
  background-color: lightyellow; /* 背景に淡い黄色を適用して柔らかい印象に */
}

フォントの種類を指定する: font-family

テキストに使用するフォントを指定します。

• 特定のフォント名: "Arial", "Helvetica"
• フォントファミリ: serif, sans-serif, monospace（汎用ファミリを指定）
• 複数指定: "Helvetica", "Arial", sans-serif（利用可能なフォントを優先して適用）

h1 {
  font-family: "Helvetica", "Arial", sans-serif; /* 優先的にHelvetica、それがなければArialを適用 */
}

フォントサイズを指定する: font-size

テキストの大きさを指定します。

• 絶対値: 10px, 12pt, 1in（固定サイズ）
• 相対値: 1.5em（親要素の1.5倍）、120%（親要素の120%）
• キーワード: small, medium, large（ブラウザ標準のサイズに基づく））

p {
  font-size: 18px; /* 標準的なサイズより少し大きめにして見やすく */
}

フォントの太さを指定する: font-weight

テキストの太さを指定します。

• キーワード: normal（通常）、bold（太字）
• 数値: 100 ～ 900（細いから太い順、400 が標準、700 が太字）

strong {
  font-weight: bold; /* 強調したい部分を太字に */
}

フォントのスタイルを指定する: font-style

テキストを斜体にするなどのスタイルを指定します。

• normal（通常）
• italic（斜体）
• oblique（傾斜文字）

em {
  font-style: italic; /* 重要な部分を斜体にして強調 */
}

テキストの装飾を指定する: text-decoration

テキストに下線や取り消し線を付けたり、装飾を削除します。

• nnone（装飾なし）
• underline（下線）
• overline（上線）
• line-through（取り消し線）
• 複合値: underline overline

a {
  text-decoration: none; /* リンクの下線を削除してシンプルに */
}

テキストの配置を指定する: text-align

テキストの水平方向の配置を指定します。

• left（左揃え）
• right（右揃え）
• center（中央揃え）
• justify（均等揃え）

h1 {
  text-align: center; /* 見出しを中央に配置 */
}

テキストの影をつける: text-shadow

テキストに影を付けて立体感を与えます。

• オフセットX, オフセットY: 影の位置を指定（例: 2px 2px）
• ぼかしの半径: 影をぼかす量（例: 5px）
• 色: black, rgba(0, 0, 0, 0.5) など

h2 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 半透明の影を追加 */
}

CSSを使ったレイアウトの調整

CSSでは、ウェブページの要素を配置したり、要素同士の間隔を調整するために多くのプロパティが用意されています。これらのプロパティを使用すると、ページ全体のレイアウトを整え、見やすくデザインすることができます。

要素の余白を指定する: margin

要素の外側の余白を指定します。要素同士の間隔を調整するために使われます。

• 単一値: 20px（全方向に適用）
• 複数値: 10px 20px（上下と左右）、10px 15px 20px 25px（上、右、下、左の順）
• 特別な値: auto（中央揃えなどで使用）

div {
  margin: 20px; /* 全方向に20pxの余白 */
  margin: 0 auto; /* 要素を中央に配置 */
}

要素の内側の余白を指定する: padding

要素の内側の余白を指定します。要素とその内容（テキストや画像）との間隔を調整するために使われます。

• 単一値: 20px（全方向に適用）
• 複数値: 10px 20px（上下と左右）、10px 15px 20px 25px（上、右、下、左の順）
• 特別な値: auto（中央揃えなどで使用）

div {
  padding: 15px; /* 全方向に15pxの内側余白 */
}

要素の幅を指定する: width

要素の幅を指定します。

• 固定値: 400px（固定サイズ）
• 相対値: 50%（親要素に対する割合）
• 自動サイズ: auto（内容に応じたサイズ）

div {
  width: 80%; /* 親要素の幅の80%を占める */
}

要素の高さを指定する: height

要素の高さを指定します。

• 固定値: 200px
• 相対値: 50vh（ビューポートの高さの50%）
• 自動サイズ: auto（内容に応じたサイズ）

div {
  height: 300px; /* 固定の高さを設定 */
}

要素の表示方法を指定する: display

要素がブロック要素、インライン要素、フレックスボックスなど、どのように表示されるかを指定します。

• block（ブロック要素として表示）
• inline（インライン要素として表示）
• flex（フレックスボックスレイアウト）
• grid（グリッドレイアウト）
• none（非表示）

div {
  display: flex; /* フレックスボックスレイアウトに設定 */
}

要素を浮かせて配置する: float

要素を左または右に配置し、他の要素を回り込ませることができます。

• left（左に浮かせる）
• right（右に浮かせる）
• none（デフォルト、浮かせない）

img {
  float: right; /* 画像を右側に配置 */
}

要素の位置を指定する: position

要素の位置を指定します。親要素や画面全体に対して要素を配置する場合に使用します。

• static（デフォルト、文書の流れに従う）
• relative（自身の通常の位置を基準に移動）
• absolute（親要素を基準に移動）
• fixed（画面全体を基準に移動）
• 関連プロパティ：top, right, bottom, left（位置を細かく指定）

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

要素をフレックスボックスで配置する: flex（display: flexと組み合わせて使用）

フレックスボックスレイアウトを用いて、要素を効率的に配置します。以下は関連プロパティです

• justify-content: flex-start, center, space-between（主軸方向の配置）
• align-items: flex-start, center, stretch（交差軸方向の配置）

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

グリッドレイアウトを指定する: grid

グリッドレイアウトを用いて要素を2次元的に配置します。関連するプロパティは

• grid-template-columns: repeat(3, 1fr)（3列を均等に分ける）
• grid-template-rows: 100px 200px（行ごとに高さを指定）
• gap: 10px（要素間の間隔）

div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

CSSで設定するレスポンシブデザインの実装

レスポンシブデザインとは、異なる画面サイズやデバイス（スマートフォン、タブレット、PCなど）に応じてウェブページのレイアウトやデザインを調整する方法です。CSSを使用すると、画面サイズに応じたスタイルを柔軟に適用できるようになります。

画面幅に応じたスタイルの切り替え: @media

メディアクエリを使用して、特定の画面サイズに応じたスタイルを適用します。

• min-width: 指定した幅以上の画面に適用
• max-width: 指定した幅以下の画面に適用

@media (max-width: 768px) {
  body {
    background-color: lightgray; /* 768px以下の画面では背景をグレーに */
  }
}

幅と高さを割合で指定する: % と vw/vh

要素の幅や高さを画面サイズに応じて調整します。

• %: 親要素に対する割合
• vw: ビューポート幅の1%（例: 50vwは画面幅の50%）
• vh: ビューポート高さの1%（例: 100vhは画面全体の高さ指定した幅以下の画面に適用

div {
  width: 80%; /* 親要素の幅の80% */
  height: 50vh; /* 画面高さの50% */
}

画像やメディアの自動調整: max-width と height: auto

画像や動画などのメディアを画面幅に合わせて縮小または拡大します。

• max-width: 100%: 親要素に収まるように調整
• height: auto: アスペクト比を維持して高さを自動調整

img {
  max-width: 100%; /* 画像が親要素を超えないように */
  height: auto; /* アスペクト比を維持 */
}

フレックスボックスで要素を配置: display: flex と flex-wrap

フレックスボックスを使用して、画面サイズに応じて要素を柔軟に並べ替えます。

• flex-wrap: wrap: 要素が画面幅に収まらない場合に折り返す
• justify-content: 主軸方向の配置を指定（例: space-between, center）

div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

グリッドレイアウトでレスポンシブ対応: display: grid と grid-template-columns

グリッドレイアウトを用いて、画面サイズに応じて列数を調整します。

• repeat(auto-fit, minmax(200px, 1fr)): 最小200px、最大で均等な幅を自動調整

div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

フォントサイズを自動調整: clamp

フォントサイズを最小値、推奨値、最大値で柔軟に調整します。

• clamp(min, preferred, max): 最小値、推奨値、最大値を指定

h1 {
  font-size: clamp(1rem, 2.5vw, 2rem); /* 画面サイズに応じたフォントサイズ */
}

ビュー全体に対応した背景やコンテナ: min-height

要素の高さを画面全体に対応させます。

• 100vh: 画面の高さ全体

div {
  min-height: 100vh; /* 要素を画面全体の高さに */
}

レスポンシブフォントサイズ: font-size と media query

メディアクエリを使って画面サイズごとにフォントサイズを変更します。

body {
  font-size: 16px;
}

@media (max-width: 768px) {
  body {
    font-size: 14px; /* 小さい画面では文字を小さく */
  }
}