TOP

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

イベント内容

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/
参加者
定員9人
申込先
会場
Stocker.jp / Space 渋谷
東京都渋谷区桜丘町11-11 ライオンズマンション桜丘 403号室

注目のイベント

タグに関連するイベント

2018/06/12(火) 10:00 〜 17:00
東京都
2018/06/09(土) 10:00 〜 12:00
東京都

コラム

ノウハウ New

「Elasticsearchって何?」

Elasticsearchとは Javaで記述された全文検索ソフトウェアである! ※引用 「Lucene」(ルシー...
238 views
イベント New

エンジニアが創造するITオペレーションにおける未来と現実(イマ)~ Accenture Tech Summit ~

2018年1月27日(土)13:00より、「Accenture Tech Summit ~エンジニアが創造する未来と現実(イマ)~」が...
189 views
イベント New

【6/27新宿開催】無料セミナー:ブランド認知広告、認知度に直結する「とある指標」とは?

※お申込は主催企業 株式会社ヴィクシア セミナー詳細ページ からお願いします。TECHPLAY上で満席表記となっ...
31 views