このトレーニングでは、HTMLとCSSの書き方と文法を理解し、実際に複数ページのWebサイトを作りながら、Webサイトが出来上がるプロセス全般を学習します。
Webページのレイアウトは、大きく分けてテーブルレイアウトという方法と、div要素とCSSのfloatを使用したレイアウト方法、CSS3.0での可変幅ページに対応するdisplayを使用したレイアウトなどがありますが、このトレーニングでは、それぞれがどのように異なるかを学習した後、主にdiv要素とCSSのfloatを使用したレイアウト方法を学習しながら、タグの使い方やCSSのセレクタ、プロパティなどの意味や用法を学習していきます。
Adobe製品を使用してWebサイトを作成していく場合、Edge、Muse、Fireworks、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サイト制作に必要な理解が深まるでしょう。
- タグになれていない方も、よく使うタグを効率的に覚えることができます。
- CSSの基本からレイアウトするための基礎知識を習得することができます。
- テーブルレイアウト、floatによるレイアウト、CSS3でのレイアウトなどのレイアウトの違いが理解できるようになります。
- アプリケーションに依存しない、Webサイトを作成するための基礎力をつけることができます。
- Dreamweaverなどのアプリケーションスキル以外に、コードも読めるようになりたい方
- HTML・XHTMLのタグをきちんと理解したい方
- CSSレイアウトをマスターしたい方
- デスクトップ上の、以下の操作が「円滑」に行える方
トレーニングでは、HTMLやCSSソースの入力作業が多く含まれるため、特に文字入力にあまり自信の無い方や、コピーペースト、デスクトップ上でのファイルの複製等の操作に不慣れな方は、これらの操作に十分慣れてからご受講いただけますようお願いいたします。
・テキスト入力（和文・欧文・英数・記号などの入力）
・かなと英数の切り替え
・ファイルを開く・閉じる
・ファイル名、フォルダ名の変更
・ファイルやフォルダの階層移動
・文字のコピーペースト
・フォルダ間やデスクトップへのファイルのコピー・複製
・アプリケーションの最小化・最大化等に関する操作
・ドラッグアンドドロップなどの操作
アプリケーションを使ったWebサイト制作になれている方や、初めてWebサイトを作る方は、HTMLやXHTML、CSS等は言葉ではわかっていても、実際にタグそのものの意味や使い方が曖昧な方もいらっしゃるかと思います。このトレーニングでは、言語レベルで（X）HTMLを習得し、アプリケーションに依存せずに、コードの記述ができるようになり、必要なときに必要なコードを調べられる力がつくようになるトレーニングです。Webサイト制作の最初の一歩としてご受講ください。
伊藤 和博
株式会社イマジカデジタルスケープ
トレーニンググループ・トレーニングディレクター
講師歴20年。講座開発数100以上。
総合商社のスクールでMac/Winを使ったDTP/Webトレーニングスクールの業務全般を担当。大手PCメーカー、プリンターメーカー、化粧品メーカー、大手印刷会社、大手広告代理店、新聞社、大手玩具メーカー、大学、官公庁、団体などに向けたト レーニングなど幅広い企業の人材育成に携わる。
現在は、イマジカデジタルスケープにてAdobeCCを中心としたトレーニングの企画、講師を務める。Adobe認定エキスパート、JAGAT認定DTP エキスパート、アップルコンピュータ認定技術者、CIW JavaScript Specialist、CIW Web Design Specialist。
| 開催日 |
時間 |
| 2020年2月12日（水） |
10：00〜17：00 |
イマジカデジタルスケープ・トレーニングルーム
住所：東京都渋谷区道玄坂1-10-8 渋谷道玄坂東急ビル8F （JR「渋谷」駅西口より徒歩5分、国道246号沿い）
[ MAP ]
（X）HTML
- （X）HTMLとは何か
- （X）HTMLの記述方法
- URLについて
- （X）HTMLファイル注意事項
- Webサイト 作成の概要
- （X）HTML基本構造
- （X）HTML基本構造の記述
- カラーついて
- 見出しと見出しタグ
- 表示位置の調整
- 文字修飾 （サイズ・カラー・指定）
- 文書整形 （段落・改行）
- 箇条書き（リスト）
- ディレクトリ指定に関して
- 絶対パス指定 と相対パス指定
- ローカルサイトの作成
- 画像（表示・回り込み・マージン）
- 代替テキスト
- 表組
- リンク
CSS
- CSSの書き方（直接記述と外部ファイル）
- フォントの設定
- 背景画像の挿入と繰り返し
- ボックス（ボーダー・余白の設定）
- クラス名
- SPAN
CSSデザイン
- 背景色
- リストのデザイン
- 回り込みと解除
- div（グループ化・段組・フッター）
- リンクテキストの装飾
- 表の装飾
他
オリジナルテキストを使用。受講料に含まれているのでお得です！
- 受講票（プリントアウト環境が無い場合には、携帯・スマートフォン等への画面コピーでも可）
- 筆記用具
※データの持ち帰り、データの持ち込みはできません。
- Crescent Eve（Windows）
- mi・テキストエディット(Mac)
- Google Chrome
- Firefox
- Safari
- Internet Exploer
- Adobe Dreamweaver
