レスポンシブWebデザインでスマートフォンに対応!実案件から学ぶCSS3使いどころ講座

公開講座についてのお知らせ

2014年3月末をもちまして「公開講座」を、終了とさせていただくこととなりました。
サービス開始よりご愛顧いただき、誠にありがとうございました。

なお今後は、「公開講座」にて培ったノウハウを盛り込みながら、同ブランドの『法人研修』につきまして、一層充実したサービスを提供してまいります。
つきましては引き続きご愛顧賜りますよう、よろしくお願い申し上げます。

概要

レスポンシブWebデザインでスマートフォンに対応!実案件から学ぶCSS3使いどころ講座

レスポンシブWebデザインでスマートフォンに対応!実案件から学ぶCSS3使いどころ講座は、入門編のここがすごい!CSS3入門講座を基に、実際のサイトをCSS3によってデザインしていく講座です。

配布資料のプレーンなHTMLからスタートして、CSSのコーディングによりデザインを完成させます。

この講座で、できること
  • PCだけでなく、スマートフォンにも無理のないデザインを考えられるようになります。(マルチデバイス対応の超基本)
  • CSS3の基本を学べます。(角丸ボックスやグラデーションから変形・セレクタ・アニメーションまで)
  • マルチデバイスを意識したHTMLとCSSの設計ができます。
  • HTML5の基本的な目的と使い道がわかります。
こんな方におすすめします
  • CSS 2.1までのコーディングをある程度行ってきた方(未経験不可)
  • スマートフォン対応を基礎中の基礎から学習したいが未経験の方

シンプルな案件例をもとに
PCとスマートフォンに対応するサイト制作

いくつかパーツごと(ヘッダ、フッタ、ナビゲーション)に分けて制作します。

  • 既存のPC 用サイトからHTML をそのままに、スマートフォン用のサイトをつくる基本的な方法を学びます。
  • シンプルで部分的につくっていくのでコードが長くならずに集中して理解しやすい状態で学べます。 単にコーディングテクニックだけでなく、ユーザ目線を考えたデザインも学習します。
  • HTML5の基本的なタグを使います。
  • スマートフォンサイトにおけるCSS3の使いどころを学習します。
  • つくったサンプルファイルは持って帰れます。
  • JavaScript は用意したものを読み込んで使っていただきます。

HTML5 やCSS3 の予備知識は不要です

本講座はCSS実践講座となります。CSSを使用したWebサイトの制作を未経験の方は、まずはAdobe Dreamweaver CS6 CSSデザイン技法 基礎講座などでスタイルシートを習得のうえ受講ください。

コースカリキュラム

レスポンシブWebデザインでスマートフォンに対応!実案件から学ぶCSS3使いどころ講座では、以下のCSS3プロパティなどを実践的に使用して、Webページを完成させます。

講座の目次
講座の目次
PDF/5.7MB
  • 環境をつくる
  • 基本コーディング
  • イントロダクション
  • ヘッダーの最適化
  • グローバルナビゲーションの最適化
  • サイドメニューの最適化
  • メインコンテンツの最適化
  • フッターの最適化
  • お問い合わせフォームの最適化
  • 商品ギャラリー等の最適化
  • タブ切り替えメニューのアレンジ
  • 長いメニューに対し、アコーディオンメニューで対応
  • その他スマートフォンサイト制作にまつわるアドバイス

CSS3の仕様やブラウザーの対応状況などにより、内容が一部変更される場合があります。

講座では操作するソフト(テキスト編集ソフト)としてAdobe Dreamweaver CS5を使用しますが、基本的な機能のみ使用しますので、他ソフトでも同等の操作は可能です。

講師

秋葉 秀樹 (あきば ひでき)
デザイナー

広告業界で20年間主にデザイナーとして従事し、グラフィックデザインから3DCGや映像制作など様々な表現手段を持つ。

現在はデザイナー向けの講演活動に加え、デジタルハリウッドやAdobe認定校にてグラフィックデザインの トレーナー活動、またWeb Designing誌や日刊デジタルクリエイターズ等への寄稿など執筆活動も行っている。

現在、マイナビ発行の「Web Designing」誌では、CSS Labにて毎月連載執筆中。

著書

  • CSS3デザイン プロフェッショナルガイド(マイナビ)
  • Facebookページ プロフェッショナルガイド(マイナビ)
  • 10倍ラクするIllustrator仕事術(技術評論社)

公演/スピーチ

  • 2011年2月 CSS Nite in OSAKA with マイクロソフトセミナー(大阪)
  • 2011年4月 UNTITLED!!!!!!!!(大阪)
  • 2011年5月 DTP Booster(東京)
  • 2011年6月 CSS3デザインプロフェッショナルガイド出版記念セミナー(東京)
  • 2011年11月 CSS Nite in OSAKA(大阪)
  • 2012年2月 まにまにカレッジ(大阪)
  • 2012年2月 CSS Nite in FUKUI(福井)

スケジュールにより講師が変更になる場合があります。あらかじめご了承ください。

FAQ

 

受講前

HTMLのことを知りませんが、受講できますか。

いいえ、CSSの基礎知識が必要ですので、申し訳ありませんがHTMLの知識がない場合は厳しいと思われます。まずはプロの使い方を学ぶ Adobe Dreamweaver CS6 入門講座で、HTMLやCSSの基礎を習得してください。

CSS3でレイアウトをしたことありませんが、受講できますか。

はい、前バージョンとなるCSS2(CSS2.1)での制作経験があれば大丈夫です。

Dreamweaverのスタイル機能を使って、コードを入力しますか。

いいえ、本講座ではコード入力画面で直接CSSを編集します。Dreamweaverはテキスト編集ソフト(エディター)の役割として使用します。

関連用語・キーワード

CSS3とは

CSS3とは、Cascading Style Sheet level 3(カスケーディングスタイルシート レベル3)の略で、ページの見た目やどのように表示するかを定めた仕様(規格)の最新バージョンです。

過去のWebページ制作では、フォントや色などの見た目もHTMLで指定していましたが、レイアウトやデザインをCSSで行うことにより文書構造(HTML、XHTML)とデザインを切り離せるため、さまざまなメリットが得られます。

CSS2(CSS 2.1)とのおもな違い

見栄えとしてわかりやすいものに「角丸にする」「グラデーション」「ドロップシャドウ」などが追加されました。いままでは画像を用意するかJavaScriptを駆使して実現していた「デザインクオリティの高いボタン」などが、CSSだけで簡単に作成できます。

また「セレクタ」と呼ばれる、「どの個所にそのスタイルを適用させるか」の方法が大幅に増え、自由度の高いデザインを実現できます。

HTML5とは

HTML5

HTML5とは、ホームページのドキュメントを記述するマークアップ言語であるHTML(Hyper Text Markup Language)の最新バージョンです。

長きにわたりバージョン4となるHTML 4.0が利用されてきましたが、大幅に新規要素・機能が実装され、HTML5としてW3C(World Wide Web Consortium:世界的なWeb標準化団体)より勧告されました。

これにより、今後のホームページ制作の主流はHTML5へ移行すると予想されます。各種ブラウザーも対応を開始し、海外サイトを中心にサイトへの導入もはじまっています。

HTML 4.0とのおもな違い

マークアップの要素が大幅に追加されました。HTML 4.0の場合、ページ制作を行ううえで適切な要素(タグ)が少なく、<div>要素で代用するケースが多く見られました。しかしHTML5では、レイアウトする際に<header>、<footer>、<nav>などの新要素を利用できるため、適切かつ理論的なマークアップを行えます。

また<canvas>、<video>、<audio>などのメディアに対する要素が新しく追加されたのも大きな特長です。API(Application Programming Interface)と呼ばれる「利用できる標準機能」も大幅に増え、ビデオやオーディオの再生、データの保存などを、面倒な処理をすることなく実行できます。

詳細

レスポンシブWebデザインでスマートフォンに対応!実案件から学ぶCSS3使いどころ講座
講座情報 講座番号 DWBC
講座名 レスポンシブWebデザインでスマートフォンに対応!
実案件から学ぶCSS3使いどころ講座
講座種別 m-School 実践
実習 パソコンを使った実習があります
カテゴリー Web制作
講座日数 日数 1日
受講時間 13:00~18:00 (12:40より受付)
総時間 5時間(1日5時間×1日間)
開催場所 会場
m-School (エムスクール)
〒101-0061 東京都千代田区三崎町1-3-12 水道橋ビル8階
m-Schoolへのアクセス・地図
PC環境 Microsoft Windows 7またはVistaを使用します(日程により環境が異なります)。Apple Macintoshをご利用の方でも、ツールの基本操作やユーザーインターフェースはWindows版とほぼ同等ですので、安心してお申し込みください。
持参物
  • 受講証(お申し込み時にメールでお送りします)
  • 筆記用具
  • USBメモリー(講座で作成したファイルをお持ち帰りになる場合)

前提条件

講座を受講するうえで、下記の知識・経験が必要になります。

前提条件
基本操作 下記のようなWindowsの一般的な操作ができる。
  • マウス操作(クリック、ダブルクリック、ドラッグ)
  • フォルダ操作(作成、名前の変更、コピー)
  • テキスト操作(入力、フォント変更、フォントサイズ変更)
プログラミングの経験 必要ありません。
デザイン制作の経験 Adobe Photoshop、Fireworks、Illustratorなどのデザインツールを、少しだけでも触ったことがある程度でOKです。
ネットワークの知識 必要ありません。
Webページ制作の経験
  • HTML4.01やXHTMLやCSS2.1の経験がある。
  • コーディングスピードがある程度速い。
実習はキーボードからの文字入力が多くなります。
講座では操作するソフト(テキスト編集ソフト)としてAdobe Dreamweaver CS6を使用しますが、基本的な機能のみ使用しますので、他ソフト(Codaなど)の経験があれば問題ありません。

おすすめ講座

受講する前・受講した後にオススメしている講座です。

受講前・受講後にオススメの講座
この講座を受講する前にオススメ HTMLやCSSの知識が不安な方は、まずはプロの使い方を学ぶ Adobe Dreamweaver CS6 入門講座で、基礎を習得してください。
CSSを使用したWebサイトの制作を未経験の方は、Adobe Dreamweaver CS6 CSSデザイン技法 基礎講座でスタイルシートを習得のうえ受講ください。
CSS3の基礎情報や、iPhoneサイトの作り方などを学んでおきたい方は、ここがすごい!CSS3入門講座がオススメです。
関連リンク

実案件から学ぶCSS3使いどころ講座

 

講座一覧へ

法人研修プランをご提案します

本講座は法人研修として随時承り中です。お話を伺い、最適のコーディネートをさせていただきます。

ご希望、ご質問等ございましたら、お気軽にお問い合わせページよりご連絡ください。

実案件から学ぶCSS3使いどころ講座
講座種別 m-School 実践
実習 パソコンを使った実習があります
カテゴリー Web制作
日数 1日
受講時間 13:00~18:00 (12:40より受付)
会場
m-School (エムスクール)
〒101-0061 東京都千代田区三崎町1-3-12 水道橋ビル8階
m-Schoolへのアクセス・地図
講座の目次
講座の目次
PDF/5.7MB

RSSフィードで
最新情報を購読