Workshop

西畑一馬のCSS3でつくるスマートフォンサイト講座

最近、iPhoneやAndroidなどのスマートフォンのシェアは、ものすごい勢いで増加しています。そのため、これからのWeb制作ではスマートフォン対応が必須のスキルになりつつあります。

本講座では、HTMLとCSSの知識がある方を対象に、スマートフォン対応の方法について学んでいただきます。

スマートフォン対応ではPC向けのサイト制作とは異なり、CSS3などの新しい技術を利用することが可能です。CSS3を利用することで効率よくスマートフォン向けのサイトを作成できるようになるでしょう。

また、制作環境の構築やviewportなどスマートフォン独自の概念、各デバイスの仕様や癖、バグを学ぶことでより効率のよいスマートフォン対応が可能になります。

本講座を通して最新のWeb制作を身につけてください。

*Android端末、iPhone/iPadなどスマートフォンをお持ちの方は、ご確認用にご持参されることをおすすめします。

講座レベルlevel3

■カリキュラム概要

  • 1.CSS3で始める新しいWeb制作

    • CSS2.1とCSS3の関係
    • CSS3の今とこれから
    • ブラウザの先行実装とベンダープレフィックス
    • プログレッシブエンハンスメント
    • 主なCSS3セレクタ
    • 主なCSS3プロパティ
    • CSS3によるアニメーション

  • 2.スマートフォンサイト制作とは

    • スマートフォンサイトの現状
    • スマートフォン向けの開発環境の構築
    • スマートフォンに適した情報設計

  • 3.実践スマートフォン対策

    • メディアクエリーによるスタイルシートの切り替え
    • 知っておくべきテクニック
    • スマートフォンサンプルサイトの作成

＊カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。

使用アプリケーション
Android SDK、Safari、TeraPad
講師
西畑一馬
定員
6名
対象
XHTML、CSSを理解して書けるマークアップエンジニア、ウェブデザイナー
CSSで段組レイアウトができる方
「 千貫りこのHTML/CSS中級講座 」の履修相当の理解がある方。 本ページ下の 受講対象レベルチェック問題 を理解できる方。
料金
29,800円（税込み）

2012年4月21日（土）11:00～18:00残り6席

お申し込み：2012年4月21日（土）

受講希望の方は 受講規約 および よくある質問 のページを閲覧していただき、ご了承の後にお申し込みフォームからお申し込みください。また お申し込みの流れ もご参照ください。

■受講対象レベルチェック問題

＊全問正解が受講の必須条件ではなく、受講対象レベルの具体的な目安とお考えください。

問1：

次のタグを赤色で表示するCSSを答えてください。

<p class="sp">スマートフォン</p>

問2：

次のHTMLの間違いを答えてください。

<p>lesson<a href="index.html>1</p></a>

問3：

p要素に対してセレクタの優先度が高い準に並べてください。

(1) #container .content p { color: red; }
(2) p { color: red; }
(3) div#container div.content p { color: red; }
(4) .content p { color: red; }

答1：

p.sp{
  color:red;
}

答2：

href属性の"（ダブルクオーテーション）がとじていない点と、a要素とp要素の閉じタグの登場順が逆になっている点。

<p>lesson<a href="index.html">1</a></p>

答3：

(3),(1),(4),(2)

Information

写真：西畑一馬

Instructor西畑一馬

to-R代表、Webクリエイター

プロフィールを見る

voice

受講頂いた方からのコメントをご紹介しています。

スマートフォン制作に関してあまり知識が無かったので、今回の講座はCSS3だけでなくスマートフォンの基本的なことが分かり大変よかったです。

Web制作会社勤務 正社員

今まさに知りたいことを学ぶことができました。必要性に非常にマッチした講座でした。難しい内容もありましたが、分かりやすく、大変満足です。

一般企業勤務 正社員

１つずつ丁寧に教えてくださり、着実に進めていくことができました。CSS3はいつかやらなければ･･･と思いつつ、 長めのコードが意味不明な印象があり敬遠していたのですが、今度のワークショップでかなり身近に感じることができました。今来ている案件にも、今回得た知識を使って対応していきたいと思います。

Web制作会社勤務 正社員

67WS channel

【「複数割」受講チケット最大23%OFFキャンペーン】有効期限はお買い求め日から1年間。募集中の全ての講座にご利用いただけます！！キャンペーンの詳細はこちら

【10,000円キャッシュバックキャンペーン】 2講座受講の方に10,000円のキャッシュバック！！キャンペーンの詳細はこちら

安心サポート始めました 一度ご受講された講座に、6ヶ月間無料で再受講できます

イメージ：jQuery Mobile スマートフォンサイト デザイン入門
jQuery Mobile スマートフォンサイト デザイン入門

イメージ：Webデザイン・フォーラム 10人のプロが教える原則と経験則
Webデザイン・フォーラム 10人のプロが教える原則と経験則

イメージ：JavaScriptコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くために
JavaScriptコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くために

イメージ：jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践
jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践

イメージ：Web制作の現場で使う jQueryデザイン入門
Web制作の現場で使う jQueryデザイン入門

トップページに戻る