CSSプロパティ

CSS(Cascading Style Sheets)は、ウェブページやウェブアプリケーションの見た目やスタイルを制御するための継承するスタイルシート言語です。HTMLがコンテンツの構造を定義するのに対して、CSSはそのコンテンツの見栄えやレイアウトを指定します。

  1. CSSを使って色やフォントなどのスタイルの指定
    テキストの色や背景色、フォントの種類やサイズ、背景色、線などの要素の見た目に関する多くの属性を指定できます。
  2. CSSを使ったレイアウトの調整
    要素の配置や大きさ、間隔などを指定して、ページ全体のレイアウトを調整することができます。
  3. CSSで設定するレスポンシブデザインの実装
    CSSを使用して、異なるデバイスや画面サイズに応じてページのレイアウトやスタイルを調整し、レスポンシブなデザインを実装することができます。
  4. CSSで作るアニメーションやトランジションの追加
    CSSを使用して、要素のアニメーションやトランジションを定義することができます。これにより、ページに動きを加えることができます。
目次

色やフォントなどのスタイルの指定

色やフォントなどのスタイルを指定するための一般的な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;
}

要素をフレックスボックスで配置する: flexdisplay: 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-widthheight: auto

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

  • max-width: 100%: 親要素に収まるように調整
  • height: auto: アスペクト比を維持して高さを自動調整
img {
  max-width: 100%; /* 画像が親要素を超えないように */
  height: auto; /* アスペクト比を維持 */
}

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

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

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

グリッドレイアウトでレスポンシブ対応: display: gridgrid-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-sizemedia query

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

body {
  font-size: 16px;
}

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

CSSで作るアニメーションやトランジションの追加

CSSを使うと、要素にアニメーションやトランジションを追加して、動きのあるデザインを簡単に実現できます。これにより、ボタンを押したときのエフェクトや、ページ読み込み時のアニメーションなど、ユーザー体験をより魅力的にすることができます。

アニメーションやトランジションを追加するための主なプロパティ

要素の変化をスムーズにする: transition

プロパティの変化(色やサイズの変更など)をスムーズにします。

  • プロパティ名: all, color, transform など
  • 継続時間: 1s(1秒)や 500ms(500ミリ秒)
  • イージング関数: ease, linear, ease-in, ease-out, cubic-bezier
  • 遅延時間(オプション): 0.5s(開始の遅延時間)
button {
  background-color: lightblue;
  transition: background-color 0.3s ease; /* 背景色を0.3秒で変化 */
}

button:hover {
  background-color: blue; /* ホバー時に背景色が青に */
}

アニメーションを定義する: animation

要素にアニメーション効果を適用します。

  • アニメーション名(@keyframes で定義)
  • 継続時間: 2s(2秒間)
  • イージング関数: ease, linear など
  • 繰り返し回数: infinite(無限ループ)、1(1回だけ)
  • 遅延時間や再生方向(オプション): reverse(逆再生)
div {
  animation: fade-in 2s ease-in-out infinite;
}

@keyframes fade-in {
  from {
    opacity: 0; /* 最初は透明 */
  }
  to {
    opacity: 1; /* 最後に表示 */
  }
}

アニメーションの繰り返しを設定する: animation-iteration-count

アニメーションの繰り返し回数を指定します。

  • 1(1回のみ)
  • infinite(無限ループ)
div {
  animation: bounce 1s ease infinite; /* 無限にバウンド */
}

アニメーションの再生方向を設定する: animation-direction

アニメーションの再生方向を指定します

  • normal(通常再生)
  • reverse(逆再生)
  • alternate(再生と逆再生を交互に)
div {
  animation: slide 3s ease alternate infinite;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

要素の変形を指定する: transform

要素を回転、拡大縮小、移動、傾斜させます。

  • rotate(45deg)(45度回転)
  • scale(1.5)(1.5倍に拡大)
  • translateX(100px)(X軸方向に100px移動)
  • skewX(20deg)(X軸方向に20度傾斜)
div {
  transform: scale(1);
  transition: transform 0.3s ease;
}

div:hover {
  transform: scale(1.2); /* ホバー時に1.2倍に拡大 */
}

要素の透明度を設定する: opacity

要素の透明度を指定します。

  • 0(完全に透明)
  • 1(完全に不透明)
  • 小数値(例: 0.5 は50%透明)
div {
  opacity: 1;
  transition: opacity 0.5s ease;
}

div:hover {
  opacity: 0.5; /* ホバー時に半透明に */
}

アニメーションの遅延を指定する: animation-delay

アニメーションの開始タイミングを遅らせます。

  • 時間(例: 1s, 500ms
div {
  animation: fade-in 2s ease-in-out;
  animation-delay: 1s; /* 1秒後に開始 */
}

トランジションの適用範囲を絞る: transition-property

トランジションを適用するプロパティを限定します。

  • プロパティ名(例: color, background-color, transform)
  • all(すべてのプロパティ)
button {
  transition-property: background-color;
  transition-duration: 0.3s;
}
目次