お問い合わせ
CSSの基礎知識
77本（5時間34分）
1IDあたり5,000円/月
①支払い方法はクレジット決済のみです。
②弊社動画システムのアカウントをお持ちでない方は新規でアカウント作成いただきます。
③ご契約の際は利用規約を必ずご確認ください。
④解約は自身のアカウントページより実施できます。
CSSを基礎から学ぶ
HTMLでページの構造を理解できても、CSSによる見た目の調整でつまずく学習者は少なくありません。要素の配置や装飾が思い通りにいかずレイアウトが崩れたり、配置がずれたりすることで、学習の手が止まってしまうケースも多く見られます。
この動画コンテンツでは、CSSの仕組みや役割を理解できるように設計されており、レイアウトや装飾を整えたWebページを作り上げるまでの流れを効率的に学習できます。実際の操作を見ながら、CSSタグの使い方や書き方を理解し、自分の手を動かして演習を重ねることで、学んだ知識を実務に活きるスキルとして習得することができます。
登壇講師
システムエンジニア／プログラミング講師
村山 雅彦
システムエンジニア兼プログラミング講師としてIT教育事業に携わる。
株式会社クロノス主催の法人向けIT研修講師や、Web技術、統計・機械学習などの研修を担当し、Udemyにて「基礎だけ学ぶ PHPプログラミング講座」をリリースしている。
Webシステムの開発にも携わり、要件定義や設計、プログラミング、テスト、導入支援を手がけている。
この学習で期待される効果・特徴
- Webページ制作がどのように作成されるか理解できる
- CSSコーディングができるようになる
- 実務でCSSのスキルを運用できる
価格プラン
CSSの基礎知識
5,000 円/月
法人のお申し込みについて
enfacでは、法人での一斉視聴や複数コンテンツを組み合わせたご提供を行っております。想定視聴者数や、期間、同時に提供するコンテンツに応じて、ディスカウントを行っております。
まずは、詳細をお気軽にお問合せください。
動画コンテンツ詳細
CSSの基礎知識
01
CSSとは（7本）
- CSSとは
- CSSの構文
- CSSの記述方法 概要
- CSSの記述方法 – インラインCSS
- CSSの記述方法 – 内部CSS
- CSSの記述方法 – 外部CSS
- コメントの記述方法
02
セレクタ（9本）
- セレクタとは
- セレクタの記述 – 要素型セレクタ
- セレクタの記述 – クラスセレクタ
- セレクタの記述 – IDセレクタ
- 応用的なセレクタの記述 – ユニバーサルセレクタ
- 応用的なセレクタの記述 – セレクタリスト
- 応用的なセレクタの記述 – 結合子
- 演習①part2_ex1.html
- 演習②part2_ex2.html
03
カラーとフォントに関するプロパティ（7本）
- colorプロパティ
- background-colorプロパティ
- font-familyプロパティ
- font-sizeプロパティ
- font-weightプロパティ
- 演習①part3_ex1.css
- 演習②part3_ex2.css
04
ボックスモデルに関するプロパティ（9本）
- ボックスモデルとは
- ブロックボックスとインラインボックス
- widthプロパティとheightプロパティ
- borderプロパティ
- paddingプロパティ
- marginプロパティ
- box-sizing プロパティ
- 演習①part4_ex1.css
- 演習②part4_ex1.cssの修正
05
フレックスボックスに関するプロパティ（12本）
- フレックスボックスとは
- フレックスコンテナとフレックスアイテム
- displayプロパティ（display: flex）
- justify-contentプロパティ
- align-itemsプロパティ
- flex-directionプロパティ
- flex-growプロパティ
- flex-basisプロパティ
- flex-shrinkプロパティ
- flexプロパティ
- 演習①part5_ex1.css
- 演習②part5_ex1.cssの修正
06
グリッドに関するプロパティ（8本）
- グリッドとは
- グリッドコンテナとグリッドアイテム
- displayプロパティ（display: grid;）
- grid-template-columnsプロパティ
- grid-template-rowsプロパティ
- gapプロパティ
- 演習①part6_ex1.html
- 演習②part6_ex1.css の修正
07
位置指定に関するプロパティ（8本）
- positionプロパティ
- positionプロパティ – position: relative;
- positionプロパティ – position: absolute;
- positionプロパティ – position: fixed;
- positionプロパティ – position: sticky;
- positionプロパティ – position: static;
- 演習①part7_ex1.css
- 演習②part7_ex1.css の修正
08
レスポンシブWebデザインとは（8本）
- レスポンシブWebデザインとは
- ビューポート
- メディアクエリ
- 可変グリッド（Fluid Grids）
- 可変画像（Fluid Images）
- モバイルファースト
- 演習①part8_ex1.css
- 演習②part8_ex2.css
09
CSSの実践（ブログシステム）（9本）
- 概要
- 記事一覧画面 -カードコンポーネント
- 記事一覧画面 – 画像付きカードコンポーネント
- 記事一覧画面 – カードグリッド
- 共通 – ヘッダー
- 共通 – フッター
- 共通 – レスポンシブ対応
- 演習article.html
- CSS講座のまとめ
10,000本超の
動画ラーニングから自由に
選ぶ・組み合わせる。
VUCA時代に対応できる
人材開発・研修を実現
最適・最良の組み合わせをご提案
オーダーメイドでの動画制作
実装・運営までサポート
