JavaScript講座JavaScript講座

西畑一馬のレスポンシブWebデザイン入門講座

講座レベル3

最近のwebサイト制作ではPC環境のみではなくスマホやタブレットといったマルチデバイス環境に対応することが非常に求められており、そこで注目されているのが「レスポンシブwebデザイン」です。レスポンシブwebデザインではデバイスごとにHTMLやCSSを切り替えるのではなく画面サイズ毎に様々なデバイスに対応が可能になっています。

西畑一馬

本講座では、HTMLとCSSの知識がある方を対象に、「レスポンシブwebデザイン」について学んでいただきます。

制作環境の構築からviewportなどのスマートフォン・タブレットの対応方法、CSS3やJavaScriptライブラリを利用したマルチデバイスに対応したサイト構築、低回線向けのパフォーマンス・チューニングなど、今のweb制作に必要な内容を学ぶことができます。

＊Android端末、iPhone/iPadなどスマートフォンをお持ちの方は、ご確認用にご持参されることをおすすめします。

修了目標

本講座の受講修了時に、以下のスキル習得を目指します。

  • スマートフォン・タブレットなどのマルチデバイスに対応したサイト構築
  • CSS3/HTML5を利用した最新のwebサイト構築テクニック
  • 表示速度・パフォーマンスを意識したサイト構築

カリキュラム概要

  1. レスポンシブwebデザインの基本
    • レスポンシブwebデザインとは？
    • 対応OSの選定と検証方法
    • viewportとCSS解像度の関係
    • スマートフォンで利用できるmeta要素
    • Media Queries（メディアクエリー）
    • Fluid Image（フルードイメージ）
    • Flexible Layout（フレキシブルレイアウト)
  2. CSSテクニック
    • displayプロパティによる位置表示の調整
    • before/after疑似要素を使った装飾
    • gradientプロパティによる装飾
  3. JavaScriptテクニック
    • レスポンシブに対応したモーダルウィンドウ
    • カルーセルUIの導入
    • ナビゲーションUIの導入
    • PC状態を見るUIの導入
    • レスポンシブテーブル
  4. パフォーマンスチューニング
    • 画像の最適化
    • リクエストの最適化
    • ファイルサイズの最適化
西畑一馬

＊カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。

使用アプリケーション
Google Chrome、Atom
講師
西畑一馬
定員
6名
対象
XHTML、CSSを理解して書けるマークアップエンジニア、ウェブデザイナー
CSSで段組レイアウトができる方
「 千貫りこのHTML/CSS中級講座 」の履修相当の理解がある方
本ページ下の 受講対象レベルチェック問題 を理解できる方
会場
ロクナナワークショップ
東京都渋谷区神宮前1-1-12 原宿ニュースカイハイツ 204号室
JR山手線「原宿駅」・東京メトロ副都心線「北参道駅」から徒歩7分

受講料

29,800円（税込み）

受講料には、テキストやノートPCの使用料金などを含んでおります。入会金などは一切必要ありません。

最大30%OFFまでの割引あります

  • 早割30
  • 早割10
  • 遠方割
  • 学割
  • 主婦割
詳しくはこちら

開講日・お申し込み

2017年07月13日（木）11:00～18:00残り4席

お申し込み：2017年07月13日（木）

受講希望の方は 受講規約 および よくある質問 のページを閲覧していただき、ご了承の後にお申し込みフォームからお申し込みください。また お申し込みの流れ もご参照ください。

受講対象レベルチェック問題

全問正解が受講の必須条件ではなく、受講対象レベルの具体的な目安とお考えください。

問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とピクセルの関係などもよく理解できました。講座内容以外にも、さまざまな質問に答えていただき、ありがとうございました。

一般企業勤務 正社員

基礎的な内容から実践的な内容まで網羅されており、知識があまりない状態からのレスポンシブデザインへの理解の飛躍がすばらしいと感じました。細かい質問にまで丁寧に解説をしていただけ、とても勉強になりました。

一般企業勤務 正社員

基礎的な事例が多く、様々な場面の想定ができたことは非常にプラスになりました。一方で、実際のサイト制作に落とし込んだ時に自分がどこまで出来るかに少し不安が残りますので、サンプルサイトを自分で設計して構築する、という部分を今後行いたいと思います。

その他 正社員

  • Twitter
  • Instagram
  • Facebook