講座概要

このトレーニングは、HTML4.01、XHTML、CSS2.1でのマークアップを理解している方を対象に、HTML5・CSS3・外部JavaScriptを使用したPCサイト及びスマートフォン用サイトの作り方を学習するトレーニングです。HTML4と5の違いや、廃止要素や新要素、マークアップの仕方やバリデーション、CSS3での新しいセレクタやプロパティ、アニメーションやトランスフォーム、テスト環境の構築やHTML5非対応ブラウザへの対応等を学習し、スマートフォン向けのサイトとして既存サイトのスマートフォンへの最適化、ユーザーエージェントによる振り分け、デバッグ、flashコンテンツの代替表示などを学習します。
従来のマークアップを理解している方で、HTML5・CSS3の新しい部分やスマートフォンサイトの作り方を学習したい方はぜひご受講ください。

なお、このトレーニングでは、HTML5の新要素に対応したAPI（JavaScript部分）に関する詳細はご説明しておりません。JavaScriptをこれから勉強される方は、JavaScriptの基礎知識のご受講をご検討ください。また、HTML5を勉強される前に、従来のHTML4.01/XHTMLによるマークアップを勉強される方は、HTML・XHTML・CSSの基礎知識を受講されてから、この講座をご受講ください。

期待される効果

  • 新しい要素やセレクタなど従来のHTMLとの違いを理解することができます。
  • 美しいサイトの表現や軽量化など、HTML5とCSS3の利点等について理解することができます。
  • JavaScriptを理解している方は、HTML5の新要素で使用するメソッドや使用法を理解することができます。

受講対象者

  • HTML4.01、XHTML、CSS2.1でのマークアップを理解している方
  • HTML・XHTML・CSSの基礎知識を受講済みの方
  • JavaScriptの基礎知識を受講済みの方（推奨）

受講者へのメッセージ

HTML5・CSS3の登場によって、より表現力豊かなWebサイトが構築できるようになりました。ただし、単に新しくなったからといって、新しいタグやセレクタを覚えればいい、というわけではなく、HTML5は少なくとも既存のHTML4.01でのマークアップの理解があることが前提で、新しい機能の理解と使わなくなった部分の理解とその使い方に加え、JavaScriptの活用も大なり小なり理解しておく必要が出てきます。HTML5全体像は、HTML5＋CSS3＋JavaScriptの複合技術とも言えます。これからHTML5を勉強される方は、まず下準備として従来のHTML4.01やXHTMLでのマークアップの理解、JavaScriptの基礎知識を理解してからHTML5を勉強されることをお勧めします。

講師紹介

伊藤　和博

株式会社デジタルスケープ
経営企画グループ・トレーニングディレクター

講師歴29年。講座開発数200以上。
総合商社のスクールでMac/Winを使ったDTP/Webトレーニングスクールの業務全般を担当。大手PCメーカー、プリンターメーカー、化粧品メーカー、大手印刷会社、大手広告代理店、新聞社、大手玩具メーカー、大学、官公庁、団体などに向けたトレーニングなど幅広い企業の人材育成に携わる。
現在は、デジタルスケープにて一般受講者および法人を対象としたWeb、ビデオ、AdobeCCを中心としたトレーニングの企画・講師および、Webクリエイターとしての就労を目的に、求職者向けに厚生労働省管轄・求職者支援訓練の企画・講師を務める。Adobe認定エキスパート、アップルコンピュータ認定技術者、CIW JavaScript Specialist、CIW Web Design Specialist。ウェブデザイン技能士。

開催日時

平日の10:00〜17:00に開催いたしますので、お問合せフォームよりご希望の受講日をご連絡願います（土日・祝祭日、年末年始、お盆、ゴールデンウィーク等の期間、国の研修を実施している期間（要お問い合わせ）は除きます）。

会場

オンライン研修または出張トレーニングによる開催のため、ご自宅またはお勤めの社内にてご受講いただく形となります。出張トレーニングをご希望の場合には、受講人数に合わせて別途お見積もりいたしますので、お問い合わせフォームよりお問い合わせください。

カリキュラム

    はじめに
    • HTML5・CSS3の概要
    • JavaScriptとAPIについて
    HTML4/XHTMLとHTML5 / LS
    • 新機能と廃止要素
    • 構造化
    • マルチメディア機能
    • APIの追加
    HTML5 / LS
    • 宣言とheadコンテンツ
    • セクショニングとグルーピング
    • テキストの要素
    • HTML4との互換を考慮した書き方
    • バリデーション
    • 映像とオーディオ
    • テーブル
    • フォーム
    • HTML5非対応ブラウザへの対応
    CSS3
    • CSS3の新機能と追加機能
    • エフェクト関連
    • トランジション関連（アニメーション）
    • レイアウト関連（複数の背景、ボーダーイメージ、ボックスレイアウト）
    • トランスフォーム関連
    • ベンダープレフィックス
    • 属性セレクタ
    • 疑似クラス
    • Webフォント
        スマートフォン（HTML5・CSS3）
        • テスト環境の構築
        • リキッドレイアウトについて
        • 既存レイアウトをスマートフォン用に最適化する
        • 端末の判別方法
        • 省略できる書き方
        • 電話番号発信
        • アドレスバー
        • WebClipアイコンとアイコンサイズについて
        • アプリケーションキャッシュ
        • Flashコンテンツの代替表示
        • スマートフォン用のUI
        レスポンシブWebデザイン
        • 最適化と適応化
        • @media Queries
        • レスポンシブ用のCSSの書き方
        • デザインの確認
        HTML5.1、5.2、LS

        HTML5.1からの新しい要素・属性値

        HTML5.2からの新しい要素・属性値

        HTML Living Standardからの新しい要素・属性値

        他

        テキスト

        オリジナルテキストを使用。受講料に含まれているのでお得です！

        使用アプリケーション・バージョン

        • VSCode（WindowsおよびMac）（フリーウェア）
        • さくらエディタ（Windows）（フリーウェア）
        • Crescent Eve（Windows）（フリーウェア）
        • mi(Mac) （フリーウェア）
        • Google Chrome
        • Firefox
        • Safari
        • Edge

        テキストエディタは、HTML/CSSの入力に最適化されたフリーのエディタを使用いたします。普段使い慣れたエディタがある場合は、そちらでご受講いただくことができますので、お問い合わせください。

        使用端末

        MacintoshまたはWindowsにてご受講いただけます。講師はMacintoshにてトレーニングを実施いたしますが、Windowsでのキー操作も含めて解説いたしますので、Windowsでご受講の方もご安心ください。

        受講料金

        • 41,800円：一般（2日間・税込・iPadレンタル込）別途保険料＋配送料をご選択
        • 39,600円：一般（2日間・税込・iPadレンタル無）
        • 22,000円：学割（2日間・税込・iPadレンタル込）別途保険料＋配送料をご選択
        • 19,800円：学割（2日間・税込・iPadレンタル無）

        受講者の声

        ニックネーム内容評価日付
        H.K学校でやったことがない項目を多く学べました。
        より実践的な知識を得ることができてよかったと思います。テキストも項目ごとに詳しく記載されているので、授業後の復習で見返しても分かりやすいと思います。        		☆☆☆☆☆2021/03/15
        S.A前回受講したHTML,XHTML,CSSの講座は実際に手を動かしてサイトを構築していく事が多く、個人的にとても良かったと感じたので、
        今回のHTML5，CSS3も、もう少し自分でコードを書く時間があると良いな、と感じました。        		☆☆☆☆2021/03/15
        M.S曖昧だった基礎知識や、あまり使ってこなかったタグを自身で把握することができました。今後重点をおいて勉強すべき点がなんとなくわかってよかったです。テキストもコメントアウトで説明が記述してあるのでわかりやすかったです。☆☆☆☆☆2021/01/27
        Y.T毎回解説と実際に練習をする時間を設けてくださるので、とてもわかりやすいと思いました。テキストも読むとわかりやすく説明が書いてあるので後で読み返しても勉強になります。☆☆☆☆☆2020/12/24
        M.Oボリュームの多い回でしたが、当社の現状のHPもご覧いただきながら丁寧にご指導いただきましたので帰ってからよく復習したいと思います。☆☆☆☆☆2019/06/17
        S.T実務で使用していたタグの認識やHTML5の実際の構築が理解できました。テキストは文字だけでなく図も記載されており、とても見やすかったです。☆☆☆☆☆2019/05/27
        N.T本やWebで自分で学習しているのと違い、きちんとご説明いただけるセミナーでの受講はわかりやすく参加させていただいてよかったです。
        質問させていただいて解決できたこともあり、大変勉強になりました。教材は内容が凝縮されているように感じました。        		☆☆☆☆☆2017/08/15
        O.S講座はわからないところを、的確に教えて頂けたので、わかり易かったです。テキストは実践例がちゃんと載っている部分が、まぁわかりやすかったです。☆☆☆☆2016/09/28
        N.K受講して、もやもやしていた不明点が明確になって理屈で解釈できるようになった。ソースを見るポイントが明確になった。テキストは、説明文とコードの記述、具体的なケースと比較やサイズの明記が大変わかりやすかった。☆☆☆☆☆2016/07/27
        M.A受けたかった科目なので受けて良かったです。一般の本では通用しない世界と認識しました。受講できたことに感謝です。☆☆☆☆☆2016/02/26
        M.THTML5の概要を理解することができ、たいへんよかった。まずはHTML4をしっかり身につけた上で、今日の講義内容を生かしていきたい。
        テキストは、いつもながら、復習に役立ち、なおかつ復習後も資料として活用できる点がよい。        		☆☆☆☆☆2015/12/21
        I.A丁寧でわかりやすかった
        テキストは詳細が記載されていてわかりやすい        		☆☆☆☆☆2015/12/21
        M.Kとてもわかりやすかったです。☆☆☆☆☆2015/09/28
        M.S相変わらず手厚く教えて頂き、分かりやすかったです。ソースとサイトを見比べながらじっくり学べました。
        テキストは分厚いけど、ポイントをおさえて説明して頂いたので理解しやすかったです。        		☆☆☆☆☆2015/09/28
        O.M説明がゆっくりで丁寧だったのでわかりやすくすぐに理解する事が出来た。
        テキストは項目ごとに区切ってあったので見やすかった。ページに余白があるのでメモが書きやすかった。        		☆☆☆☆☆2015/07/29
        S.MHTML4とHTML５、CSS２とCSS３の違いを分かりやすく簡潔にご説明いただき、大変ためになりました。トレーニングのテンポも丁度良く、たまにつまづいてしまった際も、優しくサポートしていただきました。
        弊社ではまだHTML５もCSS３のどちらの対応も追いついていない状態なので、トレーニングしたことを持ち帰り、早く業務でも使えるよう引き続き勉強したいと思います。
        テキストはポイントごとにまとまりがあり、トレーニング中に開くファイルも記載しており、スムーズに進める事ができました。
        適度な余白も自分でメモする欄にでき、必要な情報をそのページを見れば分かるようにまとめる事ができました。行番号が入っている点も、テキストを読まれる際にどの行を説明しているのか分かりやすく、とても助かりました。        		☆☆☆☆☆2015/07/29