Webサイトリフォーム実践サンプル
2013年6月14日紙版発売
2013年6月14日電子版発売
渥美聡子 著
B5判／240ページ
定価3,058円（本体2,780円＋税10%）
ISBN 978-4-7741-5765-8
ただいま弊社在庫はございません。
書籍の概要
この本の概要
自分のサイトをスマートフォンに対応させたいという人，自分のサイトに動画を組み込みたい，メニューを動的にしたいなど，Webサイトをリフォームしたい人に向けた使えるコードサンプル集です。昨今はやりのjQueryを中心に，JavaScriptなどを使っていて，コードデータはダウンロードサービスにより提供します。提供しているHTMLのページを改編して使ってもいいですし，自分の知りたい，やりたい部分のコードをコピペして自分のサイトに組み込んで使ってもいいと，自由度が高いコードサンプル集です。個人だけでなく，商用利用も可能で，改編も自由なので，Webサイトに新たな魅力を追加できます。
この書籍に関連する記事があります！
- 自分のWebページに新たな魅力を追加したい人に
- 昨今は自分のブログや個人ショップなど，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 ブログのスマートフォンサイト
- ブログのスマートフォンサイトを設定する③
- エキサイトブログのスマートフォンサイト