CSS(Cascading Style Sheets)は、ウェブページやウェブアプリケーションの見た目やスタイルを制御するための継承するスタイルシート言語です。HTMLがコンテンツの構造を定義するのに対して、CSSはそのコンテンツの見栄えやレイアウトを指定します。
- CSSを使って色やフォントなどのスタイルの指定
テキストの色や背景色、フォントの種類やサイズ、背景色、線などの要素の見た目に関する多くの属性を指定できます。 - CSSを使ったレイアウトの調整
要素の配置や大きさ、間隔などを指定して、ページ全体のレイアウトを調整することができます。 - CSSで設定するレスポンシブデザインの実装
CSSを使用して、異なるデバイスや画面サイズに応じてページのレイアウトやスタイルを調整し、レスポンシブなデザインを実装することができます。 - 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; }
要素をフレックスボックスで配置する: 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; /* 小さい画面では文字を小さく */ } }
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; }