Webサイトリフォーム実践サンプル

[表紙]Webサイトリフォーム実践サンプル

紙版発売
電子版発売

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 ブログのスマートフォンサイト
  • ブログのスマートフォンサイトを設定する③
  • エキサイトブログのスマートフォンサイト