Top Programming 基礎から学べる! CSS/CSS3マスター講座
PRO COURSE

基礎から学べる! CSS/CSS3マスター講座

初めてCSSを学ぶ方向けに、CSSの基本文法からCSS3などの応用まで学びます。実際にレイアウトを組んだり等、実践を交じえながら進めます。

CSS3を基礎から応用まで学べる講座

CSSの基本的な書き方から実際のWebサイトのレイアウト、上級者向けセレクタの記述まで、初心者の方でも実際にマークアップできるまでのスキルを身に付けられます。

動画を見ながら実際にWebページを作成しながら進めていきますが、動画は全て5〜10分前後にまとめているので、
「HTMLはわかるがCSSがまだできなくて始めたい」という初心者の方から「最新のCSSを学び直したい」という一定の知識を持っている方まで、 ご自身のペースで、楽しみながら学習していただけます。

また、つまずいたところや分からないところ等も簡単に戻って復習することができます。

※各セクションの冒頭に動画内で使用するデータを添付しています。あらかじめダウンロードした上でご覧ください。

※推奨条件
HTMLの基礎を知っておく必要があります。

このコースについて

Photoshop、Webデザイン、HTML、CSS、コーディングの5講座が全てセットになった未経験からプロのWebデザイナーに! 450レッスン完全マスターコースのCSSの部分を抽出したCSS3を学ぶコースです。

この講座で学べること

  1. CSS入門 第一回
  2. 初めてCSSを学習する方向けに、CSSの基本的な記述方法をレクチャーします。
    一つのサイトを作成する流れの中で、CSSで出来る事はどんな事なのか?その読み込み方法など、まずはじめに覚えるべき操作についてお話しします。 初心者向けに構成しているので、複雑な機能やショートカットキーは極力使わずに進めます


  3. CSS入門 第二回
  4. 簡単でかつはじめに覚えるべき、セレクターの書き方や、コメントアウトの書き方を学びます。
    初心者向けに構成しているので、複雑な機能やショートカットキーは極力使わずに進めて行きます。


  5. テキストのスタイル
  6. テキストの大きさや種類、太さといった、テキストのスタイルを設定するためのCSSについて学んでいきます。
    シンプルなサイトのデザインを行いながら学んでいきます。


  7. ボックスのスタイル
  8. Webサイトのレイアウト等を組む際に、エリアの横幅、縦幅や余白などを調整する方法を学びます。
    これらをCSSを使ってコントロールするためには、「ボックスモデル」という概念を理解する必要がありますので、作品作りを通して、1つずつ着実にマスターしていきましょう。


  9. 背景・シャドウ・リスト
  10. 背景に色・画像を適応させたり、影をつける、またリストのアイコンを画像にする方法を学びます。
    これらのCSSをマスターすれば、より一歩進んだWebサイトマークアップが可能になります。


  11. レイアウト
  12. Webサイトのレイアウトを組むためのCSSの記述方法について学びます。
    また、ボックスを2つ左右に並べる「2カラムのウェブサイトレイアウト」を組んだり、 全体を真ん中に寄せる「センタリング」させたりといった方法を学びます。


  13. セレクタ
  14. CSSの命令先を宣言する、「セレクタ」について初心者向けに解説しています。
    CSSのセレクタには様々な書き方がありますが、中には覚えておくと便利なセレクタがたくさんあります。 この章では、とくによく利用するセレクタをピックアップしてご紹介します。


  15. セレクタ応用
  16. CSSの命令先を宣言する、「セレクタ」について初心者向けに解説しています。
    ここでは、一歩進んだ上級者向けの便利なセレクタの書き方についてご紹介していきます。 上級者・プロは必ず利用するセレクタの記述になります。


    講師はテクノロジーとクリエイティヴのプロを目指すためのスクールを運営しており、卒業生は1000名以上。
    未経験からWebデザイナーとして働けるレベルになることをゴールとしていますので、Webデザイナーを目指す方へオススメの講座です。


    ※HTMLの知識に自信がない方や、CSSの実践力をもっと身に付けたい方、デザイン面も学びたい方へ、同講師のHTML講座、コーディング講座、Photoshop講座、Webデザイン講座、フルセット版もご用意しております。

About the Instructor

Course content

Total 6 hours 37 minutes
Preview You can preview lectures with this label
CSS入門 第一回
1 CSS入門 第一回 1分00秒
2 スタイルシート、CSSとは? Preview 4分41秒
3 CSSの基本文法 4分46秒
4 簡単なCSSを記述してみよう 4分04秒
5 インラインCSSを書いてみよう(1) 5分41秒
6 インラインCSSを書いてみよう(2) 4分05秒
7 外部CSSファイルの作成と読み込み 7分24秒
8 importタグを使ってCSSを読み込む 4分22秒
9 リセットCSSを使う方法 2分34秒
CSS入門 第二回
10 CSS入門 第二回 1分00秒
11 すべての要素にスタイルを適用する方法 2分28秒
12 要素を指定してスタイルをかける方法 5分59秒
13 スタイルの継承について 6分48秒
14 ID名を使ったスタイルの指定 6分06秒
15 CLASS名を使ったスタイルの指定 5分25秒
16 CSSにコメントアウトを書く方法 2分22秒
17 [実践]複雑な構造にスタイルを適応(1) 5分30秒
18 [実践] 複雑な構造にスタイルを適応(2) 4分07秒
テキストのスタイル
19 テキストのスタイル 1分00秒
20 フォントの種類を指定するCSS 6分56秒
21 Google Web Fontを利用する方法 5分55秒
22 フォントの大きさを指定する方法 1分39秒
23 大きさの指定について 4分07秒
24 [実践]頭文字のみ文字を大きくする 6分30秒
25 文字の太さを変更する方法 4分22秒
26 下線・上線・打ち消し線をつける方法 4分49秒
27 文章の行間を指定する方法 5分19秒
28 フォントの設定を一括で行う方法 3分05秒
29 [チャレンジ]プロパティを使いこなそう 9分49秒
ボックスのスタイル
30 ボックスのスタイル 1分00秒
31 ブロックタイプとインラインについて 4分58秒
32 ボックスモデルを理解する 3分16秒
33 横幅と縦幅の指定方法 10分18秒
34 外側の余白の付け方 6分45秒
35 内側の余白の付け方 7分27秒
36 境界線の付け方 8分05秒
37 [実践]スタイル付きの見出しを作る 5分21秒
38 アンカーテキストをブロック化する方法 4分43秒
39 ボックスの角を丸くする方法 4分02秒
40 [チャレンジ]カフェのメニューページ 7分03秒
背景・シャドウ・リスト
41 背景・シャドウ・リスト 1分00秒
42 背景の色を変更する方法 5分22秒
43 背景画像を表示する方法 7分51秒
44 [実践]スクロール固定の背景画像に設定 4分42秒
45 テキストに影をつける方法 5分30秒
46 ボックスに影をつける方法 4分45秒
47 背景をグラデーションにする方法 8分24秒
48 リストのスタイルを変更する方法 5分07秒
49 リストマーカーを画像に変更する方法 3分34秒
50 位置調整の出来るリストアイコンの作成方法 3分56秒
レイアウト
51 レイアウト 1分00秒
52 横幅と縦幅の指定方法 6分19秒
53 ページ全体をセンタリングする方法 3分31秒
54 ボックスを横並びにするFLOATの使い方 9分32秒
55 [実践]横並びの商品一覧を作ろう 8分02秒
56 要素を好きな位置に固定させる方法 7分46秒
57 スクロール追従ナビゲーションを作る 4分28秒
58 範囲内に収まらない要素の表示方法 5分48秒
59 [実践]画像の切り出しをしよう 2分40秒
60 [チャレンジ]レイアウトを作ろう 5分17秒
セレクタ
61 セレクタ 1分00秒
62 セレクタの基礎 7分46秒
63 IDセレクタの使い方 5分03秒
64 CLASSセレクタの使い方 4分37秒
65 セレクタ(IDとCLASS)を組み合わせる方法 4分27秒
66 [実践]セレクタを使いこなそう 8分59秒
セレクタ応用
67 セレクタ応用 1分00秒
68 擬似クラスの使い方 5分18秒
69 子孫コンビネータの使い方 4分47秒
70 セレクタをグループ化する方法 3分24秒
71 「first-child」「last-child」の使い方 4分07秒
72 [実践]横並びのナビゲーション作成 6分34秒
73 子の順番を指定する「nth-child」の使い方 6分13秒
74 「nth-child」と「nth-of-type」について 5分57秒
75 [実践]見やすいテーブルを作ってみよう 9分52秒
76 最初の文字・行にスタイルを適応させる 5分39秒
77 空要素のみにスタイルを適応させる 3分53秒
78 直後に隣接している要素にスタイルを適応 4分50秒
79 [実践]チェックボックスにスタイルを適応 4分36秒

Ratings and reviews

5.0
1 reviews
5 stars
100%
4 stars
0%
3 stars
0%
2 stars
0%
1 stars
0%

Related Courses