CSS入門【第3版】
ウェブページの見た目を設定するために必須の基礎知識を学ぼう
合計時間:03:30:19
コース紹介動画
学習内容
主な学習トピック
- CSSとは何か理解できるようになります。
- よく使う基本的なCSSプロパティが使えるようになります。
- ボックスモデルの基礎が理解できるようになります。
- 擬似クラスが使えるようになります。
- フォント指定ができるようになります。
- ウェブフォント(Google Fonts)が使えるようになります。
- ウェブフォントアイコン(Material Symbols)が使えるようになります。
- Google Chrome Dev Toolsを使って、CSSのデバッグができるようになります。
講座内容
ウェブページのスタイル(見た目)を指定するための言語であるCSS(シーエスエス)の基本を学習します。
学習に必要な要件
- 基本的なパソコン(macOS または Windows)の操作ができること。
- HTMLの基本を習得済み
このコースのターゲット
- CSSは未習得
- ウェブページが制作できるようになりたい方
- 将来的にウエブアプリケーションエンジニアへ転職したい方
バージョン情報
- CSS3
更新履歴
- 2024/3/30 新規公開
レクチャー一覧
- CSSの基本を習得しよう【第3版】
-
1. イントロダクション - CSSの基本を習得しよう00:43
- CSSとは
- CSS入門ついての主な学習内容
-
2. CSSの基本をマスターしよう03:28
- CSS に関する補足
- HTML と CSS の役割分担について
- CSS の歴史について
- CSS の下位互換性について
- CSS で最も重要な基本ルールについて
-
3. 学習の準備をしよう103:28
- CSS 入門の学習環境についての概要
- Google Chrome のインストールについて
-
4. 学習の準備をしよう202:29
- Visual Studio Code の設定について
-
5. はじめてのCSSを書いてみよう 下準備〜内部参照06:55
- 例題:要素の文字色を変更
- 内部参照による CSS の記述方法について
- 内部参照のトラブルシューティング
-
6. はじめてのCSSを書いてみよう 外部参照04:39
- 外部参照による CSS の記述方法について
- 外部参照のトラブルシューティング
-
7. はじめてのCSSを書いてみよう インライン01:47
- インラインによる CSS の記述方法について
- インラインのトラブルシューティング
-
8. はじめてのCSSを書いてみよう 優先順位について05:06
- 同じ要素に対する CSS を複数の箇所に書いた場合の優先順位について
-
9. コメントアウトをしよう03:15
- コメントアウトの構文について
- コメントの用途について
- CSS コメントの色の変更に関する補足
-
10. 色の指定ができるようになろう05:42
- 色指定の構文について
- RGB値で指定する方法について
- 16進数とは
- バリエーションについて
- カラーに関するよくあるご質問
- カラー名で指定する方法について
-
11. 背景を設定しよう08:11
- 画像を背景に設定する方法について
- 相対パスについて
- ドラッグアンドドロップ操作についての補足
- 背景を設定に関するよくあるご質問
-
12. 演習:色と背景の指定01:50
- 「色の指定」と「背景の指定」に関する演習
-
13. 演習解答:色と背景の指定02:09
- フォルダ構成に関する補足
- 「色の指定」と「背景の指定」に関する演習解答
-
14. ボックスモデルの基本を理解しよう03:33
- ボックスモデルとは
- ボックスモデルを調整できる主なプロパティについて
-
15. マージンを設定しよう06:58
- マージンに関する補足
- マージン設定に関する演習
- マージン設定に関する様々な指定方法
-
16. マージンの相殺について理解しよう①03:22
- マージンの相殺とは
- 上下マージンのみの相殺について
- マージンが相殺されないケースについての補足
-
17. マージンの相殺について理解しよう②04:12
- 親と子のボックスの上下マージンは、相殺されるとは
- 上マージン側に関する演習
- 下マージン側に関する演習
-
18. パディングを設定しよう03:53
- パディングに関する補足
- パディングの設定に関する演習
- パディングの設定に関する様々な指定方法
-
19. ボーダーを設定しよう05:06
- ボーダーに関する補足
- ボーダーの設定に関する演習
- ボーダーの設定に関する様々な指定方法
-
20. ボックスモデルの横幅と高さを指定しよう①04:28
- width と height について
- width … 横幅に関する演習
- height …縦幅に関する演習
-
21. ボックスモデルの横幅と高さを指定しよう② box-sizing03:25
- box-sizing プロパティに関する補足
- box-sizing プロパティとは
-
22. マージンとパディングの違いを学ぼう02:57
- マージンとパディングの違いについて
- 余白ができる位置に関する補足
- パディングについての補足
- 幅指定に関する補足
-
23. 演習:ボックスモデル01:36
- ボックスモデルに関する演習
-
24. 演習解答:ボックスモデル03:38
- ボックスモデルに関する演習解答
-
25. 4つのセレクターを使えるようになろう09:22
- 4つのセレクターについて
- セレクターに関する補足
- ID についての補足
- 一つの要素で複数のクラスを設定する場合についての補足
- 4つのセレクターの優先順位について
-
26. 結合子を使ったセレクタを指定しよう09:26
- 結合子を使ったセレクターの種類について
- 子孫セレクターについて
- 子セレクターについて
- 隣接セレクターについて
- 間接セレクターについて
-
27. 複数のセレクタを指定しよう01:58
- 複数のセレクターを指定する方法について
-
28. 演習:セレクタ04:00
- セレクターに関する演習
-
29. 演習解答:セレクタ04:18
- セレクターに関する演習解答
-
30. リンクで使用する疑似クラスを指定しよう03:37
- 擬似クラスとは
- リンクで使用する擬似クラスについて
- 記述の順番についての補足
- スマートフォンやタブレットについての注意点
-
31. 演習:擬似クラスの指定01:45
- 擬似クラスの指定に関する演習
-
32. 演習解答:擬似クラスの指定01:48
- 擬似クラスの指定に関する演習解答
-
33. フォントを指定しよう06:42
- CSS によるフォント指定についての構文
- フォント名とフォントファミリーについて
- どうやって指定を決めるのかについて
-
34. ウェブフォントを利用しよう05:31
- ウェブフォントとは
- フォント指定の課題について
- ウェブフォントを利用するメリットについて
- ウェブフォントに関するまとめ
-
35. ウェブアイコンフォントを利用しよう06:42
- ウェブアイコンフォントとは
- ウェブアイコンフォントサービスの使い方について
- 代表的なウェブアイコンフォントサービスについて
- Material Symbols(Google Fonts)に関する演習
-
36. テキストに様々なスタイルを設定しよう06:47
- フォントサイズ指定でよく使う4つの単位について
- px での指定についての注意点
- テキストにスタイルを当てる方法について
-
37. 演習:テキストの装飾01:41
- テキストの装飾に関する演習
-
38. 演習解答:テキストの装飾03:09
- テキストの装飾に関する演習解答
-
39. リストを装飾しよう05:47
- list-style-type 指定の代表例
-
40. 演習:リストの装飾02:08
- リストの装飾に関する演習
-
41. 演習解答:リストの装飾03:33
- リストの装飾に関する演習解答
-
42. リセットCSSを設定しよう08:02
- リセット CSS とは
- リセット CSS の種類の参考
- よく使われるリセット CSS について
- リセット CSS の使い方について
- ress.css を CDN 経由で使用する演習
-
43. Google Chrome Dev Toolsを使って、デバッグをしてみよう①04:37
- Google Chrome Dev Tools とは
- Google Chrome Dev Tools の使い方(起動〜設定)
-
44. Google Chrome Dev Toolsを使って、デバッグをしてみよう②05:22
- 要素の表示について
- 要素の選択について
- 要素の追加や編集について
- 要素の複製や削除、非表示について
- 要素へ属性を追加する方法について
-
45. Google Chrome Dev Toolsを使って、デバッグをしてみよう③05:22
- CSS のスタイルの追加・編集・削除について
- 値の変更について
- チェックを外すについて
- プロパティの追加について
- スタイルの追加について
-
46. Google Chrome Dev Toolsを使って、デバッグをしてみよう④04:18
- 計算済みタブの見方について
- デバイスサイズの変更について
-
47. 演習:Google Chrome Dev Tools03:48
- Google Chrome Dev Tools に関する演習
-
48. 演習解答:Google Chrome Dev Tools07:46
- Google Chrome Dev Tools に関する演習解答