
基礎から学べる! CSS/CSS3マスター講座
CSS3を基礎から応用まで学べる講座
CSSの基本的な書き方から実際のWebサイトのレイアウト、上級者向けセレクタの記述まで、初心者の方でも実際にマークアップできるまでのスキルを身に付けられます。
動画を見ながら実際にWebページを作成しながら進めていきますが、動画は全て5〜10分前後にまとめているので、
「HTMLはわかるがCSSがまだできなくて始めたい」という初心者の方から、
「最新のCSSを学び直したい」という一定の知識を持っている方まで、
ご自身のペースで、楽しみながら学習していただけます。
また、つまずいたところや分からないところ等も簡単に戻って復習することができます。
※各セクションの冒頭に動画内で使用するデータを添付しています。あらかじめダウンロードした上でご覧ください。
※推奨条件
HTMLの基礎を知っておく必要があります。
このコースについて
Photoshop、Webデザイン、HTML、CSS、コーディングの5講座が全てセットになった未経験からプロのWebデザイナーに! 450レッスン完全マスターコースのCSSの部分を抽出したCSS3を学ぶコースです。
この講座で学べること
- CSS入門 第一回
- CSS入門 第二回
- テキストのスタイル
- ボックスのスタイル
- 背景・シャドウ・リスト
- レイアウト
- セレクタ
- セレクタ応用
初めてCSSを学習する方向けに、CSSの基本的な記述方法をレクチャーします。
一つのサイトを作成する流れの中で、CSSで出来る事はどんな事なのか?その読み込み方法など、まずはじめに覚えるべき操作についてお話しします。 初心者向けに構成しているので、複雑な機能やショートカットキーは極力使わずに進めます
簡単でかつはじめに覚えるべき、セレクターの書き方や、コメントアウトの書き方を学びます。
初心者向けに構成しているので、複雑な機能やショートカットキーは極力使わずに進めて行きます。
テキストの大きさや種類、太さといった、テキストのスタイルを設定するためのCSSについて学んでいきます。
シンプルなサイトのデザインを行いながら学んでいきます。
Webサイトのレイアウト等を組む際に、エリアの横幅、縦幅や余白などを調整する方法を学びます。
これらをCSSを使ってコントロールするためには、「ボックスモデル」という概念を理解する必要がありますので、作品作りを通して、1つずつ着実にマスターしていきましょう。
背景に色・画像を適応させたり、影をつける、またリストのアイコンを画像にする方法を学びます。
これらのCSSをマスターすれば、より一歩進んだWebサイトマークアップが可能になります。
Webサイトのレイアウトを組むためのCSSの記述方法について学びます。
また、ボックスを2つ左右に並べる「2カラムのウェブサイトレイアウト」を組んだり、 全体を真ん中に寄せる「センタリング」させたりといった方法を学びます。
CSSの命令先を宣言する、「セレクタ」について初心者向けに解説しています。
CSSのセレクタには様々な書き方がありますが、中には覚えておくと便利なセレクタがたくさんあります。 この章では、とくによく利用するセレクタをピックアップしてご紹介します。
CSSの命令先を宣言する、「セレクタ」について初心者向けに解説しています。
ここでは、一歩進んだ上級者向けの便利なセレクタの書き方についてご紹介していきます。 上級者・プロは必ず利用するセレクタの記述になります。
講師はテクノロジーとクリエイティヴのプロを目指すためのスクールを運営しており、卒業生は1000名以上。
未経験からWebデザイナーとして働けるレベルになることをゴールとしていますので、Webデザイナーを目指す方へオススメの講座です。
※HTMLの知識に自信がない方や、CSSの実践力をもっと身に付けたい方、デザイン面も学びたい方へ、同講師のHTML講座、コーディング講座、Photoshop講座、Webデザイン講座、フルセット版もご用意しております。
About the Instructor
テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。
卒業生は1000名以上です。
★提供しているサービス
2ヶ月のWebデザインコース
2ヶ月で未経験からWebデザイナーへ。
未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースです
Webデザインキャンプ
【2日間で全てを学ぶ!】Webデザイン集中講座
Railsキャンプ
RailsCamp -2日間集中プログラミング入門講座-
など
Course content
Section 1: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 | ||
Section 2: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 | ||
Section 3:テキストのスタイル | ||||
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 | ||
Section 4:ボックスのスタイル | ||||
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 | ||
Section 5:背景・シャドウ・リスト | ||||
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 | ||
Section 6:レイアウト | ||||
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 | ||
Section 7:セレクタ | ||||
61 | セレクタ | 1:00 | ||
62 | セレクタの基礎 | 7:46 | ||
63 | IDセレクタの使い方 | 5:03 | ||
64 | CLASSセレクタの使い方 | 4:37 | ||
65 | セレクタ(IDとCLASS)を組み合わせる方法 | 4:27 | ||
66 | [実践]セレクタを使いこなそう | 8:59 | ||
Section 8:セレクタ応用 | ||||
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 |