\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}