スマホサイト制作の基礎知識ましょう。
  • マルチデバイス対応とは?
  • スマートフォンOSのシェアを知る
  • 画面サイズの考え方
  • スマートフォン独自のジェスチャー操作を知る
  • 端末の向きのモードを知る
  • Viewportについて
  • (実践)Viewportを記述してみよう
  • マルチデバイス対応方法
スマホサイトデザイン基礎
  • スマフォサイトの画面設計のポイント
  • スマホサイト用ワイヤーフレームの作り方
  • 使いやすいスマホサイトの考え方
  • 具体的なスマホサイトデザインのルール
  • [実践]CSS3を使って押しやすいボタンをデザインしてみよう
  • 具体的なスマホサイトデザインのルール-レイアウト編
  • リキッドレイアウトを理解しよう
  • スマホサイトで使えるCSS3の装飾表現を知ろう
実践スマホサイトデザイン
  • スマホサイト用photoshopファイルの新規作成
  • Google Web Fontsをデザインカンプで使用する方法
  • トップページデザイン(1)ヘッダーの作成
  • トップページデザイン(1)メニューアイコンの配置
  • トップページデザイン(2)メイン画像の配置
  • トップページデザイン(2)メイン画像 キャッチコピーの作成
  • トップページデザイン(3)お知らせ一覧 見出しの作成
  • トップページデザイン(3)お知らせ一覧 記事一覧の作成
  • トップページデザイン(4)フッターの作成
スマホサイトコーディング基礎
  • スマホサイトを作るために必要な環境を知ろう
  • スマホコーディングにおけるHTML5について
  • スマホサイト制作で必須のHTML5(1) sectionタグ
  • スマホサイト制作のためのHTML5(2) articleタグ
  • スマホサイト制作のためのHTML5(3)nav header footerタグ
  • スマホ用HTMLファイルの新規作成と、Viewportの指定
  • スマホ制作で役立つCSS3について
  • ベンダープレフィックスの書き方
スマホサイトのためのコーディングテクニック
  • タップで発信できる電話ボタンを作成しよう(1) href属性の記述
  • タップで発信できる電話ボタンを作成しよう(2) CSS3を使ってグラデーションをかける
  • CSS3を使ってフォームを使いやすくしてみよう(1) [type=text]属性セレクタ
  • CSS3を使ってフォームを使いやすくしてみよう(2) focus擬似クラス
  • アイコンをWebフォントで表現する方法
  • box-sizingを使った便利なレイアウト
  • 画像を最適化してサイト表示速度を早くする方法
  • JPG画像を圧縮してサイズを減らす方法
実践スマホサイトコーディング(1)
  • HTML5タグを使った全体のマークアップをしよう
  • ヘッダーのコーディング(1):基本的なHTMLとCSSの記述しよう
  • ヘッダーのコーディング(2):ナビゲーションボタンを作成しよう
  • ヘッダーのコーディング(3):CSSを使ってタップ範囲を広げてみよう
  • 横幅に応じて可変するメイン画像のコーディングをしよう
  • お知らせ一覧の作成(1):見出しのコーディングをしよう
  • お知らせ一覧の作成(2):floatを使って見出しを横並びさせよう
  • お知らせ一覧の作成(3):背景画像を利用したアイコンを表示させよう
  • お知らせ一覧の作成(4):記事一覧のHTMLとグラデーションを表示させよう
  • お知らせ一覧の作成(5):clearプロパティを使ってフロートを解除しよう
実践スマホサイトコーディング(2)
  • お知らせ一覧の作成(6):記事一覧のアイコンを表示させよう
  • フッターナビゲーションの作成しよう
  • フッターの作成:ロゴとコピーライトを記述しよう
  • Viewportの設定とエミュレータでの最終確認をしよう
0から始めるレスポンシブWebデザインの基本
  • レスポンシブWebデザインとは
  • レスポンシブWebデザインをするために必要なスキル
  • レスポンシブWebデザインを選択する理由
  • レスポンシブWebサイトのデメリット
  • レスポンシブWebデザインのレイアウト
  • メディアクエリの使い方・書き方
  • [実践]フレキシブルレイアウトをつくってみよう(1)
  • [実践]フレキシブルレイアウトをつくってみよう(2)
実践レスポンシブWebサイト制作実践
  • Viewportを記述しよう
  • ヘッダーのレイアウトをフレキシブルに変更しよう
  • メイン画像をフレキシブルに変更しよう
  • 固定幅の3カラムレイアウトを%に変更しよう
  • floatを解除して小さい画面用のレイアウトを作ろう
  • media queryを使って2カラムを1カラムに変更しよう
  • 押しやすいメニュー一覧を作ろう
  • ページ全体の周りに余白を作ろう
  • jQueryを使ってタップしたら開くメニューを作ろう
  • チャレンジ解説