2回コース

スマートフォンサイトコーディング講座

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

  • 開催回数

    1
  • 受けた人

    1
  • 受けたい人

    10
  • 感想読む

    0

こんなことを教えます

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

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

レスポンシブWebデザインだけでなく、素早い HTML・CSS コーディングを手助けするための「Emmet」や「BEM」など、モダンなコーディングに必要な知識の習得も含む5時間×2日間(合計10時間)の講座です。

■対象となる方
この講座は「PC向けのHTML・CSSが書ける方」を対象にしています。
JavaScriptに関する知識は不要です。

■予定している内容

□座学(スライド)で学ぶ内容

・近年のスマートフォン事情
・Android対応がやりやすくなった理由
・スマートフォン対応、マルチデバイス対応にはどのような方法があるか、それぞれのメリットとデメリット
・Retina(HiDPI)ディスプレイとは、その対応方法は
・Retina対応の高解像度画像でも、ファイルサイズを大きくしない方法
・レスポンシブイメージの使いどころと、ハマりそうなところ
・コーディング時間を大幅に減らすには
・最近増えてきている「BEM」とは何か

□実習で学ぶ内容

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

この講座で制作するスマートフォンサイトのスクリーンショットや動作サンプル(動画)をブログに掲載しておりますので、よろしければご覧ください。
http://stocker.jp/diary/sp-lesson/

この講座の先生

Daisuke Shozaki

Webデザイン書を執筆しているWebデザイナー

フリーランスのWebデザイナーです。
東京の下北沢で、うさぎと一緒に暮らしています。

渋谷で「社会人のためのWebデザインスクール」を運営・講師をしています。

「プロになるためのWebデザイン入門講座」や「神速Photoshop [Webデ...

詳しいプロフィールを見る >

教えた回数13

教えた人数78

カリキュラム

  • 第1回 スマートフォンサイト制作・基礎編

    * スマートフォンサイト制作に必要な知識
    * Chrome開発者ツールの使い方
    * Retina(HiDPI)ディスプレイとは、その対応方法は
    * スマートフォンサイトコーディングの基礎

  • 第2回 スマートフォンサイト制作・実践編

    * 旅館風Webページの制作(時間の都合上、ある程度HTMLが出来上がっている状態からスタートする場合があります。CSSは1から書きます)
    * さまざまな環境で適切に表示されるメインビジュアルの制作

こんな方を対象としています

この講座は「PC向けのHTML・CSSが書ける方」を対象にしています。

※ HTML・CSSを書いたことがない方、書ける自信がない方はこちらの講座を受講する前に2017年1月下旬より開催予定の「スマートフォン時代のレスポンシブWebデザインスクール」を受講されることを強くおすすめします。
(詳しくは12月ごろ公開します)

※ JavaScriptに関する知識は不要です。

受講料の説明

全2回・合計10時間で3万円です。

受講する際は以下をお読み下さい

ノートPC(MacBookまたはWindows)をお持ちください。

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

感想 0

楽しかった!

( 0 )

勉強になった!

( 0 )

行く価値あり!

( 0 )

講座についてのご質問はコチラ

先生に問い合わせる

開催予定の日程一覧

  • 開催予定

    開催予定エリア:渋谷・恵比寿

    受講料:¥ 30,000( ¥ 15,000 ×2回 )

この講座の関連ツイート

Daisuke Shozaki さんの他の講座

Page Top