スマートフォンサイト（マルチデバイス対応サイト）制作講座

PC用のHTML・CSSは書ける方向けに、スマートフォン・タブレット・PCなど様々なデバイスで閲覧できる「レスポンシブWebデザイン」の作り方を学び、実際に作ってみることで身につける講座です。

意味がよくわからないままコピペで済ませるのではなく、「意味を理解して自分で書けるようになる」ことをテーマにしています。

jQueryライブラリを使用した「JavaScript入門」も含む、5時間×2日間（合計10時間）の講座です。

日程（全2回）

この講座は 全2回・合計10時間 あります。前半と後半は内容が異なります。

前半: 2016年7月9日（土）14:00-19:00
後半: 2016年7月16日（土）14:00-19:00

対象者

• PC向けのHTML・CSSが書ける方

※ HTML・CSSを書いたことがない方、書ける自信がない方はこちらの講座を受講する前に「社会人のためのWebデザインスクール」を受講されることを強くおすすめします。
※ JavaScriptに関する知識は不要です。

予定している内容

この講座の内容は、以下の記事で詳しく紹介しています。講座で制作するページのスクリーンショットや動作サンプルの動画もございますので、よろしければ以下の記事↓をご覧ください。

スマートフォンサイト（マルチデバイス対応サイト）制作講座を開催します | Stocker.jp / diary

座学（スライド）で学ぶ内容

• 近年のスマートフォン事情
• Android対応がやりやすくなった理由
• スマートフォン対応、マルチデバイス対応にはどのような方法があるか、それぞれのメリットとデメリット
• Retina（HiDPI）ディスプレイとは、その対応方法は
• Retina対応の高解像度画像でも、ファイルサイズを大きくしない方法
• レスポンシブイメージの使いどころと、ハマりそうなところ
• なぜスマートフォンサイトでJavaScriptが必要になるか、なぜjQueryライブラリが広く使用されているのか

実習で学ぶ内容

• スマートフォンサイト制作におけるChrome開発者ツールの使い方
• HTML5やCSS3がどのWebブラウザーで使用できるか、Chromeから素早く検索できるようにする
• iOSで勝手にフォントサイズが変更されたり電話番号にリンクされないようにする
• メインビジュアルを普通のレスポンシブイメージではなく、人物写真の顔部分がアップになるようトリミングされたレスポンシブWebデザイン対応の画像にする
• PCでは横に並べて、スマートフォンでは縦に並べて表示されるカラムを作る
• Retinaディスプレイでも、ピンチアウトで拡大しても荒れないベクターグラフィックのアイコンを素早く配置する
• jQueryライブラリを使用してハンバーガーボタンをタップするとメニューがスライドしながら出てくるようにする
• Macの「iOSシミュレーター」でiPhoneやiPadの表示確認をする、素早くスクリーンショットを撮影する

受講料金

3万円（税込）

※ 今回のみの特別価格で、次回からは値上げする予定です。
※「社会人のためのWebデザインスクール」卒業生の方のみ特別価格でご参加いただけます。

講師について

講師は、庄崎大祐（Webデザイナー）です。
これからWebデザインを学びたい方のための社会人のためのWebデザインスクール で講師をしたり、現役Webデザイナーのための PHP徹底入門講座 や WordPressカスタマイズ講座 の講師もしています。

必要なもの

• ノートPC（MacBookまたはWindows）

ノートPCは必須です。お持ちでない方はご参加いただけません。貸し出しもございません。

会場について

渋谷駅から会場までの行き方を、下記ページに写真付きで掲載しています。
Googleマップなどを見ながらだと迷う方が多いため、必ず渋谷駅南口から、以下のページをご覧になりながらお越しください。

Stocker.jp / Spaceについて

お申し込み方法

上の［申し込む］ボタンよりお申込みください。

キャンセルされる場合は、開催2日前までにこのページよりご自身でキャンセル手続きをお願いします。
主催者へのメッセージ等でのキャンセル手続きは承っておりません。