%#!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}