HTML/CSS研修 【基本的なWebページの作り方を学ぶ】

レスポンシブデザインを実現するための研修です。CSSフレームワークや、メンテナンス性や視認性が高いSassについて学ぶことで、Webサイト開発を容易にします。

CSSフレームワークやSassについて学ぶ

本研修の対象

エンジニア 非エンジニア

  • HTMLの基礎的な知識を身に付け、さらに細かくWebサイトをデザインしてみたい方
  • ホームページを作るための基礎的知識を身に付けたい方
  • CSSを使って様々なスタイルやデザイン、レイアウトの仕組みを学びたい方

こんなお悩みや課題をお持ちの方へ

研修に対する課題
  • ホームページを作成したいが、何から手を付ければよいのかわからない
  • webアプリケーションの基本的な仕組みを学んでほしい
  • HTML/CSSを使用して基礎的なウェブページを作成できるようになってほしい
  • ホームページの修正などを行えるような基礎的な知識を身に付けてほしい

HTML/CSS研修の概要

HTML/CSS研修とは、ホームページを作成するための基本であるHTMLとCSSの基礎を学び、スマホ時代のWebデザインの必須機能であるレスポンシブデザインを実現するための研修です。

HTML/CSS研修とは

CSSフレームワークの習得や、メンテナンス性や視認性が高いSassについて学ぶことで、より簡易的にWebサイトの開発が可能になることを目的としています。

HTML/CSS研修のラインナップ

HTML/CSS研修

レスポンシブデザインを実現するための研修です。CSSフレームワークや、メンテナンス性や視認性が高いSassについて学ぶことで、Webサイト開発を容易にします。

研修タイトル想定研修時間
HTML/CSS研修 公開講座 プログラミング入門研修 3日間
HTML/CSS研修 一社研修 CSS設計・Sass研修【コンポーネント設計を身につける】 6時間 (変更可)
HTML/CSS研修 一社研修 CSSフレームワーク研修 Bootstrap開発入門【効率のよいWebデザインを学ぶ】 7時間 (変更可)
HTML/CSS研修 一社研修 プログラミング入門研修【3日でわかる】 3日間 (変更可)

リスキル研修の特徴

リスキルのHTML/CSS研修には次のような特徴があります。

様々な状況に対応

Webサイト開発のフレームワークとして特に代表的なBootstrapによるデザインワークや、より効率的にCSSを記述できるSaasなど、開発の際に必ず遭遇する技術について、それぞれ学習できるカリキュラムが用意されています。

実践のための学習を

演習も豊富に行い、ただやり方をなぞって暗記するばかりではなく、自ら考える時間が多い研修となっています。CSSの構造について理解を深めることで、Webサイト開発者としての力を伸ばします。

見積りを10秒作成 お問い合わせはこちら 研修資料を請求する

研修カリキュラムの例

次のカリキュラムはHTML/CSS研修に属するCSS設計・Sass研修【コンポーネント設計を身につける】のカリキュラムです。研修の流れの例としてご参考ください。

  1. 01CSS設計の問題点とその対処

    ゴール

    CSS設計で何が問題となるのか、それにどう対処するのかを学ぶ

    • CSSの基本
    • CSSの問題点
    • CSSの破綻例
    • CSSセレクタの基本
    • セレクタの正しい使い方
    • ワーク:「このコードのどこが問題か」(例示されたコードの問題点を考える)
  2. 02コンポーネント設計の重要性と注意点

    ゴール

    CSSの問題点を解消するコンポーネント設計の考え方を学ぶ

    • コンポーネントとは
    • コンポーネント設計の利点
    • コンポーネント設計の様々なアイデア(OOCSS、SMACSS、BEM、MCSS)
    • Rule of three (早まった最適化はしない)
    • 開放/閉鎖の原則
    • 過剰な再利用はしない
    • 単一責任の原則
  3. 03Sassの基本

    ゴール

    Sassの記法を学ぶ

    • 変数、@mixins
    • ネスティング
    • 部分テンプレート、@import
    • Extend
    • 演算
    • ワーク:「CSSをSassで書き換える」(用意されたCSSコードをSassで書き直すことでSassの記法と利便性を学ぶ)
  4. 04Sassでコンポーネント設計

    ゴール

    代表的なコンポーネント設計をSassで実現

    • OOCSS、SMACSS、BEM、MCSSそれぞれの設計をSassで実現することで学ぶ
    • ワーク:「それぞれの設計手法にそって開発」
    • (それぞれの設計手法に基づいた課題を与え、Sassを使って開発)
  5. LASTwebpackを学ぶ

    ゴール

    モジュールバンドラを学ぶ

    • モジュールバンドラを学ぶ
    • webpackとは
    • webpackの様々な機能
    • ワーク:「webpackを使ってみる」(作ったSassファイルを使ってwebpackの機能を学ぶ)

HTML/CSS研修に関するよくあるご質問

HTMLやCSSをほとんど触った事がない人が参加しても大丈夫でしょうか?

はい。プログラミング初心者へはホームページを作成しながら基礎文法を学ぶコースを用意しているため、初心者もご安心して参加いただけます。

ホームページの更新や動きのあるコンテンツの追加が出来るようになりたいのですが、研修で教えていただくことは可能でしょうか?

はい。リスキルでは会社の悩みに合わせた独自の研修を行っているため、研修後すぐに「ホームページの更新や修正を出来るようになった」というお言葉も多数いただいております。

よくあるご質問の一覧>

豊富な研修実績

リスキルのHTML/CSS研修は非常に多くの企業様よりお問い合わせをいただいております。

実際に研修を受講された方からは、まだWeb開発について初心者だったが問題なく受講できた、初歩的すぎてなかなか人に訊きづらかった内容が研修なので安心して質問が出来た、などご意見を頂いております。

リスキルの研修は様々な企業様にご利用いただいています

研修実績 導入事例を見てみる

お見積もり、お問い合わせはこちらから

見積りを10秒作成

TOPへ

研修のお問い合わせはこちら

リスキルの社員研修に関する
お見積り、お問い合わせはこちらから

お電話はこちら

0120-299-194

0120-299-194

電話受付:月〜金 9:00-19:00(土日祝も研修実施)