width - 要素の横幅を決めるheight - 要素の高さを決めるmargin - 要素の外側の余白を決めるpadding - 要素の内側の余白を決めるborder - 要素の外枠線を書くために使われるcolor - 文字などの色を決めるfont-size - 文字の大きさを決めるfont-weight - 文字の太さを決めるbackground-color - 要素の背景色を決める
.square-box {
width: 300px; /* 横幅 */
height: 200px; /* 高さ */
border: 2px solid #000; /* 黒色の枠線 */
padding: 20px; /* 内側の余白 */
margin: 20px; /* 外側の余白 */
box-sizing: border-box; /* パディングと枠線を含めたサイズ設定 */
}
/* フレックスボックスの設定 */
.container {
display: flex;
}
並べる方向を指定
flex-direction: row; 左から右に要素を配置
row-reverse; 右から左に要素を配置
column; 上から下に要素を配置
column-reverse; 下から上に要素を配置
折り返しを指定
flex-wrap: nowrap; 子要素を折り返ししないで、一行に並べる（初期値）
wrap; 子要素を折り返しさせ、上から下へ複数行で並べる
wrap-reverse; 子要素を折り返させ、下から上へ複数行で並べる
水平方向のレイアウトを指定
justify-content: flex-start; 子要素を左揃えで配置する（初期値）
flex-end; 子要素を右揃えで配置する
center; 子要素を中央揃えで配置する
space-between; 子要素を均等配置し、左右端の要素を親要素の端に接して配置する
space-around; 子要素を均等配置し、左右端の要素も親要素の端から均等に離して配置する
垂直方向のレイアウトを指定
align-items: stretch; 子要素の中で一番高い要素に合わせて全ての子要素の高さを統一する（初期値）
flex-start; 親要素の上端を基準に上揃えで配置する
flex-end; 親要素の下端を基準に下揃えで配置する
center; 親要素の上下中央を基準に中央揃えで配置する
baseline; 子要素のベースラインで揃えて配置する
複数行の垂直方向レイアウトを指定
align-content: stretch; 親要素の高さに合わせて子要素の高さを統一させる（初期値）
flex-start; 親要素の上端を基準に上揃えで配置する
flex-end; 親要素の下端を基準に下揃えで配置する
center; 親要素の上下中央を基準に中央揃えで配置する
space-between; 子要素を均等配置し、上下端の要素を親要素の端に接して配置する
space-around; 子要素を均等配置し、上下端の要素も親要素の端から均等に離して配置する
/* CSS Gridを使ったレイアウト */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列のグリッド */
gap: 10px; /* 要素間の隙間 */
}
display: grid; グリッドレイアウトを使用する
grid-template-columns: repeat(3, 1fr); 列の数と幅を定義する（この例では3列）
grid-template-rows: 100px 200px; 行の高さを指定する（複数行も指定可能）
grid-column-gap: 10px; 列の間に10pxの間隔を作る
grid-row-gap: 15px; 行の間に15pxの間隔を作る
grid-gap: 10px 15px; 列と行の間隔を一括で指定（10pxは列間、15pxは行間）
grid-template-areas: グリッドエリアの名前を定義してレイアウトを簡略化
"header header header"
"sidebar content content"
"footer footer footer";
grid-column-start: 2; 要素の開始列を指定する
grid-column-end: 4; 要素が終了する列を指定する
grid-row-start: 1; 要素の開始行を指定する
grid-row-end: 3; 要素が終了する行を指定する
justify-items: center; 子要素の水平方向の配置を指定（start, end, stretchも使用可）
align-items: center; 子要素の垂直方向の配置を指定（start, end, stretchも使用可）
justify-content: center; グリッド全体の水平方向の配置
align-content: center; グリッド全体の垂直方向の配置
grid-auto-flow: row; 自動で要素を配置する際の流れを指定（row, column）
grid-auto-columns: 100px; 自動的に生成される列のサイズを指定
grid-auto-rows: 100px; 自動的に生成される行のサイズを指定
/* テキストスタイル */
.text {
font-size: 16px;
font-family: 'Arial', sans-serif;
color: #333;
text-align: center; /* テキストの中央揃え */
line-height: 1.5; /* 行の高さ */
letter-spacing: 0.05em; /* 文字間隔 */
}
color: #333; 文字の色を指定
font-size: 16px; 文字の大きさを指定
font-family: 'Arial', sans-serif; フォントファミリーを指定
font-weight: bold; 文字の太さを指定（normal, bold, bolder, lighter, 100〜900）
font-style: italic; 文字のスタイルを指定（normal, italic, oblique）
text-align: center; テキストの配置を指定（left, right, center, justify）
text-decoration: underline; テキストの装飾を指定（none, underline, overline, line-through）
text-transform: uppercase; テキストの変換（none, capitalize, uppercase, lowercase）
letter-spacing: 2px; 文字間のスペースを指定
line-height: 1.5; 行の高さ（行間）を指定
word-spacing: 5px; 単語間のスペースを指定
text-indent: 20px; 段落の最初の行のインデントを指定
white-space: nowrap; テキストの改行方法を指定（normal, nowrap, pre, pre-wrap, pre-line）
text-shadow: 2px 2px 5px #000; テキストの影を指定
direction: rtl; テキストの方向を指定（ltr, rtl）
textarea {
/* テキスト関連 */
color: #333; /* テキストの色 (変更候補: #000, #555, #888) */
font-size: 16px; /* フォントサイズ (変更候補: 14px, 18px, 20px) */
font-family: Arial, sans-serif; /* フォント (変更候補: "Times New Roman", "Courier New", "Georgia") */
line-height: 1.5; /* 行間 (変更候補: 1.2, 1.8, 2.0) */
/* サイズと表示領域 */
width: 100%; /* 幅 (変更候補: 80%, 90%, 固定値px) */
height: 150px; /* 高さ (変更候補: 120px, 200px, 300px) */
resize: vertical; /* リサイズ可能範囲 (変更候補: none, both) */
/* 余白とパディング */
padding: 10px; /* 内側の余白 (変更候補: 5px, 15px, 20px) */
margin: 20px; /* 外側の余白 (変更候補: 10px, 30px, auto) */
/* ボーダー関連 */
border: 2px solid #ccc; /* 枠線 (変更候補: 1px solid #000, 3px dashed #999) */
border-radius: 5px; /* 角の丸み (変更候補: 0px, 10px, 15px) */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 影 (変更候補: 0px 0px 0px transparent, 4px 4px 10px rgba(0, 0, 0, 0.3)) */
/* 背景 */
background-color: #f9f9f9; /* 背景色 (変更候補: #fff, #e0e0e0, #f0f0f0) */
/* background-image: url('path-to-image.png'); 背景画像 (変更候補: 画像パスを指定) */
/* カーソルや選択 */
cursor: text; /* カーソルの形状 (変更候補: pointer, auto, crosshair) */
caret-color: red; /* キャレットの色 (変更候補: blue, green, black) */
/* その他のプロパティ */
overflow: auto; /* 内容が超えた場合の処理 (変更候補: hidden, scroll, visible) */
box-sizing: border-box; /* パディングやボーダーを含めたボックスサイズ (変更候補: content-box) */
outline: none; /* フォーカス時のアウトライン (変更候補: outline: 2px solid blue) */
}
/* 背景画像の設定 */
.background {
background-image: url('image.jpg');
background-size: cover; /* 画像をボックスに合わせる */
background-position: center; /* 中央に位置させる */
background-repeat: no-repeat; /* 画像を繰り返さない */
}
background-color: #f0f0f0; 背景色を指定
background-image: url("image.jpg"); 背景画像を指定
background-repeat: no-repeat; 背景画像の繰り返し方法を指定（repeat, repeat-x, repeat-y, no-repeat）
background-position: center; 背景画像の位置を指定（top, bottom, left, right, center）
background-size: cover; 背景画像のサイズを指定（cover, contain, auto, 数値）
background-attachment: fixed; 背景画像のスクロール時の固定方法（scroll, fixed, local）
background-clip: padding-box; 背景が描画される領域を指定（border-box, padding-box, content-box）
background-origin: padding-box; 背景画像の起点を指定（border-box, padding-box, content-box）
background-blend-mode: multiply; 背景と背景色のブレンド方法を指定（multiply, screen, overlayなど）
background: #f0f0f0 url("image.jpg") no-repeat center/cover; 複数の背景プロパティを一行で指定
/* ボタンの基本スタイル */
button {
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px; /* 角を丸くする */
cursor: pointer; /* カーソルをポインタに */
}
button:hover {
background-color: #0056b3; /* ホバー時の色変更 */
}
background-color: #008CBA; /* ボタンの背景色を指定 */
color: white; /* ボタン上の文字の色を指定 */
padding: 10px 20px; /* ボタンの内側の余白（上下10px、左右20px）を指定 */
border: none; /* 枠線を無くす */
border-radius: 5px; /* ボタンの角を丸くする */
font-size: 16px; /* 文字サイズを指定 */
font-weight: bold; /* 文字を太字にする */
cursor: pointer; /* カーソルをポインターに変更 */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* ボタンに影を追加 */
transition: background-color 0.3s ease; /* ホバー時の背景色の変化をスムーズに */
/* ホバー時のスタイル */
button:hover {
background-color: #005f73; /* マウスオーバー時の背景色 */
}
/* アクティブ時のスタイル */
button:active {
background-color: #003f5c; /* クリック時の背景色 */
}
/* 無効状態のボタン */
button:disabled {
background-color: #ccc; /* 無効状態の背景色 */
color: #666; /* 無効状態の文字色 */
cursor: not-allowed; /* 無効状態のカーソル */
}
/* トランジションの設定 */
.element {
transition: background-color 0.3s ease; /* 背景色の変更にトランジションを適用 */
}
.element:hover {
background-color: #f0f0f0;
}
/* キーフレームアニメーション */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animated-element {
animation: fadeIn 1s ease-in-out;
}
/* トランジションの設定 */
.element {
transition: background-color 0.3s ease; /* 背景色の変更にトランジションを適用 */
}
/* トランジションのプロパティ一覧 */
- transition-property: 背景色などのトランジションを適用するプロパティ
- transition-duration: トランジションが完了するまでの時間（例: 0.3s）
- transition-timing-function: トランジションの速度の変化（例: ease, linear）
- transition-delay: トランジションが開始されるまでの待機時間
/* キーフレームアニメーション */
@keyframes fadeIn {
from { opacity: 0; } /* アニメーション開始時は透明 */
to { opacity: 1; } /* アニメーション終了時は不透明 */
}
/* キーフレームアニメーションのプロパティ一覧 */
- from: アニメーションの開始状態
- to: アニメーションの終了状態
- 0% から 100%: アニメーションの途中状態（例: 50%）
/* アニメーションを要素に適用 */
.animated-element {
animation: fadeIn 1s ease-in-out; /* fadeInアニメーションを1秒かけて、滑らかに表示 */
}
/* アニメーションのプロパティ一覧 */
- animation-name: 適用する@keyframesの名前（例: fadeIn）
- animation-duration: アニメーションの再生時間（例: 1s）
- animation-timing-function: アニメーションの速度変化（例: ease-in-out）
- animation-delay: アニメーションが始まるまでの遅延
- animation-iteration-count: アニメーションの繰り返し回数（例: infinite, 1）
- animation-direction: アニメーションの再生方向（例: normal, reverse, alternate）
- animation-fill-mode: アニメーション終了後の要素のスタイル（例: forwards, backwards）
/* 位置指定（絶対・相対） */
.positioned-element {
position: relative; /* 相対位置 */
top: 20px; /* 上から20px */
left: 10px; /* 左から10px */
}
.fixed-element {
position: fixed; /* 固定位置 */
bottom: 0;
right: 0;
}
/* 位置指定のプロパティ一覧 */
- position: 相対（relative）、絶対（absolute）、固定（fixed）、または固定（sticky）などの位置指定
- top: 要素の上端からの距離
- right: 要素の右端からの距離
- bottom: 要素の下端からの距離
- left: 要素の左端からの距離
/* 要素の重なり順を設定 */
.overlay {
position: absolute;
z-index: 10; /* 高い値ほど前面に表示 */
}
/* 要素の重なり順を設定するプロパティ一覧 */
- position: 要素の位置指定（relative, absolute, fixed, sticky）
- z-index: 要素の重なり順を設定するプロパティ
- 数値が高いほど、他の要素よりも前面に表示される
- 同じ値の場合は、HTMLの順序によって重なり順が決まる