CSS研修でプロパティを順番に覚えても、既存サイトを安全に直せるとは限りません。実務では、カスケード、継承、ボックスモデル、レイアウト、レスポンシブ対応、既存デザインルールを読みながら変更します。
法人研修では、見た目を作るだけでなく、既存を壊さず、スマートフォンでも確認し、再利用できるCSSを書くことを到達点にします。
対象業務で必要な深さを決める
CMSの軽微更新、LP制作、WebアプリUIでは必要な能力が異なります。
マーケ担当には既存Classと安全な修正、フロントエンド候補には設計・コンポーネント・保守まで必要です。
基礎1｜カスケード・継承・優先順位
CSSが『効かない』原因を理解するため、セレクタ、詳細度、継承、読み込み順を扱います。
場当たり的に!importantを増やさず、原因を調べる練習をします。
基礎2｜ボックスモデルとレイアウト
幅、高さ、内側の余白、外側の余白、枠線、表示方式、Flexbox、Gridを使い、画面を組み立てます。
プロパティ単体ではなく、実際のSection・カード・フォームで練習します。
基礎3｜レスポンシブ対応と実ブラウザ確認
パソコンを縮めるだけでなく、情報の順序、Tap領域、文字、画像、横スクロールを確認します。
375pxなど代表Viewportで実際に表示し、コードではなくRenderをTruthにします。
既存デザインルールを読む
色、文字組み、余白、角丸、ボタン、カードのトークンを確認し、独自値を増やさないようにします。
AIへコードを生成させる場合も、デザインルールと既存コンポーネントを先に渡します。
アクセシビリティと状態を扱う
コントラスト、フォーカス、マウスを重ねた状態、押下中、操作不可、色以外の状態表現、44px程度の操作領域などを確認します。
見た目の完成度と操作可能性を同時に評価します。
最終課題
既存LPの一Sectionを再現→スマートフォン対応→デザイントークンへ置換→レビュー指摘を修正→前後比較を説明。
ゼロから派手なページを作るより、既存ルール内での変更能力を見ます。
CSS研修は、見た目を作る力から既存を守る力へ
法人向けCSS研修では、カスケード、レイアウト、レスポンシブ対応、デザインルール、アクセシビリティを実画面で学びます。
CodeNestの現行コースにはCSSの学習領域が公開されています。自社環境に合わせ、最終課題を既存サイトの安全な改善へつなげてください。
CSS研修をWeb制作・運用へ接続する
学ぶ技術を決める前に、実務で作る成果物とレビュー基準を整理すると、研修内容がぶれません。Hatch ITでは法人向け技術研修の設計相談を受け付けています。