講座概要

このトレーニングでは、HTMLとCSSの書き方と文法を理解し、実際に複数ページで構成されたWebサイトを作りながら、Webサイトが出来上がる一連のプロセスを学習します。

Webページのレイアウトは、div要素とCSSのfloatを使用したレイアウト方法から、CSS3.0でのレスポンシブWebデザイン（可変幅ページ）に対応するdisplayを使用したレイアウト、HTMLメールなどで使用するテーブルレイアウトなどがありますが、このトレーニングでは、それぞれがどのように異なるかを学習した後、主にdiv要素とCSSのfloatを使用したレイアウト方法を学習しながら、タグの使い方やCSSのセレクタ、プロパティなどの意味や用法を学習していきます。

Adobe製品と連携してWebサイトを作成していく場合、XDやPhotoshopなどを使ってWebページのプロトタイプや素材を作成し、Dreamweaverなどのビジュアルエディタで完成品に作り上げていく、というプロセスもありますが、これらのアプリケーションの根底で動いているものは、HTMLとCSSになるため、アプリケーション操作のみでWebサイトを作成されても、根本となるソースの理解が無いと、Webページ上に不具合等が発生した場合に、アプリケーションでのオペレーションミスなのか、ソースに誤りがあるのか、などの判断がつかなくなります。

また、WordPressなどのCMSやASPなどを使用し、ソースをまったく意識せずにWebページが出来上がる仕組みが当たり前になっている今、ブログなども記事を投稿するだけで簡単にページが出来上がってしまいますが、必要な個所に修正を加えてカスタマイズする場合や、また実際の制作現場では、HTML・CSSを直接記述して修正することが多いのが現状です。そのため、CMSやASPなどのサービスの理解や、アプリケーションの使い方と並行して、HTML・CSS等のソースの知識・理解はどうしても必要になります。

このトレーニングでは、各要素の使い方と文法を学習し、複数ページのWebサイトを作成するプロセスを踏むことで、自分自身で作成したページだけではなく、他のWebサイトのHTML・XHTML・CSSが読めるようになり、以降は自分で調べて学習を継続していける力を身につけることを目的としています。

このトレーニングの受講後は、JavaScriptやHTML5・CSS3の基礎知識、jQuaryなどの学習ステップを踏んでいくと、よりWebサイト制作に必要な理解が深まるでしょう。

  • JavaScriptの基礎知識
  • HTML5・CSS3の基礎知識
  • jQuery・jQuery Mobileの基礎知識

期待される効果

  • タグになれていない方も、よく使うタグを効率的に覚えることができます。
  • CSSの基本からレイアウトするための基礎知識を習得することができます。
  • floatによるレイアウト、CSS3でのレイアウトなどのレイアウトの違いが理解できるようになります。
  • アプリケーションに依存しない、Webサイトを作成するための基礎力をつけることができます。

受講対象者

  • Dreamweaverなどのアプリケーションスキル以外に、コードも読めるようになりたい方
  • HTML・XHTMLのタグをきちんと理解したい方
  • CSSレイアウトをマスターしたい方
  • デスクトップ上の、以下の操作が「円滑」に行える方
    トレーニングでは、HTMLやCSSソースの入力作業が多く含まれるため、特に文字入力にあまり自信の無い方や、コピーペースト、デスクトップ上でのファイルの複製等の操作に不慣れな方は、これらの操作に十分慣れてからご受講いただけますようお願いいたします。

    ・テキスト入力（和文・欧文・英数・記号などの入力）
    ・かなと英数の切り替え
    ・ファイルを開く・閉じる
    ・ファイル名、フォルダ名の変更
    ・ファイルやフォルダの階層移動
    ・文字のコピーペースト
    ・フォルダ間やデスクトップへのファイルのコピー・複製
    ・アプリケーションの最小化・最大化等に関する操作
    ・ドラッグアンドドロップなどの操作

受講者へのメッセージ

初めてWebサイトを作る方は、HTMLやXHTML、CSS等は言葉ではわかっていても、実際にタグそのものの意味や使い方が曖昧な方もいらっしゃるかと思います。このトレーニングでは、言語レベルで（X）HTMLを習得し、アプリケーションに依存せずに、コードの記述ができるようになり、必要なときに必要なコードを調べられる力がつくようになるトレーニングです。Webサイト制作の最初の一歩としてご受講ください。

講師紹介

伊藤　和博

株式会社デジタルスケープ
キャリア開発グループ・トレーニングディレクター

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

開催日時

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

会場

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

カリキュラム

    （X）HTML
    • （X）HTMLとは何か
    • （X）HTMLの記述方法
    • URLについて
    • （X）HTMLファイル注意事項
    • Webサイト 作成の概要
    • （X）HTML基本構造
    • （X）HTML基本構造の記述
    • カラーついて
    • 見出しと見出しタグ
    • 表示位置の調整
    • 文字修飾 （サイズ・カラー・指定）
    • 文書整形 （段落・改行）
    • 箇条書き（リスト）
    • ディレクトリ指定に関して
    • 絶対パス指定 と相対パス指定
    • ローカルサイトの作成
    • 画像（表示・回り込み・マージン）
    • 代替テキスト
    • 表組
    • リンク
    CSS
    • CSSの書き方（直接記述と外部ファイル）
    • フォントの設定
    • 背景画像の挿入と繰り返し
    • ボックス（ボーダー・余白の設定）
    • クラス名
    • SPAN
    CSSデザイン
    • 背景色
    • リストのデザイン
    • 回り込みと解除
    • div（グループ化・段組・フッター）
    • リンクテキストの装飾
    • 表の装飾
    他

    テキスト

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

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

    • 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レンタル無）

    受講者の声

    ニックネーム内容評価日付
    Y.K

    何でこうなるかの理由がとても丁寧で分かりやすかったです。特に言葉だけはなく、ボードや映像など使用しての説明があり、飽きないようにしてくれている所が印象的でした。
    また、自分が手こずってしましった所に対しても、答えを教えるのではなくヒントで導いてくれるなど自分自身の成長などにも気を遣ってくれている所がとても良かったと感じたからです。    		☆☆☆☆☆2022/4/6
    Y.S訓練校ではHTML４やCSS２について簡易的にしか学んでいなかったが、今回の講義を受講する事で、HTML５への繋がりや良し悪しがしっかりと区別できるようになったと思う。今後の講義でHTML５を受講した際の、解説が非常に楽しみ。☆☆☆☆2022/4/6
    N.I訓練校で組み込まれていなかった内容で、学ぶことができて大変によかったです。受講したてで、まだ整理はできていませんが、いただいたテキストを用いてしっかり復習したいと思います。☆☆☆☆☆2022/4/6
    R.AHTMLやCSSは過去実務で経験していたが、そのおさらいや新しい発見もでき、とても有意義な講義だった。☆☆☆☆☆2022/4/6
    S.M独学で自分なりの解釈で勉強を進めてしまっていたところもあったので、改めて知識を積み上げることができました。
    中でも、本だけだと揃わない「WEB HP」開発の一連の流れや、事前予備知識を知れたことが本当に良かったです。    		☆☆☆☆☆2022/4/6
    K.T職業訓練、独学で勉強していた範囲で押さえ切れていなかった、実際の現場で使われる様式やお作法を知ることができて、「基礎知識」として抜け落ちていた部分をカバーできたと感じています。

    おそらくまだ実際の現場において必要なことは、全ては押さえ切れていないと思うので、今後のコースで気になる所があったら沢山質問をしていきます。    		☆☆☆☆☆2022/4/6
    T.Sよかった。学んでいないこともあったため満足感のある内容でした。☆☆☆☆☆2022/4/6