HTML/CSS研修 【webページの作り方や関連するスキルを習得する】

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

CSSフレームワークやSassを理解し、活用できるようになる

本研修の対象

エンジニア 非エンジニア

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

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

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

HTML/CSS研修の概要

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

HTML/CSS研修で扱う内容

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

HTML/CSS研修とは

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

一社研修  自由度が高い一社で実施する研修
公開講座  日程が決まった参加型研修

HTML/CSS研修

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

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

リスキル研修の特徴

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

企業様のニーズに合わせたカリキュラムをご用意

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

基礎から学習し、実践でスキルを試す

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

研修開催形式の選択が可能

リスキルのHTML/CSS研修では、対面(集合研修)・オンライン・対面とオンライン同時のハイブリッド式からお選びいただくことができます。テーマによって対面で行った方が良いなど、おすすめの研修実施形式をご提案可能です。お気軽にお問合せください。

研修カリキュラムの例

次のカリキュラムは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研修をオンラインで開催・受講することは可能ですか?

はい、可能です。リスキルのHTML/CSS研修は、対面・オンライン・対面とオンライン同時のハイブリッド式からお選びいただくことができます。受講生である社員の方の状況にあわせてご選択ください。その他、講習実施に関する疑問点があれば、お気軽にお問合せください。

セミナー形式など、短時間でHTML/CSS研修を開催することは可能ですか?

セミナー形式での実施は難しい状況です。リスキルでは、1日以上のものからご用意しております。一度弊社担当者とご相談しながら、研修時間や扱う内容・押さえてほしいポイントなどについて組み立てていければと思います。(受講させる社員のレベル感に合わせた内容にすることも可能)ぜひお問い合わせください。

企業に講師を派遣して研修を開催することはできますか?

はい、講師派遣型での開催可能です。研修形式にもよりますが、ハイブリッドか対面での集合型研修方法をご選択の場合、基本的に講師を派遣し実施する形となります。企業内以外の貸し会議室や法人様が持つ研修センターなどでの実施も可能です(貸し会議室のご用意は企業様側にお願いいております)

リスキルのHTML/CSS研修では、事前・事後の課題提出はありますか?

いいえ、ございません。リスキルのHTML/CSS研修では事前の課題提出や、事後の感想・レポート・報告書の提出などはございません。受講いただく研修時間内で完結します。なお、研修終了後3~5分で終わるアンケートについては実施いたします。

研修費用を知りたい・見積りを取りたいのですが、どうすれば良いですか?

研修開催に関するお見積りは各研修ページより請求できます。簡単な情報だけ入力いただければ、メールアドレス宛にすぐに届くため、手軽に利用できます。 なお、研修時間や日程を増やした場合の費用感や短くした場合の価格については個別にお問い合わせください。

よくあるご質問の一覧>

豊富な研修実績

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

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

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

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

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

TOPへ

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

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

お電話はこちら

0120-299-194

0120-299-194

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