Copyright © ZDRIVE, K.K. All rights reserved. 1
スマートフォンサイト制作基礎実習
■課題 01
説明
架空の旅⾏代理店「スカイトラベル株式会社」の会社サイトをレスポンシブデザインでモバイル対 応する。■課題 01-1
説明
スカイトラベル株式会社のサイトのトップページ（index.html）を HTML5 形式に変更し、メディ アクエリを使ってレスポンシブデザインに変更する。 なお、指定されていない部分については、おおまかな⾒た目がサンプルのサイトと同じであれば問 題ない。仕様
幅およびレイアウト調整 Viewportの記述を追加する。 モバイル用の幅調整をする。その際、ブレークポイントは 800px とし、PC ファースト形 式で記述する。(max-width: 800px) ヘッダ（div#header）はモバイル用と PC 用の 2 種類の HTML コードに分けて記述し、ブ レークポイントで表⽰切り替えをする。モバイル用のヘッダ画像は [page_header_sp.jpg] を使用し、背景画像として配置する。 モバイル用ヘッダでは会社名とキャッチコピーをテキストとする。 モバイル用のヘッダにおいては電話番号リンクをつける。その際、Webフォント（typicons） を使用してアイコンを配置する。（ファイルはhttp://typicons.com/からダウンロード） ナビゲーション（div#mainnavi）はモバイル用と PC 用の 2 種類の HTML コードに分け て記述し、ブレークポイントで表⽰切り替えをする。 モバイル用のナビゲーションではトップページ以外の４つページへのリンクをはる。 画像最適化Copyright © ZDRIVE, K.K. All rights reserved. 2 PictureFill を使用してバナー画像（海外航空券専門窓⼝）が切り替わるようにする。その 際、切替条件は最⼤幅 800px で最小デバイスピクセル比 （-webkit-min-device-pixel-ratio）を 2 とする。 HTML5化 Doctypeと文字コードの記述を HTML5 形式に変更する。 <html>タグを<html lang="ja">とする。 <header>を配置し、ヘッダとナビゲーションをその中に含む。 ナビゲーションの<div>を<nav>に変更する。 新着情報の<div>を<section>に変更する。 サイドパネルの<div>を<aside>に変更する。 <main>を配置し、新着情報とサイドパネルをその中に含む。 フッタの<div>を<footer>に変更する。 コピーライトの記述に<small>をつける。
■課題 01-2
説明
スカイトラベル株式会社のサイトのイチオシ旅⾏プランページ（ichioshi.html）を HTML5 形式に 変更し、メディアクエリを使ってレスポンシブデザインに変更する。 なお、指定されていない部分については、おおまかな⾒た目がサンプルのサイトと同じであれば問 題ない。仕様
幅およびレイアウト調整 Doctypeと文字コードの記述を HTML5 形式に変更する。 <html>タグを<html lang="ja">とする。 Viewportの記述を追加する。 ヘッダ（div#header）はモバイル用と PC 用の 2 種類の HTML コードに分けて記述し、ブ レークポイントで表⽰切り替えをする。モバイル用のヘッダ画像は [page_header_sp.jpg] を使用し、背景画像として配置する。 モバイル用ヘッダでは会社名とキャッチコピーをテキストとし、テキスト部分にトップペー ジへのリンクをつける。 モバイル用のヘッダにおいては電話番号リンクをつける。その際、Webフォント（typicons） を使用してアイコンを配置する。Copyright © ZDRIVE, K.K. All rights reserved. 3 ナビゲーション（div#mainnavi）はモバイル用と PC 用の 2 種類の HTML コードに分け て記述し、ブレークポイントで表⽰切り替えをする。 モバイル用のナビゲーションではトップページ以外の４つページへのリンクをはる。 HTML5化 <header>を配置し、ヘッダとナビゲーションをその中に含む。 ナビゲーションの<div>を<nav>に変更する。 イチオシ旅⾏プランの<div>を<section>に変更する。 <main>を配置し、イチオシ旅⾏プランをその中に含む。 フッタの<div>を<footer>に変更する。 コピーライトの記述に<small>をつける。
■課題 01-3
説明
スカイトラベル株式会社のサイトのスタッフ紹介ページ（staff.html）を HTML5 形式に変更し、メ ディアクエリを使ってレスポンシブデザインに変更する。 なお、指定されていない部分については、おおまかな⾒た目がサンプルのサイトと同じであれば問 題ない。仕様
幅およびレイアウト調整 Doctypeと文字コードの記述を HTML5 形式に変更する。 <html>タグを<html lang="ja">とする。 Viewportの記述を追加する。 ヘッダ（div#header）はモバイル用と PC 用の 2 種類の HTML コードに分けて記述し、ブ レークポイントで表⽰切り替えをする。モバイル用のヘッダ画像は [page_header_sp.jpg] を使用し、背景画像として配置する。 モバイル用ヘッダでは会社名とキャッチコピーをテキストとし、テキスト部分にトップペー ジへのリンクをつける。 モバイル用のヘッダにおいては電話番号リンクをつける。その際、Webフォント（typicons） を使用してアイコンを配置する。 ナビゲーション（div#mainnavi）はモバイル用と PC 用の 2 種類の HTML コードに分け て記述し、ブレークポイントで表⽰切り替えをする。 モバイル用のナビゲーションではトップページ以外の４つページへのリンクをはる。 HTML5化Copyright © ZDRIVE, K.K. All rights reserved. 4 <header>を配置し、ヘッダとナビゲーションをその中に含む。 ナビゲーションの<div>を<nav>に変更する。 スタッフ紹介の<div>を<section>に変更する。 <main>を配置し、スタッフ紹介をその中に含む。 フッタの<div>を<footer>に変更する。 コピーライトの記述に<small>をつける。
■課題 01-4
説明
スカイトラベル株式会社のサイトの会社概要ページ（company.html）を HTML5 形式に変更し、 メディアクエリを使ってレスポンシブデザインに変更する。 なお、指定されていない部分については、おおまかな⾒た目がサンプルのサイトと同じであれば問 題ない。仕様
幅およびレイアウト調整 Doctypeと文字コードの記述を HTML5 形式に変更する。 <html>タグを<html lang="ja">とする。 Viewportの記述を追加する。 ヘッダ（div#header）はモバイル用と PC 用の 2 種類の HTML コードに分けて記述し、ブ レークポイントで表⽰切り替えをする。モバイル用のヘッダ画像は [page_header_sp.jpg] を使用し、背景画像として配置する。 モバイル用ヘッダでは会社名とキャッチコピーをテキストとし、テキスト部分にトップペー ジへのリンクをつける。 モバイル用のヘッダにおいては電話番号リンクをつける。その際、Webフォント（typicons） を使用してアイコンを配置する。 ナビゲーション（div#mainnavi）はモバイル用と PC 用の 2 種類の HTML コードに分け て記述し、ブレークポイントで表⽰切り替えをする。 モバイル用のナビゲーションではトップページ以外の４つページへのリンクをはる。 HTML5化 <header>を配置し、ヘッダとナビゲーションをその中に含む。 ナビゲーションの<div>を<nav>に変更する。 会社概要の<div>を<section>に変更する。 <main>を配置し、会社概要をその中に含む。Copyright © ZDRIVE, K.K. All rights reserved. 5 フッタの<div>を<footer>に変更する。 コピーライトの記述に<small>をつける。
■課題 01-5
説明
スカイトラベル株式会社のサイトのお問い合わせページ（contact.html）を HTML5 形式に変更し、 メディアクエリを使ってレスポンシブデザインに変更する。 なお、指定されていない部分については、おおまかな⾒た目がサンプルのサイトと同じであれば問 題ない。仕様
幅およびレイアウト調整 Doctypeと文字コードの記述を HTML5 形式に変更する。 <html>タグを<html lang="ja">とする。 Viewportの記述を追加する。 ヘッダ（div#header）はモバイル用と PC 用の 2 種類の HTML コードに分けて記述し、ブ レークポイントで表⽰切り替えをする。モバイル用のヘッダ画像は [page_header_sp.jpg] を使用し、背景画像として配置する。 モバイル用ヘッダでは会社名とキャッチコピーをテキストとし、テキスト部分にトップペー ジへのリンクをつける。 モバイル用のヘッダにおいては電話番号リンクをつける。その際、Webフォント（typicons） を使用してアイコンを配置する。 ナビゲーション（div#mainnavi）はモバイル用と PC 用の 2 種類の HTML コードに分け て記述し、ブレークポイントで表⽰切り替えをする。 モバイル用のナビゲーションではトップページ以外の４つページへのリンクをはる。 モバイル用レイアウトでフォームエリアを縦並びにするために<table>から<dl>での構 成に変更する。 ウィンドウ幅 480px 以下において、メールアドレス、住所（市町村）、住所（番地）、お 問い合わせの詳細の幅を 80%とする。 HTML5化（フォーム以外） <header>を配置し、ヘッダとナビゲーションをその中に含む。 ナビゲーションの<div>を<nav>に変更する。 お問い合わせフォームの<div>を<section>に変更する。 <main>を配置し、お問い合わせフォームをその中に含む。Copyright © ZDRIVE, K.K. All rights reserved. 6 フッタの<div>を<footer>に変更する。 コピーライトの記述に<small>をつける。 HTML5化（フォーム関連） 自動修正機能を無効にする。 Boolean属性値を省略する。 自動フォーカス機能を使ってお名前の⼊⼒ボックスにフォーカスをあてる。 プレースホルダーを使って⼊⼒例を⼊れる。
■課題 01-6
説明
スカイトラベル株式会社のサイトの仕上げをする。仕様
アドレスバーを非表⽰にするための JavaScript コードを追加する。 iPhoneの文字サイズ自動調整機能をオフにする。 Web Clip アイコンを追加する。Web Clip 画像はトップページのヘッダ画像
