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/

注意事項

※ こちらのイベント情報は、外部サイトから取得した情報を掲載しています。
※ 掲載タイミングや更新頻度によっては、情報提供元ページの内容と差異が発生しますので予めご了承ください。
※ 最新情報の確認や参加申込手続き、イベントに関するお問い合わせ等は情報提供元ページにてお願いします。