ホームに戻る
CSSコース
スタイルシートでWebページを美しくデザインしよう
初
初級
無料で学習可能
初級CSS基礎
問題1: 初めてのCSS - 文字色を赤に
CSSの基本を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: ___の部分にcolorを入れて「Hello CSS!」を赤色に変更
初級CSS基礎
問題2: 複数の色指定
複数のクラスに異なる色を指定する練習です！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にcolorを入れて「見出し」を青色に変更
📝 タスク2: 2つ目の___にcolorを入れて「本文テキスト」を黒色に変更
📝 タスク3: 3つ目の___にcolorを入れて「注意書き」を赤色に変更
初級CSS基礎
問題3: 要素セレクタ
要素セレクタを使って、特定のHTML要素全てにスタイルを適用する練習です！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にh2を入れて「小見出し1」「小見出し2」を緑色に変更
📝 タスク2: 2つ目の___にpを入れて「段落1」「段落2」を紺色に変更
💡 要素セレクタはクラス名ではなく、タグ名を直接指定します
初級CSS基礎
問題4: クラスとIDの使い分け
IDセレクタとクラスセレクタの違いを学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___に#を入れて「メインタイトル」を赤色に変更
📝 タスク2: 2つ目の___に.を入れて「コンテンツ1」「コンテンツ2」を青色に変更
💡 IDは一意の要素に、クラスは複数の要素に使用します
初級CSS基礎
問題5: 子孫セレクタ
子孫セレクタを使って、特定の親要素内の要素のみにスタイルを適用しましょう！
以下のタスクを完成させてください：
📝 タスク1: ___にpを入れて「コンテナ内の段落」だけをオレンジ色に変更
💡 コンテナ外のp要素は変更されません
初級CSS基礎
問題6: フォントサイズの指定
フォントサイズを指定して、文字の大きさを調整しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にfont-sizeを入れて「大きい見出し」を32pxに変更
📝 タスク2: 2つ目の___にfont-sizeを入れて「通常の本文」を16pxに変更
📝 タスク3: 3つ目の___にfont-sizeを入れて「小さい注釈」を12pxに変更
初級CSS基礎
問題7: フォントファミリー
フォントの種類を指定して、文字の印象を変えましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の2つの___にfont-familyとserifを入れて「明朝体の見出し」を明朝体に変更
📝 タスク2: 2つ目の___にsans-serifを入れて「ゴシック体の本文」をゴシック体に変更
📝 タスク3: 3つ目の___にmonospaceを入れて「等幅フォント」を等幅フォントに変更
初級CSS基礎
問題8: テキスト装飾
テキストに下線や取り消し線などの装飾を追加しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の2つの___にtext-decorationとunderlineを入れて「下線付きテキスト」に下線を追加
📝 タスク2: 2つ目の___にline-throughを入れて「取り消し線テキスト」に取り消し線を追加
📝 タスク3: 3つ目の___にnoneを入れて「下線なしリンク」の下線を削除
初級CSS基礎
問題9: テキスト配置
text-alignプロパティを使ってテキストの配置を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の2つの___にtext-alignとcenterを入れて「中央揃えタイトル」を中央揃えに変更
📝 タスク2: 2つ目の___にrightを入れて「右寄せテキスト」を右寄せに変更
📝 タスク3: 3つ目の___にjustifyを入れて「両端揃えの長い文章...」を両端揃えに変更
初級CSS基礎
問題10: 行間と太さ
line-heightとfont-weightを使ってテキストの見た目を調整しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の2つの___にline-heightと2を入れて「行間の広いテキスト」の行間を広げる
📝 タスク2: 2つ目の2つの___にfont-weightとboldを入れて「太字のテキスト」を太字に変更
📝 タスク3: 3つ目の___に300を入れて「細いテキスト」を細字に変更
初級CSS基礎
問題11: displayの基本
displayプロパティを使って要素の表示形式を変更しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の2つの___にdisplayとblockを入れて青い背景の要素をブロック要素に変更
📝 タスク2: 2つ目の___にinlineを入れて緑の背景の要素をインライン要素に変更
初級CSS基礎
問題12: inline-blockの活用
inline-blockを使って横並びナビゲーションを作りましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の2つの___にdisplayとinline-blockを入れる
📝 タスク2: 2つ目の3つの___にpadding、10px、20pxを入れる
📝 タスク3: 3つ目の___に10pxを入れる
初級CSS基礎
問題13: 要素の表示/非表示
要素の表示・非表示を制御する方法を学びましょう！
以下のタスクを完成させてください：
📝 タスク1: .visibleクラスは表示される（デフォルトのまま）
📝 タスク2: 1つ目の2つの___にdisplayとnoneを入れて「非表示の要素」を完全に非表示にする
📝 タスク3: 2つ目の2つの___にvisibilityとhiddenを入れて「見えない要素（スペース確保）」を見えなくする
初級CSS基礎
問題14: overflowの制御
overflowプロパティを使ってコンテンツのはみ出しを制御しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の2つの___にoverflowとscrollを入れて「このボックスは高さ100pxで固定されています。」のボックスをスクロール可能にする
📝 タスク2: 2つ目の___にhiddenを入れて「このボックスの高さも50pxで固定されています。」のはみ出し部分を隠す
初級CSS基礎
問題15: paddingの基本
paddingを使って要素の内側に余白を作りましょう！
以下のタスクを完成させてください：
📝 タスク: ___の部分にpaddingと20pxを入れて「内側に余白のあるボックス」に上下左右全てに20pxの内側余白を追加
初級CSS基礎
問題16: marginの基本
marginを使って要素間に間隔を作りましょう！
以下のタスクを完成させてください：
📝 タスク: ___の部分にmargin-bottomと30pxを入れて「カード1」と「カード2」の間に30pxの間隔を作る
初級CSS基礎
問題17: borderの作成
borderを使って要素に枠線を追加しましょう！
以下のタスクを完成させてください：
📝 タスク: ___の部分にborder、3px、solid、#333を入れて「額縁のようなボーダー」に3pxの実線の枠線を追加
初級CSS基礎
問題18: サイズ指定
widthとheightを使って要素のサイズを指定しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の2つの___にwidthと300pxを入れて幅を300pxに設定
📝 タスク2: 2つ目の2つの___にheightと200pxを入れて高さを200pxに設定
初級CSS基礎
問題19: box-sizingの理解
box-sizingプロパティの違いを理解しましょう！
以下のタスクを完成させてください：
📝 タスク1: .content-boxクラスの___に300px、20px、5px、solid、#333、box-sizing、content-boxを入れる
📝 タスク2: .border-boxクラスの___にborder-boxを入れる（他のプロパティは既に記入済み）
初級CSS基礎
問題20: 角丸ボーダー
border-radiusを使って角を丸くしましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の2つの___にborder-radiusと10pxを入れて「角丸ボタン（10pxの角丸）」の角を丸くする
📝 タスク2: 2つ目の___に50%を入れて「円形」を完全な円にする
初級CSS基礎
問題21: ホバースタイル
:hover擬似クラスを使ってインタラクティブなスタイルを作りましょう！
以下のタスクを完成させてください：
📝 タスク1: .hover-buttonの1つ目の___にhoverを入れて、ホバー時のスタイルを定義
📝 タスク2: .hover-linkの2つ目の___にhoverを入れて、リンクのホバースタイルを定義
📝 タスク3: 最後の2つの___にtext-decorationとunderlineを入れて、ホバー時に下線を追加
初級CSS基礎
問題22: フォーカススタイル
:focus擬似クラスを使ってアクセシブルなフォームを作りましょう！
以下のタスクを完成させてください：
📝 タスク1: .focus-inputの1つ目の___にfocusを入れて、フォーカス時のスタイルを定義
📝 タスク2: .focus-buttonの2つ目の___にfocusを入れて、ボタンのフォーカススタイルを定義
📝 タスク3: 3つ目と4つ目の___にoutlineとoutline-offsetを入れて、フォーカス時の枠線を設定
初級CSS基礎
問題23: 状態変化のスタイル
:checkedと:active擬似クラスを使って状態に応じたスタイルを作りましょう！
以下のタスクを完成させてください：
📝 タスク1: .styled-checkboxの1つ目の___にcheckedを入れて、チェック時にラベルのスタイルを変更
📝 タスク2: .active-buttonの2つ目の___にactiveを入れて、クリック時のスタイルを定義
📝 タスク3: 3つ目と4つ目の___にtransformと0.95を入れて、クリック時に縮小効果を追加
初級CSS基礎
問題24: beforeとafter要素
::beforeと::after擬似要素を使って装飾を追加しましょう！
以下のタスクを完成させてください：
📝 タスク1: .decorated-textの1つ目の___にbeforeを入れ、2つ目の___に#ffd700を入れる
📝 タスク2: .styled-quote::beforeの___に"「"を入れる
📝 タスク3: .styled-quote::afterの1つ目の___にafterを入れ、2つ目の___に#666を入れる
初級CSS基礎
問題25: カスタムリストマーカー
擬似要素を使ってカスタムリストマーカーを作りましょう！
以下のタスクを完成させてください：
📝 タスク1: .custom-listの1つ目の2つの___にlist-styleとnoneを入れてデフォルトのマーカーを削除
📝 タスク2: li要素の2つ目の___にbeforeを入れて擬似要素を追加
📝 タスク3: 3つ目の2つの___にcontentと"▸ "を入れてカスタムマーカーを表示
初級CSS基礎
問題26: 背景色
要素に背景色を設定してデザインを豊かにしましょう！
以下のタスクを完成させてください：
📝 タスク1: .bg-primaryの___にbackground-colorを入れて「プライマリー背景」に青色（#007bff）を設定
📝 タスク2: .bg-secondaryの___に#6c757dを入れて「セカンダリー背景」にグレー色を設定
初級CSS基礎
問題27: 背景画像
背景画像を設定して視覚的なインパクトを作りましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にbackground-imageを入れて「ヒーローイメージ」に背景画像を設定
📝 タスク2: 2つ目の2つの___にbackground-sizeとcoverを入れて画像を要素全体に広げる
📝 タスク3: 3つ目の2つの___にbackground-positionとcenterを入れて画像を中央に配置
初級CSS基礎
問題28: 背景のサイズと位置
背景画像のサイズと位置を調整してレイアウトを最適化しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にcontainを入れて「コンテイン背景」の画像全体を表示
📝 タスク2: 2つ目と3つ目の___にbackground-repeatとno-repeatを入れて画像の繰り返しを防ぐ
📝 タスク3: 4つ目の___にbackground-colorを入れて背景色を設定
初級CSS基礎
問題29: 透明度の制御
opacityとrgbaを使って透明度を制御しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___に0.5を入れて「このボックスはopacityで50%透明に」を実現
📝 タスク2: 2つ目の___にrgba(0, 123, 255, 0.5)を入れて背景のみ50%透明の青色に設定
初級CSS基礎
問題30: グラデーションの作成
CSSグラデーションを使って美しい色の変化を作りましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目と2つ目の___にlinear-gradientとto rightを入れて左から右への線形グラデーション（青→緑）を作成
📝 タスク2: 3つ目と4つ目の___にradial-gradientとcircleを入れて円形グラデーション（赤→黄）を作成
中
中級
無料で学習可能
中級CSS基礎
問題31: positionの基本
positionプロパティを使って要素の配置を制御しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にrelativeを入れて相対配置を設定
📝 タスク2: 2つ目の___に10pxを入れて10px下に移動
📝 タスク3: 3つ目の___にabsoluteを入れて絶対配置を設定
📝 タスク4: 4つ目の___に20pxを入れて下から20pxの位置に配置
中級CSS基礎
問題32: 固定ヘッダー
position: fixedを使って、スクロールしても画面上部に固定されるヘッダーを作りましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にfixedを入れて固定配置を設定
📝 タスク2: 2〜4つ目の___に0を入れて画面上部に固定し、左右いっぱいに広げる
📝 タスク3: 5つ目の___にz-indexを入れて他の要素より前面に表示
中級CSS基礎
問題33: z-indexの制御
z-indexを使って要素の重なり順を制御しましょう！
現在、HTMLの順序により赤（レイヤー3）が最前面にあり、青（レイヤー1）が隠れています。
z-indexを使って順序を逆転させてください：
📝 タスク1: 1つ目の___に3を入れて.layer1（青）を最前面に
📝 タスク2: 2つ目の___に2を入れて.layer2（緑）を中間に
📝 タスク3: 3つ目の___に1を入れて.layer3（赤）を最背面に
💡 CSSを適用すると、青が最前面、赤が最背面になります
中級CSS基礎
問題34: モーダルウィンドウ
position fixedとflexboxを使ってモーダルウィンドウを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にfixedを入れて画面全体に固定配置
📝 タスク2: 2つ目の___にflexを入れてフレックスボックスを有効化
📝 タスク3: 3つ目の___にcenterを入れて水平方向の中央配置
📝 タスク4: 4つ目の___にcenterを入れて垂直方向の中央配置
📝 タスク5: 5つ目の___にrelativeを入れて相対配置を設定
中級CSS基礎
問題35: stickyポジション
position: stickyを使ってスクロール時に固定されるナビゲーションを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にstickyを入れてスティッキー配置を設定
📝 タスク2: 2つ目の___に0を入れて上端に固定
📝 タスク3: 3つ目の___に100を入れて他の要素より前面に表示
💡 stickyは通常時は相対配置、スクロール時は固定配置になります
中級CSS基礎
問題36: floatで横並び
floatを使って要素を左右に配置する練習です！
以下のタスクを完成させてください：
📝 タスク1: 1つ目と2つ目の___にfloatとleftを入れて左寄せ
📝 タスク2: 3つ目と4つ目の___にfloatとrightを入れて右寄せ
💡 floatは要素を通常のフローから外して配置します
中級CSS基礎
問題37: clearfixテクニック
clearfixテクニックを使ってfloatの高さ問題を解決しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目と2つ目の___にclearfixとafterを入れて擬似要素を作成
📝 タスク2: 3つ目の___に""を入れて空のコンテンツを設定
📝 タスク3: 4つ目の___にbothを入れて両側のfloatを解除
📝 タスク4: 5つ目の___にleftを入れてフロート要素を左寄せ
中級CSS基礎
問題38: 2カラムレイアウト
floatを使って2カラムレイアウトを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にleftを入れてサイドバーを左に配置
📝 タスク2: 2つ目の___に270pxを入れてコンテンツの左余白を調整（サイドバー幅+20px）
💡 これでサイドバーとメインコンテンツが横並びになります
中級CSS基礎
問題39: テキスト回り込み
floatを使って画像の周りにテキストを回り込ませましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にleftを入れて画像を左に配置
📝 タスク2: 2つ目の___に0 20px 10px 0を入れて右と下に余白を設定
💡 雑誌のような画像とテキストのレイアウトが作れます
中級CSS基礎
問題40: カラムレイアウト
CSS Columnsを使って新聞のような段組みレイアウトを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にcolumn-countを入れて3カラムに分割
📝 タスク2: 2つ目の___にcolumn-gapを入れてカラム間の余白を設定
📝 タスク3: 3つ目の___にcolumn-ruleを入れてカラム間の区切り線を追加
中級CSS基礎
問題41: Flexコンテナ作成
Flexboxの第一歩！display: flexで横並びレイアウトを作成しましょう！
以下のタスクを完成させてください：
📝 タスク: 1つ目の___にdisplay、2つ目の___にflexを入れてFlexコンテナを作成
💡 これだけで子要素が横並びになります
中級CSS基礎
問題42: 配置方向の変更
flex-directionを使って縦並びレイアウトを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にflexを入れてFlexコンテナを作成
📝 タスク2: 2つ目の___にcolumnを入れて縦並びに変更
💡 主軸の方向を変更できます
中級CSS基礎
問題43: 中央揃え
Flexboxで完全な中央揃えを実現しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にflexを入れてFlexコンテナを作成
📝 タスク2: 2つ目の___にcenterを入れて横方向の中央揃え
📝 タスク3: 3つ目の___にcenterを入れて縦方向の中央揃え
💡 これで上下左右の中央に配置されます
中級CSS基礎
問題44: 要素間隔の調整
justify-contentのspace-betweenで要素を均等配置しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にflexを入れてFlexコンテナを作成
📝 タスク2: 2つ目の___にspace-betweenを入れて要素を均等配置
💡 要素が左端・中央・右端に自動的に配置されます
中級CSS基礎
問題45: 伸縮可能レイアウト
flex-growで残りのスペースを埋める可変レイアウトを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にflexを入れてFlexコンテナを作成
📝 タスク2: 2つ目の___に1を入れて残りのスペースを埋める
💡 固定幅と可変幅の組み合わせレイアウト
中級CSS基礎
問題46: レスポンシブカード
flex-wrapで画面幅に応じて折り返すカードレイアウトを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にflexを入れてFlexコンテナを作成
📝 タスク2: 2つ目の___にwrapを入れて折り返しを有効化
📝 タスク3: 3つ目の___に20pxを入れて要素間の余白を設定
📝 タスク4: 4つ目の___に1 1 250pxを入れて伸縮可能かつ最小幅250pxに設定
中級CSS基礎
問題47: 複雑なナビゲーション
実践的なナビゲーションバーを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にcenterを入れて垂直方向の中央揃え
📝 タスク2: 2つ目の___にautoを入れてロゴを左端に固定
📝 タスク3: 3つ目と4つ目の___にmargin-leftとautoを入れてCTAを右端に固定
💡 ロゴ左、リンク中央、CTA右のレイアウト
上
上級
無料で学習可能
上級CSS基礎
問題48: Grid基本
CSS Gridで2×2のグリッドレイアウトを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にgridを入れてGridコンテナを作成
📝 タスク2: 2つ目と3つ目の___にgrid-template-columnsと1fr 1frを入れて2列に分割
📝 タスク3: 4つ目の___にgrid-template-rowsを入れて2行に分割
💡 これで均等な2×2のグリッドが完成
上級CSS基礎
問題49: Gridエリア
grid-template-areasでレイアウトエリアを定義しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にgrid-template-areasを入れてエリアを定義
📝 タスク2: 2つ目の___にheaderを入れてヘッダーエリアを指定
📝 タスク3: 3つ目の___にsidebarを入れてサイドバーエリアを指定
📝 タスク4: 4つ目の___にmainを入れてメインエリアを指定
📝 タスク5: 5つ目の___にfooterを入れてフッターエリアを指定
上級CSS基礎
問題50: 自動フィットグリッド
レスポンシブな自動調整グリッドを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にgridを入れてGridコンテナを作成
📝 タスク2: 2つ目の___にauto-fitを入れて自動フィットを有効化
📝 タスク3: 3つ目の___にminmaxを入れて最小・最大サイズを設定
💡 画面幅に応じて列数が自動調整されます
上級CSS基礎
問題51: ギャラリーレイアウト
特集画像を含むギャラリーレイアウトを作成しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にgrid-template-columnsを入れて列を定義
📝 タスク2: 2つ目の___にgrid-template-rowsを入れて行を定義
📝 タスク3: 3つ目と4つ目の___にgrid-rowとspan 2を入れて2行分を占める
上級CSS基礎
問題52: 入れ子グリッド
グリッドの中にグリッドを配置する入れ子構造を作りましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にgridを入れて外側のGridコンテナを作成
📝 タスク2: 2つ目の___にgrid-template-columnsを入れて外側の列を定義
📝 タスク3: 3つ目の___にgridを入れて内側のGridコンテナを作成
上級CSS基礎
問題53: トランジション効果
スムーズなトランジション効果を実装しましょう！
以下のタスクを完成させてください：
📝 タスク1: 1つ目の___にall 0.3s easeを入れてボタンのトランジションを設定
📝 タスク2: 2つ目の___に:hoverを入れてホバー状態を指定
📝 タスク3: 3つ目の___にscale(1.05)を入れて拡大効果を追加
📝 タスク4: 4つ目の___にall 0.5s easeを入れてボックスのトランジションを設定
上級CSS基礎
問題54: 3Dトランスフォーム
3D空間での要素の変形を実装しましょう！
📝 タスク1: 1つ目の___にrotateX(45deg) rotateY(45deg)を入れて3D回転を設定
📝 タスク2: 2つ目の___にpreserve-3dを入れて3D変形を有効化
📝 タスク3: 3つ目の___に1000pxを入れて遠近感を設定
📝 タスク4: 4つ目の___に:hoverを入れてホバー時の動作を設定
📝 タスク5: 5つ目の___にhiddenを入れて裏面を非表示に
📝 タスク6: 6つ目の___にrotateY(180deg)を入れて裏面の回転を設定
上級CSS基礎
問題55: アニメーションタイミング
高度なアニメーションタイミングを実装しましょう！
📝 タスク1: 1つ目の___に@keyframes bounceを入れてアニメーションを定義
📝 タスク2: 2つ目の___に0%, 100% { transform: translateY(0); }を入れて開始・終了位置を設定
📝 タスク3: 3つ目の___に50% { transform: translateY(-50px); }を入れて中間位置を設定
📝 タスク4: 4つ目の___にanimation: bounce 1s ease-in-out infiniteを入れてバウンスアニメーションを適用
📝 タスク5: 5つ目の___にfadeInを入れてフェードインアニメーションを定義
📝 タスク6: 6つ目の___にslideInを入れてスライドインアニメーションを定義
📝 タスク7: 7つ目の___にanimation: slideIn 0.5s ease-out calc(var(--index) * 0.1s) bothを入れてスタガーアニメーションを適用
上級CSS基礎
問題56: メディアクエリ
レスポンシブデザインをメディアクエリで実装しましょう！
📝 タスク1: 1つ目の___に@mediaを入れてメディアクエリを開始
📝 タスク2: 2つ目の___にmax-widthを入れて最大幅の条件を設定
📝 タスク3: 3つ目の___にandを入れて複数条件を接続
📝 タスク4: 4つ目の___にmax-widthを入れてタブレットの最大幅を設定
📝 タスク5: 5つ目の___に@media printを入れて印刷用スタイルを定義
上級CSS基礎
問題57: ビューポート単位
ビューポート単位を使った柔軟なレイアウトを作成しましょう！
📝 タスク1: 1つ目の___にheight: 100vhを入れてビューポート高さに設定
📝 タスク2: 2つ目の___にfont-size: 5vwを入れてビューポート幅に応じた文字サイズに設定
📝 タスク3: 3つ目の___にwidth: 50vmin;を入れて正方形の幅を設定
📝 タスク4: 4つ目の___にheight: 50vmin;を入れて正方形の高さを設定
上級CSS基礎
問題58: レスポンシブ画像
様々なデバイスに最適化された画像表示を実装しましょう！
📝 タスク1: 1つ目の___にheight: auto;を入れて画像の高さを自動調整
📝 タスク2: 2つ目の___にmax-width: 800pxを入れて最大幅を制限
📝 タスク3: 3つ目の___にobject-fit: coverを入れて画像を切り抜き表示
📝 タスク4: 4つ目の___にaspect-ratio: 16 / 9を入れてアスペクト比を設定
📝 タスク5: 5つ目の___にoverflow: hiddenを入れてはみ出し部分を非表示
上級CSS基礎
問題59: コンテナクエリ
コンテナクエリを使ってコンテナサイズに応じたレスポンシブデザインを実装しましょう！
📝 タスク1: 1つ目の___にcontainer-type: inline-sizeを入れてコンテナを定義
📝 タスク2: 2つ目の___に@container (min-width: 500px)を入れて大きなコンテナ用の条件を設定
📝 タスク3: 3つ目の___にgap: 2remを入れてフレックス要素間の間隔を設定
📝 タスク4: 4つ目の___に@container (max-width: 499px)を入れて小さなコンテナ用の条件を設定
📝 タスク5: 5つ目の___にfont-size: 0.9remを入れて文字サイズを設定
上級CSS基礎
問題60: レスポンシブタイポグラフィ
clamp()関数を使った流動的なタイポグラフィを実装しましょう！
📝 タスク1: 1つ目の___にclampを入れて流動的なサイズ関数を開始
📝 タスク2: 2つ目の___に4vw + 1remを入れて可変値を設定
📝 タスク3: 3つ目の___に--rhythmを入れてCSS変数を定義
📝 タスク4: 4つ目の___にvar(--rhythm)を入れて変数を参照
📝 タスク5: 5つ目の___にletter-spacing: 0.02emを入れて文字間隔を設定
📝 タスク6: 6つ目の___にmax-width: 65chを入れて読みやすい行長を設定