テキストの書式設定

テキストの配置 (Text Align)

ウェブコンテンツの大部分はテキストです。CSSのtext-alignプロパティは、テキストの配置方法を制御するために使用されます。

.element {
  text-align: justify; /* テキストを均等に配置し、行の幅を揃えます */
  text-align: center;  /* テキストを中央揃えにします */
  text-align: right;   /* テキストを右揃えにします */
  text-align: left;    /* テキストを左揃えにします (デフォルト) */
}

太字 (Bold)

テキストを太字にするには、<strong>タグを使用します。これは、読者の注意を引いたり、強調を示したりするのに役立ちます。

CSSではfont-weightプロパティを使用します。

<strong>強調したいテキスト</strong>

.bold-text {
  font-weight: bold; /* または数値 (例: 700) */
}

下線 (Underline)

テキストに下線を追加するには<u>タグを使用できますが、リンクと紛らわしくなる可能性があるため、text-decoration: underline; をCSSで使用することが推奨されます。

<u>下線付きテキスト</u>

.underline-text {
  text-decoration: underline;
}

強調・斜体 (Italic)

<em>タグはテキストの強調に、<i>タグは斜体に使用されます。CSSではfont-style: italic;を使用します。

<em>は意味的な強調を、<i>は技術用語、タイトル、または外国語のフレーズなどのスタイル設定を目的としています。

<em>意味的に強調されたテキスト</em>
<i>斜体テキスト</i>

.italic-text {
  font-style: italic;
}

大文字・小文字 (Case)

CSSのtext-transformプロパティを使用すると、HTMLのコンテンツを変更せずにテキストの大文字・小文字を制御できます。

値 (Value)	例 ("Transform me")
lowercase	transform me
uppercase	TRANSFORM ME
capitalize	Transform Me
initial	元の状態 (通常はnone)
inherit	親要素のtext-transform値
none (デフォルト)	Transform me

.uppercase-text {
  text-transform: uppercase;
}

上付き文字・下付き文字 (Subscript/Superscript)

<sup>タグは上付き文字、<sub>タグは下付き文字に使用され、数式などで役立ちます。

<sup>上付き文字</sup>
<sub>下付き文字</sub>

線 (Line)

取り消し線 (Strikethrough)

<s>タグは、無効になったテキストに水平線を追加します。CSSではtext-decoration: line-through;を使用します。

<s>取り消し線付きテキスト</s>

.strikethrough-text {
  text-decoration: line-through;
}

水平線 (Horizontal Line)

<hr>タグは、親要素の幅いっぱいに広がる水平線を作成し、コンテンツのセクションを視覚的に区切ります。これは自己終了タグです。

<hr>

行 (Row)

改行 (Wrap)

<br>タグは改行を挿入します。これは自己終了タグです。

<br>

行の高さ (Line Height)

CSSのline-heightプロパティは、テキスト行間の垂直スペースを設定します。

.multi-line-text {
  line-height: 1.5; /* 行の高さをフォントサイズの1.5倍に設定 */
  /* または固定値 */
  /* line-height: 25px; */
}

影 (Shadow)

ボックス影 (Box Shadow)

box-shadowプロパティは、要素に影を追加します。複数の影をカンマ区切りで指定できます。

プロパティは以下の値で構成されます:

• offset-x: 水平方向のオフセット
• offset-y: 垂直方向のオフセット
• blur-radius (オプション): ぼかし半径
• spread-radius (オプション): 拡張半径
• color: 色

.element-with-shadow {
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.23);
}

透明度 (Transparency)

不透明度 (Opacity)

CSSのopacityプロパティは、要素の透明度を設定します。値は0（完全に透明）から1（完全に不透明）の範囲です。

.transparent-element {
  opacity: 0.7; /* 70%の不透明度 */
}

超リンク (Anchor)

ホバー状態 (Hover State)

a:hover擬似クラスセレクタを使用して、リンクのホバー状態（マウスカーソルが乗ったとき）のスタイルを定義できます。

a:hover {
  color: blue;
  text-decoration: none;
}

位置 (Position)

相対位置 (Relative Positioning)

position: relative;を設定すると、要素は通常のドキュメントフロー内の位置からCSSプロパティ（top, right, bottom, left）で指定された量だけオフセットされます。元の位置は保持されます。

.relative-element {
  position: relative;
  bottom: 10px; /* 元の位置から10px上に移動 */
  left: 5px;    /* 元の位置から5px右に移動 */
}

絶対位置 (Absolute Positioning)

position: absolute;を設定すると、要素はドキュメントフローから外れ、最も近い配置された祖先要素（positionがstatic以外）またはbody要素を基準に配置されます。top, right, bottom, leftプロパティで位置を指定します。

.absolute-element {
  position: absolute;
  bottom: 10px;
  right: 10px; /* 右下隅から10pxの位置に配置 */
}

固定位置 (Fixed Positioning)

position: fixed;は、要素をビューポート（ブラウザウィンドウ）に対して固定します。スクロールしても位置は変わりません。top, right, bottom, leftで位置を指定します。

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: lightgray;
  z-index: 100; /* 他の要素の上に表示 */
}

浮動 (Float)

floatプロパティ（leftまたはright）は、要素をドキュメントフローから外し、指定された方向に配置します。要素は、コンテナの端または他の浮動要素の端に達するまで移動します。通常、widthを指定する必要があります。

.float-left {
  float: left;
  width: 50%;
  margin-right: 10px; /* 右側に余白 */
}

.float-right {
  float: right;
  width: 50%;
  margin-left: 10px; /* 左側に余白 */
}

要素の重なり (Overlapping)

要素が重なる場合、HTMLで後に出現する要素が前面に表示されます。z-indexプロパティ（整数値）を使用して、要素のスタック順序を制御できます。値が大きいほど前面に表示されます。

.layer1 {
  position: relative;
  z-index: 1;
}

.layer2 {
  position: relative;
  z-index: 2; /* layer1 より前面に表示 */
}

要素の水平中央揃え (Centering)

ブロックレベル要素を水平中央揃えにするには、要素にwidthを設定し、marginをautoに設定します。

.centered-block {
  width: 80%; /* または固定幅 */
  margin-left: auto;
  margin-right: auto;
}

/* 画像をブロックレベル要素として中央揃えにする場合 */
img.centered-image {
  display: block; /* ブロックレベルに変換 */
  margin-left: auto;
  margin-right: auto;
}

グラデーション (Gradient)

線形グラデーション (Linear Gradient)

CSSのlinear-gradient()関数を使用して、背景に線形グラデーションを作成できます。

.gradient-background {
  /* 左から右へのグラデーション (赤から黄色) */
  background: linear-gradient(to right, red, yellow);

  /* 対角線方向 (左下から右上) */
  /* background: linear-gradient(45deg, red, yellow); */

  /* 複数の色 */
  /* background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255)); */
}

repeating-linear-gradient()は、指定されたグラデーションを繰り返します。

.repeating-gradient {
  background: repeating-linear-gradient(
    45deg,
    yellow,
    yellow 40px,
    blue 40px,
    blue 80px
  );
}

背景画像 (Background Image)

背景画像の指定

backgroundプロパティでurl()関数を使用して背景画像を指定できます。

.element-with-image {
  background-image: url("path/to/your/image.jpg");
  background-repeat: no-repeat; /* 画像の繰り返しを無効にする */
  background-size: cover;       /* 画像を要素全体に引き伸ばす */
  background-position: center;  /* 画像を中央に配置 */
}

要素のサイズ変更 (Scale)

スケール変換 (Scale Transform)

transform: scale()関数は、要素の表示サイズを変更します。1.0は元のサイズです。

.scaled-element {
  transform: scale(1.5); /* 要素を1.5倍に拡大 */
}

.scaled-on-hover:hover {
  transform: scale(1.1); /* ホバー時に1.1倍に拡大 */
}

スキュー変換 (Skew Transform)

skewX()はX軸（水平方向）に、skewY()はY軸（垂直方向）に要素を傾けます。

.skewed-element-x {
  transform: skewX(24deg); /* X軸方向に24度傾ける */
}

.skewed-element-y {
  transform: skewY(24deg); /* Y軸方向に24度傾ける */
}

アニメーションとキーフレーム (Animation & Keyframes)

アニメーションの基本

animationプロパティはアニメーション全体を制御し、@keyframesルールはアニメーションの各段階を定義します。

animation-nameでキーフレーム名を指定し、animation-durationでアニメーションの時間を指定します。

.animated-box {
  width: 100px;
  height: 100px;
  animation-name: colorChange;
  animation-duration: 4s;
}

@keyframes colorChange {
  0% { background-color: blue; }   /* 開始時 */
  50% { background-color: green; } /* 中間時 */
  100% { background-color: yellow; } /* 終了時 */
}

animation-fill-mode: forwards;は、アニメーション終了後のスタイルを維持します。

animation-iteration-countはアニメーションの繰り返し回数を指定します。infiniteで無限に繰り返します。

.infinite-animation {
  animation-iteration-count: infinite;
}

アニメーションの速度曲線 (Timing Function)

animation-timing-functionは、アニメーションの速度変化を定義します。一般的な値にはease (デフォルト), linear, ease-in, ease-out, ease-in-outがあります。

ベジェ曲線 (Bezier Curve)

カスタム速度曲線

cubic-bezier(x1, y1, x2, y2)を使用して、カスタムの速度曲線（ベジェ曲線）を定義できます。これにより、アニメーションの開始、中間、終了時の速度を細かく制御できます。

.custom-timing {
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

配置 (Align)

テキストの配置

詳細は「テキストの配置」セクションを参照してください。

HTML要素の配置

要素の配置には、ボックスモデルとドキュメントフローを考慮する必要があります。

中央揃え (Centering)

ブロックレベル要素: 幅を設定し、margin: auto;を使用します。

.parent-container {
  border: 2px solid red;
  padding: 10px;
}

.child-element {
  width: 60%;
  padding: 15px;
  border: 3px solid green;
  margin-left: auto;
  margin-right: auto;
}

インライン要素: display: block;を設定してから中央揃えを適用します。

.inline-to-block {
  display: block; /* インライン要素をブロックレベルに変換 */
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 1px dashed blue;
}

左右配置 (Justify/Align)

floatプロパティやpositionプロパティが一般的に使用されます。

float: right;は要素を右に配置し、テキストがその要素を回り込みます。

.container-with-float {
  border: 1px solid gray;
  padding: 10px;
}

.float-right-image {
  float: right;
  width: 100px;
  height: 100px;
  margin-left: 15px; /* 画像の左側に余白 */
}

<div class="container-with-float">
  <img src="example.jpg" alt="Example" class="float-right-image">
  <p>このテキストは画像の右側を回り込みます。画像が配置された後、テキストは続きます。</p>
</div>