JavaScript講座西畑一馬 のレスポンシブWebデザイン入門講座
最近のwebサイト制作ではPC環境のみではなくスマホやタブレットといったマルチデバイス環境に対応することが非常に求められており、そこで注目されているのが「レスポンシブwebデザイン」です。レスポンシブwebデザインではデバイスごとにHTMLやCSSを切り替えるのではなく画面サイズ毎に様々なデバイスに対応が可能になっています。
本講座では、HTMLとCSSの知識がある方を対象に、「レスポンシブwebデザイン」について学んでいただきます。
制作環境の構築からviewportなどのスマートフォン・タブレットの対応方法、CSS3やJavaScriptライブラリを利用したマルチデバイスに対応したサイト構築、低回線向けのパフォーマンス・チューニングなど、今のweb制作に必要な内容を学ぶことができます。
＊Android端末、iPhone/iPadなどスマートフォンをお持ちの方は、ご確認用にご持参されることをおすすめします。
修了目標
本講座の受講修了時に、以下のスキル習得を目指します。
- スマートフォン・タブレットなどのマルチデバイスに対応したサイト構築
- CSS3/HTML5を利用した最新のwebサイト構築テクニック
- 表示速度・パフォーマンスを意識したサイト構築
カリキュラム概要
- レスポンシブwebデザインの基本
- レスポンシブwebデザインとは？
- 対応OSの選定と検証方法
- viewportとCSS解像度の関係
- スマートフォンで利用できるmeta要素
- Media Queries（メディアクエリー）
- Fluid Image（フルードイメージ）
- Flexible Layout（フレキシブルレイアウト)
- CSSテクニック
- displayプロパティによる位置表示の調整
- before/after疑似要素を使った装飾
- gradientプロパティによる装飾
- JavaScriptテクニック
- レスポンシブに対応したモーダルウィンドウ
- カルーセルUIの導入
- ナビゲーションUIの導入
- PC状態を見るUIの導入
- レスポンシブテーブル
- パフォーマンスチューニング
- 画像の最適化
- リクエストの最適化
- ファイルサイズの最適化
＊カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。
- 使用OS
- Windows 7 (64bit)
※普段使用しているOSと異なっている場合でも講座内容の習得に大きく影響はありません。
PCの持ち込みも可能です。講座内で使用するソフトウェアの設定、環境構築をしておくようお願いします。
- 使用アプリケーション
- Google Chrome、Atom
- 講師
- 西畑一馬
- 定員
- 6名
- 対象
- XHTML、CSSを理解して書けるマークアップエンジニア、ウェブデザイナー
CSSで段組レイアウトができる方
「 千貫りこのHTML/CSS中級講座 」の履修相当の理解がある方
本ページ下の 受講対象レベルチェック問題 を理解できる方 - 会場
- ロクナナワークショップ
東京都渋谷区神宮前1-1-12 原宿ニュースカイハイツ 204号室
JR山手線「原宿駅」・東京メトロ副都心線「北参道駅」から徒歩7分
受講料
29,800円（税込み）
受講料には、テキストやノートPCの使用料金などを含んでおります。入会金などは一切必要ありません。
開講日・お申し込み
この講座には現在募集日程がありません。次回開講日程は 67WSカレンダー共有 などでご確認ください。また、企業研修などで開講をご希望の場合はお気軽に ご相談 ください。
受講希望の方は 受講規約 および よくある質問 のページを閲覧していただき、ご了承の後にお申し込みフォームからお申し込みください。また お申し込みの流れ もご参照ください。
受講対象レベルチェック問題
全問正解が受講の必須条件ではなく、受講対象レベルの具体的な目安とお考えください。
問1： 次のタグを赤色で表示するCSSを答えてください。
<p class="sp">スマートフォン</p>問2： 次のHTMLの間違いを答えてください。
<p>lesson<a href="index.html>1</p></a>問3： p要素に対してセレクタの優先度が高い準に並べてください。
(1) #container .content p { color: red; }
(2) p { color: red; }
(3) div#container div.content p { color: red; }
(4) .content p { color: red; }答1：
p.sp{
color:red;
}答2： href属性の"（ダブルクオーテーション）がとじていない点と、a要素とp要素の閉じタグの登場順が逆になっている点。
<p>lesson<a href="index.html">1</a></p>答3： (3),(1),(4),(2)
受講者の声
レスポンシブの概要や、知らなかったCSSの適用方法なども知ることができ、業務の中で疑問に思っていた箇所などの質問にも丁寧に答えていただき、とてもためになりました。
Web制作会社勤務 正社員
今まで中途半端な知識で制作していた部分をこの機会に勉強することができて満足
Web制作会社勤務 正社員
レスポンシブWebサイトについて、これまで業務で扱ったことはありますが、知識が断片的だったので、今回包括的に学ぶことができてよかったと思います。OS・ブラウザへの対応、viewportとピクセルの関係などもよく理解できました。講座内容以外にも、さまざまな質問に答えていただき、ありがとうございました。
一般企業勤務 正社員
基礎的な内容から実践的な内容まで網羅されており、知識があまりない状態からのレスポンシブデザインへの理解の飛躍がすばらしいと感じました。細かい質問にまで丁寧に解説をしていただけ、とても勉強になりました。
一般企業勤務 正社員
基礎的な事例が多く、様々な場面の想定ができたことは非常にプラスになりました。一方で、実際のサイト制作に落とし込んだ時に自分がどこまで出来るかに少し不安が残りますので、サンプルサイトを自分で設計して構築する、という部分を今後行いたいと思います。
その他 正社員
西畑先生の語り口調からでしょうか、知識・技術だけではなく、今日の授業内容から作ってみたいサイトがいろいろ浮かんできました！ 単に今日受講しただけでなく、これを元に実際にサイトを作ってみようと思います。
Web制作会社勤務 正社員
難しいと感じたが今まで知らなかった知識を学ぶことができ、今後に活かすことができると思いました。 内容が確認ができてませんが、WEBに関する講義を受講したいです。
一般企業勤務 正社員
わたしは実務というよりも、 ・社内のデザイナーにどう教えたらいいか？ ・外注の制作会社さんと協力して作っていく上で、知識を得ておきたい という希望があったので、ちょうどよかった気がします。
一般企業勤務 正社員
CSSやレスポンシブデザインについてふんわりと理解していましたが、今回の授業でより確かな知識になりました。知らなかったことも多くとても勉強になりました。flexboxも仕様変更の多さから使用を避けていましたが、これからは積極的に使っていこうと思いました。最後の背景描画のcssは目から鱗でした。
Web制作会社勤務 正社員
レスポンシブデザインの基礎がしっかりと学べた。
Web制作会社勤務 正社員
フリーランスで仕事をしているので、不明なことを聞けない状況で作業をすすめてしまうこともあり、本日受講させていただきました。非常に丁寧にわかりやすく説明していただき受講してよかったです。
フリーランス その他
内容が盛り沢山で、講義も分かりやすかったので、とても有意義な時間を過ごせました。 今後の業務の参考にさせていただきます。
Web制作会社勤務 正社員
レスポンシブの基礎的なことをわかりやすく説明していただき、理解の助けになりました。後半のｊｓ以降は、今後登る山の高さにややへこたれましたが。。。
Web制作会社勤務 正社員
