PC用のHTML・CSSは書ける方向けに、スマートフォン・タブレット・PCなど様々なデバイスで閲覧できる「レスポンシブWebデザイン」を実際に作ることで身につける講座です。
意味がよくわからないままコピペで済ませるのではなく、「レスポンシブWebデザインの意味を理解して自分で書けるようになる」事と「素早くコーディングできるようになる」事をテーマにしています。
レスポンシブWebデザインだけでなく、素早い HTML・CSS コーディングを手助けするための「Emmet」や「BEM」など、モダンなコーディングに必要な知識の習得も含む5時間×2日間（合計10時間）の講座です。
受講方法について
この講座は今後の開催予定はございませんが、ご自宅で動画受講することが可能です。
動画受講の場合、YouTube限定公開の動画と、Webブラウザーでご覧頂ける授業テキスト（教科書）をご覧頂き、ご質問があればメールにて承ります。
対象となる方
以下の条件をすべて満たしている方のみ受講できます。
- PC向けのHTML・CSSが書ける方
- ファイル操作（ファイルの移動、コピー、フォルダーの作成など）ができる方
※ JavaScriptに関する知識は不要です。
必要なもの
ノートPC（MacBookまたはWindows PC）
※ ノートPCは必須です。お持ちでない方はご参加いただけません。貸し出しもございません。
予定している内容
座学（スライド）で学ぶ内容
- 近年のスマートフォン事情
- Android対応がやりやすくなった理由
- スマートフォン対応、マルチデバイス対応にはどのような方法があるか、それぞれのメリットとデメリット
- Retina（HiDPI）ディスプレイとは、その対応方法は
- Retina対応の高解像度画像でも、ファイルサイズを大きくしない方法
- レスポンシブイメージの使いどころと、ハマりそうなところ
- コーディング時間を大幅に減らすには
- 最近増えてきている「BEM」とは何か
実習で学ぶ内容
- スマートフォンサイト制作におけるChrome開発者ツールの使い方
- HTML5やCSS3がどのWebブラウザーで使用できるか、Chromeから素早く検索できるようにする
- 「Emmet」を使用した素早いHTML・CSSコーディング、「BEM」との連携について
- iOSで勝手にフォントサイズが変更されたり電話番号にリンクされないようにする
- メインビジュアルを普通のレスポンシブイメージではなく、人物写真の顔部分がアップになるようトリミングされたレスポンシブWebデザイン対応の画像にする
- YouTubeの動画をレスポンシブ対応で埋め込む
- PCでは横に並べて、スマートフォンでは縦に並べて表示されるカラムを作る
- Retinaディスプレイでも、ピンチアウトで拡大しても荒れないベクターグラフィックのアイコンを素早く配置する
- 日本語Webフォントを使用して、Androidを含むあらゆる環境で日本語明朝体を表示させる
- jQueryライブラリを使用してハンバーガーボタンをタップするとメニューがスライドしながら出てくるようにする
- Macの「iOSシミュレーター」でiPhoneやiPadの表示確認をする、素早くスクリーンショットを撮影する
あらゆる環境で見やすいメインビジュアルの制作
メインビジュアルとして使用する画像は、1000px × 350px の小さな画像と 2000px × 700px の大きな画像があり、環境によってどちらが表示されるかが変わります。
トップページのメインビジュアルとして使用する場合、クオリティも速度も重要になるので、PCからの閲覧の場合は 2000700px の画像を表示させ、スマートフォンからの閲覧の場合は 1000350px の画像を表示させたいとします。
そのように、デバイスの幅に合わせて表示させる画像を変える機能を「レスポンシブイメージ」と呼びます。
そこで、独学する場合は「レスポンシブイメージ」でGoogle検索して、出てきた手法で作る方が多いと思います。
この画像はこの講座で制作するページのサンプル画像ですが、上の画像が一般的なレスポンシブイメージの手法で、下の画像がこの講座でお教えする手法で作られています。
一般的なレスポンシブイメージでは、<img> タグに srcset という属性を付け、複数の画像を指定することでデバイスの幅によって表示される画像を変更しています。今はスマートフォン程度の幅なので、小さな画像が表示されています。
お気づきかと思いますが、一般的なレスポンシブイメージ（上の画像）は、全体がそのまま縮小されているため、スマートフォンでは男性の顔が小さく見えています。
これではメインビジュアルとしてふさわしくありません。
それに対し、この講座でお教えする手法（下の画像）では顔の部分を中心に拡大して表示されています。この手法では、デバイスがどのような幅でも男性の顔が適切なサイズで表示されるようになっています。
この動画は、Mac版の Chrome での動作をキャプチャーしたものです。下の画像の方が、男性の顔が適切なサイズで表示されていることがお分かり頂けると思います。
ブラウザーの幅を広げてPC用の表示にしてみると、メニュー（グローバルナビゲーション）が展開されたり、丸いアイコンが縦から横2カラムに変わったことがお分かりいただけるでしょうか。
メインビジュアルは、ブラウザーの幅に応じて 1000px × 350px の画像が 2000px × 700px の画像に切り替わっています。
この講座では、PC でもスマートフォンでも見やすく効果的なWebページを「カスタマイズしやすく制作する方法」や、「独学だとハマりやすいスマートフォンサイト制作の罠」についても解説しながら実習を行います。
この講座で制作するWebページのサンプル
旅館風のWebページサンプルです。細部のデザインは変更になる場合があります。
スマートフォンで閲覧した場合のイメージ
PCで閲覧した場合のイメージ
動画
Webブラウザーの幅を変更すると、このように動作します。
スマートフォンでご覧の方は、動画左下の再生ボタンを押してご覧ください。
リード文（温かみのある建物…のテキスト部分）は、普通にコーディングすると中途半端な位置で改行されてしまいますが、このサンプルでは読みやすい位置で改行されていることがお分かり頂けると思います。
写真が3つ並び、写真の上にキャプションが表示されている箇所はPCとスマートフォンでかなりレイアウトが異なりますが、1つのHTMLで対応しています。
Googleマップも、CSSを使用してレスポンシブに対応させています。
注意点
この旅館風Webページサンプルのみ、時間の都合上HTMLがある程度出来上がっている状態からスタートする場合があります。
CSSは1から書いていきます。
スマートフォンでページ右上のハンバーガーボタン［≡］をタップすると、メニューがスライドしながら出てきます。この部分には JavaScript（jQuery）を使用しています。
使用する jQuery コードの簡単な解説は行いますが、JavaScript や jQuery について、基礎からの説明までは行わない予定です。
JavaScript や jQuery がわからない方でも受講は可能です。
受講料金
3万円（税込）
※ 受講料金は現金にて会場払いです。
※「社会人のためのWebデザインスクール」卒業生の方のみ特別価格（2万円）でご参加いただけます。
講師について
講師は、庄崎大祐（Webデザイナー）です。このブログを執筆している人です。
現役Web制作者向けの書籍 神速Photoshop [Webデザイン編] を執筆したり、CSS Nite、WordCamp などでも公演しています。
これからWebデザインを学びたい方のための社会人のためのWebデザインスクール で講師をしたり、現役Webデザイナーのための PHP徹底入門講座 や WordPressカスタマイズ講座 の講師もしています。
会場について
渋谷駅から会場までの行き方を、下記ページに写真付きで掲載しています。
Googleマップなどを見ながらだと迷う方が多いため、必ずJR渋谷駅西口から、以下のページをご覧になりながらお越しください。
よくあるご質問
領収書の発行は可能ですか？
可能です。当日受付の際お声がけいただければ、その場でお渡しします。
ご質問がある方は、以下のお申込みフォームではなく お問い合わせフォーム よりお願い致します。
お申し込み
スマートフォンサイトコーディング講座・動画受講のお申し込み
スマートフォンサイトコーディング講座へのお申込みはこちら。
授業は全10時間で、ご自宅にて動画受講となります。
