レッスンCSSの基本操作

    見放題

このレッスンを受講するには

【実践型】動画 総再生時間 約6時間10分
★関連ファイルより資料をダウンロード後レッスンを視聴
Webサイトのデザインを整えるために欠かせない「CSS」の基本操作を学んで
魅力的なデザインが出来る土台を作りましょう！


全15パート順番に学習をすすめてください。

1

CSSの書き方と読み込み方法（18分36秒）

2

CSSのセレクター（14分19秒）

3

CSSで用いる値と単位（8分53秒）

4

文字の装飾（41分23秒）

5

フォントの変更（29分7秒）

6

背景の指定（27分47秒）

7

要素の大きさの変更と表示形式（33分20秒）

8

余白の調整（22分33秒）

9

枠線と影・角丸（26分25秒）

10

箇条書きの装飾とリセットCSS（17分17秒）

11

横並びレイアウトの作成（35分45秒）

12

グリッド形式のレイアウトの作成（21分43秒）

13

簡単なアニメーション（24分58秒）

14

さまざまなスタイルのテクニック（48分14秒）

15

テスト

このレッスンについて

CSSの基本操作を学ぼう！


Webサイトのデザインを整えるために欠かせない「CSS」の基本操作を学ぶレッスンです。
実際にコードを書きながら、スタイリングの基礎を習得しましょう！

レッスン概要

14レッスン（約10~30分）

学べること

CSSの基本構造の理解ができる
フォントや色などの基本設定が理解できる
簡単なアニメーションまでも出来るようになる

特徴


初心者でもわかりやすく、基本からしっかり学べる！
実際にCSSを書きながら、デザインの変更を体験！
ボックスモデルやレイアウトの概念を理解し、実践的なスキルを習得！

各パートについて

  1. 1CSSの書き方と読み込み方法（18分36秒）

    ★正解例は関連ファイルの「03_正解例」をご参照ください

  2. 2CSSのセレクター（14分19秒）

    ↓サンプルファイルは下記です↓セレクターサンプルコード_zipファイル

  3. 3CSSで用いる値と単位（8分53秒）

  4. 4文字の装飾（41分23秒）

    ★正解例は関連ファイルの「03_正解例」をご参照ください

  5. 5フォントの変更（29分7秒）

    ↓参照ファイルは下記です↓font-familyのフォント名の調べ方(Mac_Windows)★正解例は関連ファイルの「03_正解例」をご参照ください

  6. 6背景の指定（27分47秒）

    ★正解例は関連ファイルの「03_正解例」をご参照ください

  7. 7要素の大きさの変更と表示形式（33分20秒）

    ★正解例は関連ファイルの「03_正解例」をご参照ください

  8. 8余白の調整（22分33秒）

    ★正解例は関連ファイルの「03_正解例」をご参照ください

  9. 9枠線と影・角丸（26分25秒）

    ★正解例は関連ファイルの「03_正解例」をご参照ください

  10. 10箇条書きの装飾とリセットCSS（17分17秒）

    ★正解例は関連ファイルの「03_正解例」をご参照ください

  11. 11横並びレイアウトの作成（35分45秒）

    ★正解例は関連ファイルの「03_正解例」をご参照ください

  12. 12グリッド形式のレイアウトの作成（21分43秒）

    ★正解例は関連ファイルの「03_正解例」をご参照ください

  13. 13簡単なアニメーション（24分58秒）

    ★正解例は関連ファイルの「03_正解例」をご参照ください

  14. 14さまざまなスタイルのテクニック（48分14秒）

    ★正解例は関連ファイルの「03_正解例」をご参照ください

  15. 15テスト

関連ファイル

※関連ファイルは受講可能になるとダウンロードできます

  • 関連ファイル_CSS.zip(7.72 MB)