十回目ーータブレットの実装ーー
前回レスポン『シブ』デザインをレスポン『ジ』デザインと間違えていたので書き直しておきました。
前回は
デバイスや画面サイズに合わせてレイアウトを調整する『レスポンシブデザイン』
それにCSSを適用させる手法の『メディアクエリ』
横幅の調整とレイアウト崩れを防ぐ『box-sizing: border-box』
この三つを学びました。
今回はその実装へ入りたいと思います。
まずはタブレット向けの表示を学んでいきます。
１．レスポンシブデザインの適用
適用させる準備として『head』の中に【viewport】という設定をしなければなりません。
これが書かれているかどうかで適用されるか決まるので重要な部分です。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
覚える必要はないらしいのですが、情報が交錯しているので定型文として覚えておきます。
少なくとも暗記する必要はないとか。
前回言っているかもしれませんが
横幅『width』の数値を○○pxから%(100)表示に変更します。
画面サイズ(100%)に合わせて内容が収まるようにする、ということですね。
ですが、この状態では文字や画像の重なりが起きる為処理を行わなければなりません。
２．タブレットのレイアウト
メディアクエリのCSSは結局のところCSSなのでCSSファイルに書いて良いようなのですが、分かりやすくするために新しいファイル――『responsive.css(以下、RESファイル)』を作って書き込んでも良いようです。
ただし、HTMLファイルの『head』にファイルを読み込むための文
<link rel="stylesheet" href="responsive.css">
CSSファイルを読み込むための文と似た文を書かなければなりません。
確認ですが
『rel』はファイルとの関係性
『href』はファイルのある場所(ファイルのURL)
@media (max-width: 1000px) {
.lesson {
width: 50%;
margin-bottom: 30px;
}
}
最大横幅が1000PX以下のとき適用します。
lesson(＝四つの画像と文字のグループ)がそれぞれ画面サイズに対して50%(二つずつ)で表示されるようにします。
下側(一列目・二列目両方)に30px分空白を作ります。
意味としてはこのような感じで、新たに作ったRESファイルに書き込みます。
そして、背景の色を薄い灰色に変えていたのですが、ここもpx表示にしていた為固定されています。タブレットにしてもしっかり背景色が変わる様にしたいのです。
高さ(height)を消して画面サイズごとに変わる様変更します。
しかし、このままではおかしな形となります。
それは『float』が原因らしく、『float』を使うと横並びに出来るのですが、デメリットとして【浮いてしまう】のです。
浮く＝移動する為
即ち、背景色のグループからから離れてしまい(浮いてしまい)背景色が適用されなくなってしまうようです。
それを解除する為に
『clear: left;』
というプログラムを使います。
空タグ(新しいグループ)と『clear』で『float』を解除するよく使うテクニックだとか。
新しいグループは適用させるグループの下に書きます。
今回は四つの画像と文字のグループの下ですね。
これでレイアウトの崩れを直せます。
今回は此処までとします。
次回はスマートフォンのレイアウトに移ります。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
