\subsubsection{レスポンシブページ}
作成したWebページには，CSS3の@mediaを用いることでスクリーン(画面,ウィンドウ)の縦横比を検知させている。これによりページを開いているスクリーンが縦長であれば縦画面用のページが表示され，横長であれば横画面用の画面が表示される。また，ページ内には背景やキャラクター画像が配置されるスペースやテキストが表示されるボックスを配置しており，それぞれの要素に対してスクリーンに合わせた大きさになるように設定を行っている(図\ref{tate}，図\ref{yoko})。縦横比による画面切り替えの記述は以下に示す。
\begin{itembox}[l]{縦画面表示} 
\begin{lstlisting}
@media screen and 
(orientation: portrait) {
  header{
    margin: 0;

  〜以降スタイルの記述〜
}
\end{lstlisting}
\end{itembox}

\begin{itembox}[l]{横画面表示} 
\begin{lstlisting}
@media screen and 
(orientation: landscape) {
  header{
    margin: 0;		

  〜以降スタイルの記述〜
}    
\end{lstlisting}
\end{itembox}


\begin{figure}[tbp]
\centering
\includegraphics[width=5cm]{page_tate.pdf}
\caption{縦画面}
\label{tate}
\end{figure}

\begin{figure}[tbp]
\centering
\includegraphics[width=7cm]{page_yoko}
\caption{横画面}
\label{yoko}
\end{figure}

\subsubsection{ロード画面の追加}
\sr のWebページには，読み込みの際に表示させるロード画面を実装するにあたり，JavaScriptライブラリの一つである「jQuery」を用いている。ロード画面を表示させるHTMLファイル内のscriptタグにjQueryを指定するURLを記述することでライブラリの利用を可能にしている。実際のロード画面は，gif画像とNow Loading...の文字をHTML内で追加することで構成している（図\ref{load}）。以下はロード画面実装の記述である。
\begin{itembox}[l]{ロード画面の実装} 
\begin{lstlisting}
$(function() {
　var h = $(window).height();
　$('#loader-bg ,#loader').
　 height(h).css('display','block');
});
//開いているウィンドウの高さを取得し
新たなを画面貼り付ける

$(window).load(function () {
　$('#loader-bg').delay(900).
　　fadeOut(800);
　$('#loader').delay(600).
　　fadeOut(300);
});
//全ての読み込み完了後，アニメーショ
ンさせながら非表示にする

$(function(){
　setTimeout('stopload()',5000);
});
//5秒後に強制非表示

function stopload(){
　$('#loader-bg').delay(900).
　　fadeOut(800);
　$('#loader').delay(600).
　　fadeOut(300);
}
\end{lstlisting}
\end{itembox}

\begin{figure}[tbp]
\centering
\includegraphics[width=7cm]{load}
\caption{ロード画面}
\label{load}
\end{figure}