CSS基礎講座 - 初心者向けスタイリング学習コース

1. CSSのできること＆基本の書き方

CSSとは何か、HTMLとの関係、外部・内部・インラインスタイルの違いなどを解説します。

2. 基本構文＆コメントの書き方

CSSの基本構文（セレクタ・プロパティ・値）とコメントの書き方について学びます。

3. フォントとサイズ

フォントの種類やサイズの指定方法について学び、読みやすく美しい文字表現をマスターします。

font-family, font-size

4. 文字の色と行間

文字の色、行間、文字間隔、配置を調整して読みやすいページを作ります。

color, line-height, letter-spacing, text-align

5. 背景・ボーダーの基本

背景色、背景画像、ボーダーの設定方法を学びます

background, background-color, background-image, border, border-radius

6. 装飾効果とグラデーション

ボックスシャドウ、グラデーションの装飾効果を学びます

box-shadow, text-shadow, linear-gradient, radial-gradient

7. 擬似クラスと擬似要素

擬似クラスと擬似要素を使って、マウスをのせたときの効果や装飾的な要素を作る方法を学びます。

:hover, :active, :focus, ::before, ::after, ::first-letter, transition, transform

8. ボックスモデル

CSSのボックスモデル（padding、margin、border、box-sizing）について学び、要素のスペース調整をマスターします。

margin, padding, border, width, height, box-sizing

9. displayプロパティ

displayプロパティについて学び、レイアウトの基礎を理解します。

display: block, display: inline, display: inline-block, display: none

10. Flexbox

Flexboxを使った柔軟なレイアウト作成を学びます

display: flex, justify-content, align-items, gap, flex-wrap

11. positionプロパティ

positionプロパティの基本を学び、Webページのレイアウトの幅を広げましょう

position, top, left, right, bottom, z-index

12. レスポンシブデザイン

メディアクエリを使ったレスポンシブデザインを学びます

13. ポートフォリオページを作ろう！プロジェクト概要とHTML構造

これまで学んできたCSSの知識を活用し、ポートフォリオページの作成を始めます。まずは基本となる考え方を学びましょう。

14. ポートフォリオページのべーススタイルを整えよう

これまで学んできたCSSの知識を活用し、ポートフォリオページの作成を始めます。まずは全体のベーススタイルを整えましょう。

15. ポートフォリオページのヘッダーとナビゲーションをスタイリングしよう

これまで学んできたCSSの知識を使い、ヘッダーとナビゲーションをスタイリングします。

16. ポートフォリオページの自己紹介セクションをスタイリングしよう

これまで学んできたCSSの知識を使い、自己紹介セクションをスタイリングします。

17. ポートフォリオサイトのスキルセクションをスタイリングしよう

スキルや技術を視覚的に表現するセクションのデザインを学びます

18. ポートフォリオページのお問い合わせフォームデザインしよう

お問い合わせフォームのデザインとユーザビリティを学びます

19. ポートフォリオページのフッターをスタイリングしよう

これまで学んできたCSSの知識を使い、ポートフォリオページのフッターをスタイリングします。

20. ポートフォリオサイトのレスポンシブ対応

これまで学んできたCSSの知識を使い、ポートフォリオサイトをレスポンシブ対応します。

CSSのできること＆基本の書き方

CSSの基本構文と記述方法について

CSS 基本構文＆コメントの書き方

CSSの基本構文・セレクタ・コメントについて

CSS フォントとサイズ

CSSのフォントとサイズについて

CSS 文字の色と行間

CSSの文字の色と行間について

CSS 背景とボーダー

CSSの背景とボーダーについて

CSS 装飾効果とグラデーション

CSSの装飾効果とグラデーションについて

CSS 疑似クラスと擬似要素

CSSの疑似クラスと擬似要素について

CSS ボックスモデル

CSSのボックスモデルについて

CSS レイアウト

CSSのレイアウトについて

CSS Flexbox

CSSのFlexboxについて

CSS position

CSSのpositionについて

CSS レスポンシブデザイン

CSSのメディアクエリについて

CSS練習問題 基本構文

基本的なCSSスタイリングを適用する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 クラスセレクタ

クラスセレクタを適用する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 IDセレクタ

IDセレクタを適用する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 フォントファミリー

フォントファミリーを適用する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 フォントサイズ

フォントサイズを適用する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 行間

行間を適用する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 文字間

文字間を適用する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 文字の配置

文字の配置を中央揃えにする練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 背景色

背景色を設定する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 ボーダー

ボーダーを設定する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 ボックスシャドウ

ボックスシャドウを設定する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 テキストシャドウ

テキストシャドウを設定する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 線形グラデーション

線形グラデーションを設定する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 擬似クラス

擬似クラスを使用してボタンのホバー効果を設定する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 擬似要素

擬似要素を使用して見出しの前にアイコンを追加する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 transition

transitionプロパティの練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 transform

transformプロパティの練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 余白

余白の練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 ボーダー

ボーダーの練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 displayプロパティ

aタグをブロック要素にする練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 要素を非表示にする

要素を画面から消す練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 横並び

要素を横並びにする練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 Flexboxで中央揃え

Flexboxを使って要素を中央揃えにする練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 Flexboxで縦方向の中央揃え

Flexboxを使って要素を縦方向に中央揃えにする練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 Flexboxで折り返し

Flexboxで要素が親要素の幅を超えた場合に折り返すようにする練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 positionで位置調整

positionプロパティを使ってボックスを元の位置からずらす練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 positionで親要素を基準に配置

.parent要素を基準に.child要素を配置する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 レスポンシブデザイン（メディアクエリ）

幅が600px以下のデバイスのみに適用されるメディアクエリを作成する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。

CSS練習問題 画像のレスポンシブ対応

画像をレスポンシブ対応にするためのCSSを作成する練習問題。ドラッグ&ドロップでCSSを正しい位置に配置してください。