オンライン完結型のプログラミングスクール『テックアカデミー』。
『テックアカデミー』のYoutubeチャンネルで、プログラミングの基礎学習ができます。
HTMLの次はCSSの無料動画講座で学びましょう。
- 1 はじめてのCSS入門講座
- 1.1 1.CSSとは何か？
- 1.2 CSSの書き方
- 1.3 3.style属性によるスタイル適用
- 1.4 4.styleタグによるスタイル適用
- 1.5 5.外部ファイルによるスタイル適用
- 1.6 6.インライン要素とブロック要素
- 1.7 7.classセレクタとidセレクタ
- 1.8 8.CSSをまとめる
- 1.9 9.特殊なセレクタ
- 1.10 10.属性セレクタ
- 1.11 11.擬似要素
- 1.12 12.構造的な擬似要素
- 1.13 13.サイズの指定方法
- 1.14 14.単語による指定方法
- 1.15 15.色の指定方法
- 1.16 16.フォントの指定
- 1.17 17.文字の太さの指定
- 1.18 18.文字のスタイルの指定
- 1.19 19.行間の指定
- 1.20 20.文字の配置
- 1.21 21.リストの表示方法
- 1.22 22.paddingプロパティ（CSSのボックスモデル）
- 1.23 23.marginプロパティ
- 1.24 24.displayプロパティvisibilityプロパティ
- 1.25 25.boxサイズの考え方
- 1.26 26.floatプロパティ
- 1.27 27.positionプロパティ
- 1.28 28.z-index
- 1.29 29.背景の指定の基本
- 1.30 30.背景の指定の応用
- 1.31 31.背景を操る
- 1.32 32.borderプロパティ
- 1.33 33.角丸を扱う
- 1.34 34.影をつける
- 2 テックアカデミーの無料動画《はじめてのCSS入門講座》まとめ
はじめてのCSS入門講座
4分〜7分くらいの動画があります。全34本。
ひとつづつ見て、CSSの基礎を固めましょう↓
1.CSSとは何か？
【学習ポイント】
●CSSとは、文書の見た目を決めるために書かれるコード
●CSSの書き方は「どこ」の「何」を「どうするか」を指定する。書き方は以下の3通り↓
- 直接タグの中に（style属性）で書く
- HTMLファイルのheadタグの中にstyleタグで囲んで書く
- 外部ファイルに記述して読み込む
●外部ファイルCSSのメリットは、サイト全体をひとつのファイルでメンテナンスできること
CSSの書き方
【学習ポイント】
●CSSは後に書いたものが優先される
●セレクタの書き方によって優先度が変わる
3.style属性によるスタイル適用
【学習ポイント】
●直接CSSを書く時は、style属性を使う
●それぞれのタグの中にstyle=”(CSSの指定)”を追加してく
【使用するタグ】
style=”color: ◯◯;” 色を指定する
style=”font-size: ◯◯px;” 文字サイズを指定する
4.styleタグによるスタイル適用
【学習ポイント】
●headの中にstyleタグを使って記述してみよう
●type=”text/css”が必要になる
●style属性を加えてくことでデザインしてく
5.外部ファイルによるスタイル適用
【学習ポイント】
●外部ファイルからCSSを読み込むやり方を知ろう
●CSSのファイル名を付ける時は「.css」と付けよう
6.インライン要素とブロック要素
【学習ポイント】
●ブロック要素とは、ブロック単位で扱われる要素のこと（p,div,table,h1〜h6など）
●インライン要素とは、文書の一部を扱う要素のこと（a,span,imgなど）
7.classセレクタとidセレクタ
【学習ポイント】
●CSSの「セレクタ」とは、スタイルを適用する箇所のこと
●セレクタの書き方は「タイプセレクタ」「idセレクタ」「classセレクタ」の3種類ある
8.CSSをまとめる
【学習ポイント】
●CSSをまとめて効率よく書く方法を知ろう
9.特殊なセレクタ
【学習ポイント】
●特殊なセレクタについて知ろう
●親要素と子要素の関係を知ろう
10.属性セレクタ
【学習ポイント】
●属性セレクタについて知ろう
11.擬似要素
【学習ポイント】
●擬似要素について知ろう
12.構造的な擬似要素
【学習ポイント】
●構造的な擬似要素を知ろう
13.サイズの指定方法
【学習ポイント】
●いろいろなサイズの指定方法を知ろう
14.単語による指定方法
【学習ポイント】
●いろいろな単語による指定方法を知ろう
15.色の指定方法
【学習ポイント】
●色のいろいろな指定方法を知ろう
16.フォントの指定
【学習ポイント】
●フォントの指定方法を知ろう
●fontファイルが閲覧者の PCにインストールされていないと使用できない
17.文字の太さの指定
【学習ポイント】
●文字の太さは「言葉で指定する方法」と「数字で指定する方法」がある
18.文字のスタイルの指定
【学習ポイント】
●文字スタイルの指定を知ろう
19.行間の指定
【学習ポイント】
●行間の指定方法を知ろう
20.文字の配置
【学習ポイント】
●文字の揃え方を知ろう
21.リストの表示方法
【学習ポイント】
●リストの表示方法を知ろう
22.paddingプロパティ（CSSのボックスモデル）
【学習ポイント】
●paddingとは、ボックスの内側の余白
23.marginプロパティ
【学習ポイント】
●marginとは、ボックスの外側の余白
24.displayプロパティvisibilityプロパティ
【学習ポイント】
●displayプロパティとは「HTML要素をどのように表示するか」
●visibilityプロパティとは「HTML要素をどのように見せるか」
25.boxサイズの考え方
【学習ポイント】
●ボックスサイズの考え方を知ろう
26.floatプロパティ
【学習ポイント】
●floatとは、左右へ回り込んで配置すること
27.positionプロパティ
【学習ポイント】
●positionとは、位置を決める基準の指定をすること
28.z-index
【学習ポイント】
●z-indexとは、奥行きを指定すること
29.背景の指定の基本
【学習ポイント】
●背景の指定方法を知ろう
30.背景の指定の応用
【学習ポイント】
●背景指定の応用を知ろう
31.背景を操る
【学習ポイント】
●背景の操り方を知ろう
32.borderプロパティ
【学習ポイント】
●borderとはマージンとパディングの間のこと
33.角丸を扱う
【学習ポイント】
●borderを角丸にする方法を知ろう
34.影をつける
【学習ポイント】
●影のつけ方を知ろう
テックアカデミーの無料動画《はじめてのCSS入門講座》まとめ
『はじめてのHTML講座』はすんなり入ってきましたが、CSSからだんだん難しくなってきますね。
「セレクタ」が出てくるあたりから知らない用語が出てきて何言ってるんだかわからなくなってきました。
ざっくり一通り見終わりましたが、見ただけではわからないので手を動かしながら引き続きお勉強していきましょう。
Twitter（@saisei_to_hakai）では、気になるカルチャーについてつぶやいています。レアな情報を流したりするのでフォローしといてください。