 
      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 に関する演習解答