記事には広告が含まれています
なかぴょん
へびにょん
なかぴょんです。
今回はUdemyの講座、CSS / CSS3 マスターコース |70以上のレッスン、7時間以上のレッスンでCSSを基礎からマスターを受けてきました。
CSSを学んで間もない方や最新のCSSを学び直したいという方にもおすすめの講座です。
それでは、詳しく解説していきます。
誰向きなのか
・最新のCSSを学び直したい人
何が学べるのか
- CSSを使ったレイアウトの組み方や、フォームのスタイルなど、CSSの基礎を学びつつ、実践的なスキルが身につきます
学ぶ際の事前準備
HTMLの知識がある前提で話が進むので、事前にHTMLを学習しておく必要があります。
CSSに関しては全く知識がなくても問題ないです。
講座詳細
セクション1 CSS入門 第一回
初めてCSSを学習する方向けに、CSSの基本的な記述方法をレクチャーします。
一つのサイトを作成する流れの中で、CSSで出来る事はどんな事なのか?その読み込み方法など、まずはじめに覚えるべき操作についてお話しします。
初心者向けに構成しているので、複雑な機能やショートカットキーは極力使わずに進めます
- 1. スタイルシート、CSSとは?
- 2. ゼロから学ぶCSSの基本文法
- 3. CSSを書いてみよう:背景と文字の色を変更する
- 4. インラインCSSを書いてみよう
- 5. フォントのサイズと太さを変更してみよう
- 6. 外部CSSファイルの作成と読み込み方法
- 7. importタグを使ってCSSを読み込む方法
- 8. リセットCSSを使う方法
セクション2 CSS入門 第二回
簡単でかつはじめに覚えるべき、セレクターの書き方や、コメントアウトの書き方を学びます。
初心者向けに構成しているので、複雑な機能やショートカットキーは極力使わずに進めて行きます。
「CSS入門 第1回」の続きの章になりますので、初めてこの章をご覧になる方はまずこの前の章から始めてください。
- 9. すべての要素を対象にするセレクタの書き方
- 10. タグ名を指定してCSSをかける方法
- 11. スタイルの継承について
- 12. 複数の同じタグに異なるCSSを適応させる:id名の記述
- 13. 複数の同じタグに異なるCSSを適応させる:class名の記述
- 14. CSSコメントアウトを書く方法
- 15. ナビゲーションにCSSをかけてみよう(1)
- 16. 【続き】ナビゲーションにCSSをかけてみよう(2)
セクション3 テキストのスタイル
テキストの大きさや種類、太さといった、テキストのスタイルを設定するためのCSSについて学んでいきます。
シンプルなサイトのデザインを行いながら学んでいくので、楽しみながら学習していただけます。
初心者向けの章なので、複雑な機能やショートカットキー等は使用せず、気軽に取り組んでいただけます。
- 17. フォントの種類を指定するfont-familyの書き方
- 18. 特殊なフォント、Google Web Fontを指定しよう
- 19. フォントの大きさを指定するfont-sizeの書き方
- 20. CSSでの大きさを指定する単位について
- 21. font-sizeを使って、頭文字のみ大きくしてみよう
- 22. 文字の太さを変更するfont-weightの書き方
- 23. 下線や打ち消し線をtext-decorationで書こう
- 24. 文章の行間を指定するline-heightの書き方
- 25. フォントの設定を一括で行うCSSの書き方
- 26. [チャレンジ]font系CSSを利用して、お知らせページを作ってみよう
セクション4 ボックスのスタイル
Webサイトのレイアウト等を組む際に、エリアの横幅、縦幅や余白などを調整する方法を学びます。
これらをCSSを使ってコントロールするためには、「ボックスモデル」という概念を理解する必要がありますので、作品作りを通して、1つずつ着実にマスターしていきましょう。
- 27. ブロックタイプレベルとインラインレベルについて
- 28. ボックスモデルを理解する
- 29. 横幅と縦幅の指定するCSSのかけ方
- 30. 外側の余白を調整するmarginプロパティの書き方
- 31. 内側の余白を調整するpaddingプロパティの書き方
- 32. 境界線を付けるborderプロパティの書き方
- 33. borderプロパティを利用した、見出しを作ってみよう
- 34. インライン要素をブロック要素に変えるプロパティの使い方
- 35. ボックスの角を丸くするborder-radiusの書き方
- 36. [チャレンジ]ボックス系CSSを利用して、カフェのメニューページを作ろう
セクション5 背景・シャドウ・リスト
背景に色・画像を適応させたり、影をつける、またリストのアイコンを画像にする方法を学びます。
これらのCSSをマスターすれば、より一歩進んだWebサイトマークアップが可能になります。
この機会にぜひ、習得してください。
- 37. 背景の色を変更する方法
- 38. 背景に画像を設定する方法
- 39. スクロール固定の背景画像を設定する方法
- 40. テキストに影をつける方法
- 41. ボックスに影をつける方法
- 42. グラデーションの背景を設定する方法
- 43. リストのアイコンスタイルを変更する方法
- 44. リストのアイコンを画像に変更する方法
- 45. 背景画像を利用したリストアイコンの表示方法
セクション6 レイアウト
Webサイトのレイアウトを組むためのCSSの記述方法について学びます。
また、ボックスを2つ左右に並べる「2カラムのウェブサイトレイアウト」を組んだり、 全体を真ん中に寄せる「センタリング」させたりといった方法を学びます。
ボックスモデルを理解していないと、習得が難しい章になっていますので、「ボックスモデル」の章をご覧になってからこの章に挑んでください。
- 46. タグの横幅と縦幅の指定方法
- 47. サイト全体を中央寄せ、センタリングする方法
- 48. Webサイトを2カラムレイアウトにする方法
- 49. floatを利用した横並びのナビゲーションを作ってみよう
- 50. 位置を指定して配置するpositionプロパティの書き方
- 51. スクロール追従ナビゲーションを作成する方法
- 52. 指定範囲からはみ出た文字をスクロールさせる方法
- 53. overflowを使って、画像のサイズを変更してみよう
- 54. [チャレンジ]Webサイト2カラムレイアウトを作ってみよう
セクション7 セレクタ
CSSの命令先を宣言する、「セレクタ」について初心者向けに解説しています。
CSSのセレクタには様々な書き方がありますが、中には覚えておくと便利なセレクタがたくさんあります。
この章では、とくによく利用するセレクタをピックアップしてご紹介します。
- 55. セレクタについて
- 56. idセレクタの使い方
- 57. classセレクタの使い方
- 58. idセレクタとclassセレクタを組み合わせる方法
- 59. セレクタを使いこなしてみよう
- 60. オンマウスでリンクの文字色を変える方法
- 61. 特定の親要素の子要素にだけ、スタイルを適応させる方法
- 62. 複数のタグに同じCSSをかける方法
セクション8 セレクタ応用
CSSの命令先を宣言する、「セレクタ」について初心者向けに解説しています。
ここでは、一歩進んだ上級者向けの便利なセレクタの書き方についてご紹介していきます。
上級者・プロは必ず利用するセレクタの記述になりますので、この機会にぜひ覚えてみんなと差をつけよう!
初めてこの章をご覧になる方は、まずはじめに、「セレクタ」の章から初めて頂くとより理解が深まるはずです。
- 63. 擬似クラスfirst-childとlast-child
- 64. 擬似クラスを使った、横並びのナビゲーションを作ってみよう
- 65. 順番を指定してスタイルをかけるnth-childの使い方
- 66. nth-childとnth-of-typeの違いと使い方
- 67. nth-child擬似クラスを使って見やすいテーブルを作ろう
- 68. 最初の文字・行にスタイルを適応させる方法
- 69. 空要素のみにスタイルを適応させる方法
- 70. 直後に隣接している要素にスタイルを適応させる方法
- 71. チェックボックスにチェックを入れた時にスタイルを適応させよう
まとめ
今回はUdemyの講座、CSS / CSS3 マスターコース |70以上のレッスン、7時間以上のレッスンでCSSを基礎からマスターについてご紹介しました。
CSSを基礎からしっかりと学ぶことができて良かったです。
なかぴょんに受けてほしい学習サービスのリクエスト等ございましたら、
お問い合わせにてお伝えください。
なかぴょん