プログラミング 英文法webアプリ-fasgram

【教師オリジナルアプリを作ろう】英文法アプリの見た目をアプリらしく/スマホに対応させる(JavaScript)

前回の記事【教師オリジナルアプリを作ろう】英文法問題アプリの作成方法を初めから(JavaScript)では,JavaScriptでwebアプリを動かすための骨格となるフレームワークの仕組みを解説しました。今回は,このコードにcssを用いて装飾を行い,もう少し見た目をアプリらしくしていきます。

また,アプリをスマートフォンの画面で適切に表示できるように調整します。もし,学生向けにwebアプリを提供するとしたら,ほとんど全ての生徒がスマートフォンでアクセスしてくるでしょう。したがって,ここではスマートフォンでの表示を前提としてデザインを決めていきます。

実際のwebアプリを公開しています。

http://localhost/fasgram/

今回のアプリはスマートフォンを前提に設計しているので,ぜひスマートフォンからアクセスしてください。効果音が再生されるなど,アプリとしての動作が確認できます。

ad

スマートフォンでの表示の確認

chromeを使えば,スマートフォン上での画面の確認を簡単に行うことができます。F12を押して,Ctrl+Shift+Mを押せば,スマートフォンのプレビューを見ることができます。ここで画面を確認しながら,作業を進めると良いでしょう。

ad

ビューポートの指定

実際のコードの説明に移ります。アプリの動作の仕組みについては前回の記事を参考にしてください。今回は,デザインの部分に絞って説明していきます。

<meta name="viewport" content="width=device-width,initial-scale=1">

まず,<head></head>にビューポートを指定します。多くのスマートフォンはwebサイトの画面を自動的に縮小して表示する仕組みになっています。ビューポートを指定することで表示をアプリ側でコントロールします。スマホに対応するためのおまじないとして,とりあえず書いておくものです。

ad

cssの指定

<link rel="stylesheet" href="./fasgram.css">

スタイルシートを指定します。cssファイルの中でアプリのデザインを指定していきます。

cssファイルの中身を見ていきましょう。

/*フォントファミリー*/
body {
    font-family: 'Helvetica','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'MS Pゴシック','MS PGothic'sans-serif;
}

全体のフォント設定です。font-familyは優先するフォントを前に書きます。PCやスマホによって使用できるフォントが異なるため,なるべく多くの端末に対応できるようにフォントを並べていきます。今回は使っていませんが,webフォントを導入することで,どの端末でも同じフォントで表示できるようになります。好みに応じてフォント名を書き換えていくと良いでしょう。

/*スマートフォン用の基準文字サイズ*/
body {
    font-size: 24px;
}
/*デスクトップ用の基準文字サイズ*/
@media screen and (min-width:680px) {
    body {
        display: flex;
        justify-content: center;
        font-size: 18px;
    }
}

フォントの大きさを指定します。通常は24pxですが,画面の幅が680pxを超えた場合に18pxを用いています。このようにして,画面の幅によってスマホとPCの切り替えの判断を行い,スマホ用の画面では文字を大きめに表示するように調整しています。これも実際に表示を確認しながら,適切な大きさに調節していくと良いでしょう。

また,PC画面ではFlexboxを使って,アプリ全体を画面の中央に表示するようにしています。Flexboxの使い方は,こちらなどを参考にしてください。

ブロック要素の概要を確認します。

このように,表示する内容はブロック要素containerの中に収めていきます。ブロック要素とは,中身を入れるための箱のことでした。ここでは,containerという箱の中にheaderarticleという箱が入っていて,その中にさらに小さな箱が入っています。そして,表示したい文字などの情報を箱の中に入れていきます。

/*コンテナの幅*/
#container {
    max-width: 680px;
}

コンテナの幅を指定します。幅を指定しないと文字がブラウザの幅全体に表示されます。デスクトップPCで表示するときはかえってバランスが悪くなるので,アプリの画面が最大680pxで表示されるように指定しています。スマホの画面の幅はこれよりは小さいので,画面全体に表示されます。

これで,スマホに対応させるための設定は終わりです。最近はレスポンシブ対応のwebサイトなども増えていますが,スマホでの表示を前提にするならば,設定すべき項目はそれほど多くはありません。

次に,文字やボタンなどの要素のデザインを調整していきます。

タイトルとURLをコピーしました