十回目ーースマホの実装ーー
今回で上級編終了となり、HTML&CSSでのWebサイト作りが出来る様になりました。
とはいえ、学んでいないプログラムは半分以上残っているのですぐ作れるというわけではありません。
前回も言いましたが、まずは本命のゲーム作りをするためのプログラムを学び、その傍らどのようなプログラムがあるのか確かめながらゲームを作る過程を綴るブログの構想を練っていこうと思っています。
はい、前回のタブレットの実装に引き続き、今回はスマホのサイズに合わせた実装を行います。
学んでいて少し疑問だったのですが、横幅のサイズ(max-width)はどのくらいが良いのでしょうかね。
調べてみると、PCは1000px前後で設定する人が多いらしいですが。
それでも横幅は倍ほどあるのですが、ウィンドウを最大にして閲覧する人はあまりいないでしょう。
なろうを読むとかぐらいならあるでしょう、それでも大きすぎと思います。
私も小説を書く時は調べることが多いので片側に画面を開いていますし、BGMとしてYouTubeを使う時もありますね。
なので、1000px程度がPCサイズのようです。
それ以下だったらタブレットサイズになるようにするんです。
では、スマホだったらどうするのか。
それはこれから説明するので始めていきます。
１．スマホのメディアクエリ
スマホに限らずiPhoneもですが、基本的に縦長のデバイスです。
横幅は大きい物で400pxぐらいではないですか？
なので、PCやタブレットと同じくそのぐらいで……と数値を決めるのはよろしくないようです。
まだ詳しくは分からないのですが、解像度の問題で数値はその倍を考えなければならないそうです。
即ち、800px――650px～750pxが妥当なところだとか。
なので
@media (max-width: 700px) {
.lesson {
width: 100%;
}
}
画像と説明のある中央のグループ(前回のタブレットと同じ)にブレイクポイントを設定して、横幅を%で書き込みます。
この辺りは前回と同じなので説明は省きます。
ついでにフッターの位置も調整しておきましょう。
フッターの位置は特に弄っていなかったので、デフォルト状態の左側として表示されています。その表示を弄って中央表示に変更させます。
注意として、独立させると意味がないので同じメディアクエリの中に書かなければなりません。
@media (max-width: 700px) {
.lesson {
width: 100%;
}
footer {
text-align: center;
}
}
こんな感じでしょうか。
これでフッターの表示が中央寄せとなります。
２．ボタン調整
表示を変えたことで画像と説明が一つずつ縦並びに表示されるようになりましたが、現状では不便な部分や読みにくく感じる所が多くあります。
その一つが指でタップするには小さいボタンです。
ボタンの横幅を100%とすることで空白を除いた部分まで広げます。
三つのボタンは縦並びになるのですが、元々横に並んでいたFacebookとtwitterは上下の空白が無くくっ付いてしまうので、Facebookボタンの下に空白を作って調整します。
また、全体が中央寄せの表示になっているので、ここを左寄りの表示に変えることで見やすく変更します。
後は上部に空白を作っておくなど見やすいレイアウトを自分で考えるのが必要です。
もう一つ、画面が小さくなると大きな文字は読み難くなるのが必然です。
なので、タブレットの時も含めて丁度良いサイズに変更することがおすすめです。
特に見出し『h』は大きく表示されるので、細かく文字サイズを変更しておくことが大切となります。
３．大きすぎの画面
一番最初に触れたウィンドウサイズを最大にした場合、このままでは100%の横幅に応じて画像と説明が25%ずつ表示されてしまいます。大体一つ500px弱とかなり大きいです。
画像の大きさは決まっていますし、文字は横幅に応じて広がってしまうので読みづらくなります。
そこに変更を加えてサイズが大きくなっても良いようにします。
上級編で『width』の幅を変えたのだからそこを変えよう、と安易に変更するとタブレットやスマホで表示させるときに振出しに戻ってしまいます。
なので、新たなプログラムとして最大の横幅の値を決める
『max-width』
というものを使います。
これは横幅の最大値を決めてそれ以上の画面サイズになっても拡大されないようにするプログラムです。
『width』は100%でも『max-width』を1000pxにすることで、画面サイズが2000pxになっても表示は最大値の1000pxで表示されるということです。
４．ヘッダーのメニュー
最後に画面に重なっているヘッダーを変更させます。
スマホで良く見かけるメニューが隠れた三本線のアイコンです。
アイコンはFacebookやtwitterのアイコン表示と同じ方法で『span』を使い書き込みます。
<span class="fa fa-bars menu-icon"></span>
アイコンだけなので『a』のリンク関連は不要です。
そもそもログインボタンなどは『a』を使って書き込んでいるので、それが代わりと思えば良いでしょう。
新たなクラス『menu-icon』に
文字の色『color: white;』
表示場所『float: right;』
文字の大きさ『font-size: ○○px;』
文字の空白『padding: 20px 0;』
また、PCやタブレットでは不要なの『display: none;』にすることでメニューを消します。
消したメニューを表示させるには『display: block;』を使えば良いので、スマホのメディアクエリに『menu-icon』を作り書き込みます。
そして、アイコンの中に含みたいログインボタンなどを消す為に、同じくスマホのメディアクエリの中にログインボタンなどを含むクラス名を書きます。
.header-right {
display: none;
}
と
.menu-icon {
display: block;
}
この二つです。
この状態では三本線のアイコンが作られ、ログインボタンなどが消えただけになるので、三本線のアイコンを押してもメニューが表示されるわけではありません。
上級編では習わない様なので試行錯誤して出来る様にしておきます。
と、上級編を以上で終わり、HTML&CSSをまとめた後にいよいよメインのプログラム言語第一弾『JavaScript』を学んでいきます。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
