%#!platex -kanji=%k
%#DVIPDF dvipdfmx -f ipa.map
\documentclass{jsbook}
%\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}
%\usepackage{listings, jlisting}
%\usepackage[sectionbib]{chapterbib}
\usepackage{url}
\usepackage{listings,jlisting}
\usepackage{ascmac}
\newcommand{\sr}{{\itshape Silk-Re:road}}
\renewcommand{\baselinestretch}{1.06}
\setlength{\textheight}{18cm}
\addtolength{\topmargin}{-1cm}		% 紙上端1インチからのマージン
\addtolength{\oddsidemargin}{0cm}
\addtolength{\evensidemargin}{0cm}
\addtolength{\textwidth}{1zw}
\setlength{\itemsep}{0.5ex}


\begin{document}
\chapter{テキストファイルをTeXに}
本章では，事前に作成した殴り書きのテキストファイルをTeXの記述方式に倣って修正を行う。最初に技術面で行なったことを説明し，その後，\sr 効果やはたらきについて説明する。
\section{技術面}
\sr に実装されている，Webページやクイズのシステム等はHTML5,CSS3,JavaScriptを用いて作成した。具体的な概要は各機能に分け以下に示す。
\subsection{レスポンシブページ}
作成したWebページにはCSSの@mediaを用いることでスクリーン(画面,ウィンドウ)の縦横比を検知させている。これによりページを開いているスクリーンが縦長であれば縦画面用のページが表示され，横長であれば横画面用の画面が表示される(図\ref{tate}，図\ref{yoko})。
\\\quad 縦横比による画面切り替えの記述は以下に示す。
\begin{itembox}[l]{縦画面表示} 
\begin{lstlisting}
@media screen and (orientation: portrait) {
  header{
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .title{
    width: 80%;
  }
  .center {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    z-index: 1;
  }
  〜以降スタイルの記述〜
}
\end{lstlisting}
\end{itembox}

\begin{itembox}[l]{横画面表示} 
\begin{lstlisting}
@media screen and (orientation: landscape) {
  header{
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .title{
    width: 15%;
    height: 3%
  }
  .center {
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    z-index: 1;
  }
  〜以降スタイルの記述〜
}    
\end{lstlisting}
\end{itembox}
また，ページ内には背景やキャラクター画像が配置されるスペースやテキストが表示されるボックスを配置しており，それぞれの要素に対してスクリーンに合わせた大きさになるように設定を行っている。

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




\end{document}