Webサイトリフォーム実践サンプル
- 渥美聡子 著
- 定価
- 3,058円（本体2,780円＋税10%）
- 発売日
- 2013.6.14［在庫なし］
- 判型
- B5
- 頁数
- 240ページ
- ISBN
- 978-4-7741-5765-8 978-4-7741-5832-7
概要
自分のサイトをスマートフォンに対応させたいという人、自分のサイトに動画を組み込みたい、メニューを動的にしたいなど、Webサイトをリフォームしたい人に向けた使えるコードサンプル集です。昨今はやりのjQueryを中心に、JavaScriptなどを使っていて、コードデータはダウンロードサービスにより提供します。提供しているHTMLのページを改編して使ってもいいですし、自分の知りたい、やりたい部分のコードをコピペして自分のサイトに組み込んで使ってもいいと、自由度が高いコードサンプル集です。個人だけでなく、商用利用も可能で、改編も自由なので、Webサイトに新たな魅力を追加できます。
目次
- はじめに
- 本書の内容と読み方
- 掲載サンプルのダウンロードについて
Part1 Web レイアウトの基本
- HTML について
- CSS について
- スマートフォンサイト作成の基本
- jQueryの基本
- 動作検証について
Part2 スマートフォンサイトのWeb レイアウトをパワーアップする
- デバイスの幅を自動的に合わせる
- viewport を設定
- 高解像度用の画像を設定する
- 高解像度スマートフォン用の画像を設定
- スマートフォンサイトとPC サイトの自動切り替え①
- JavaScript でスマートフォンサイトとPC サイトを自動切り替え
- スマートフォンサイトとPC サイトの自動切り替え②
- .htaccess でスマートフォンサイトとPC サイトを自動切り替え
- スマートフォンサイトとPC サイトの自動切り替え③
- PHP でスマートフォンサイトとPC サイトを自動切り替え
- スマートフォンサイトにHTML5 のvideo タグを設定する
- HTML5 での動画の埋め込み
Part3 jQuery Mobile でスマートフォンサイトをデザインする
- jQuery Mobile の基本構造
- jQuery Mobile の基本構造を理解する
- jQuery Mobile の基本①
- 複数ページの作り方とリンクの仕方
- jQuery Mobile の基本②
- 複数ページとリンク（ページ移動の高速化）
- jQuery Mobile の基本③
- 戻るボタンのリンク
- jQuery Mobile の基本④
- ページ切り替え効果（トランジション）
- jQuery Mobile の基本⑤
- ページのテーマデザインを変更
- jQuery Mobile の基本⑥
- ヘッダーとフッター
- jQuery Mobile の基本⑦
- ヘッダーにボタンを追加
- jQuery Mobile の基本⑧
- フッターにボタンを追加
- jQuery Mobile の基本⑨
- ナビゲーションバー
- jQuery Mobile の基本⑩
- ヘッダーやフッターの位置を固定する
- jQuery Mobile の基本⑪
- ヘッダーとフッターを自動的に隠す
- jQuery Mobile の基本⑫
- フッターをナビゲーションにして各ページ共通にする
- jQuery Mobile の基本⑬
- リンクボタンを作る
- jQuery Mobile の基本⑭
- ボタンにアイコンを付ける
- jQuery Mobile の基本⑮
- テキストの幅に合わせたボタン
- jQuery Mobile の基本⑯
- テーマを適用したカラフルなボタン
- jQuery Mobile の基本⑰
- 複数のカラム（列）を作る
- jQuery Mobile の基本⑱
- 折り畳めるコンテンツを作る
- jQuery Mobile の基本⑲
- アコーディオンのコンテンツを作る
- jQuery Mobile の基本⑳
- シンプルなリンク付きのリスト
- jQuery Mobile の基本㉑
- 階層化したリスト
- jQuery Mobile の基本㉒
- 画像アイコンが付いたリスト
- jQuery Mobile の便利な機能とサンプル①
- テーマローラー
- jQuery Mobile の便利な機能とサンプル②
- 知っておきたい機能とサイト
Part4 PC サイトのパワーアップする
- Google マップを埋め込む①
- 地図のコードをGoogle マップの「リンク」から取得して埋め込む
- Google マップを埋め込む②
- Google Maps JavaScript API V3 を使用して地図を埋め込む
- さまざまな形式の動画を埋め込む①
- MP4 の動画を埋め込む
- さまざまな形式の動画を埋め込む②
- Flash（swf）の動画を埋め込む
- さまざまな形式の動画を埋め込む③
- HTML5 のvideo タグで動画を埋め込む
- インターネット配信サービスの動画を埋め込む①
- YouTube 動画を埋め込む
- インターネット配信サービスの動画を埋め込む②
- USTREAM の生放送を埋め込む
- インターネット配信サービスの動画を埋め込む③
- ニコニコ動画を埋め込む
- Facebook のプラグインの埋め込み
- Facebook の機能を埋め込む
- Twitter の埋め込み
- Twitter の機能を埋め込む
Part5 jQuery を使ってWeb レイアウトをパワーアップする
- このパートについて
- 自分でプラグイン作者のページからダウンロードする場合の注意
- 画像コントロール①
- 画像の切り換え効果を設定する
- 画像コントロール②
- 背景画像をフルスクリーンにする
- 画像コントロール③
- スライドショーを設定する
- 画像コントロール④
- 画面の切り換え効果を設定したスライドショーを設定する
- 画像コントロール⑤
- スライドショーにサムネールを表示する
- 画像コントロール⑥
- クリックした画像をズームする
- メニューコントロール①
- 横に開くアコーディオンメニューを設定する
- メニューコントロール②
- 垂直に開くドロップダウンメニューを設定する
- メニューコントロール③
- サブメニュー付きのドロップダウンメニューを設定する
- メニューコントロール④
- 自動的に次のページへのリンクボタンを表示する
- テキストコントロール①
- ニュース速報のようにテキストを表示する
- テキストコントロール②
- テキストをタイプライターのように表示する
- テキストコントロール③
- テキストサイズを変更するメニューを追加する
- テキストコントロール④
- 選択した部分にツールチップを表示する
- Appendix さまざまなテクニックでサイト全体をパワーアップする
- PC サイトとスマホサイトのレイアウトの切り替え
- メディアクエリーで切り替える
- ブログのスマートフォンサイトを設定する①
- アメブロのスマートフォンサイト
- ブログのスマートフォンサイトを設定する②
- FC2 ブログのスマートフォンサイト
- ブログのスマートフォンサイトを設定する③
- エキサイトブログのスマートフォンサイト