十回目ーーHTML&CSS上級編開始、レスポンシブデザイン、メディアクエリーー
遅くなりましたが上級編を始めます。
今後の展開について先に言いますが、(サイトでの)HTML&CSSの勉強は終了となるので、終わり次第単語などの纏めなりすると思います。その後、ゲームを作っていくプログラムを決めていきく手筈となります。
とはいえ、ゲームを作っていくためのブログを自分で作りたいとも思っているので、どうなるか分かりません。ブログを作ること自体は金がかからずとも、ドメインやサーバー？ を借りるのにお金がかかるので先の話になるとも思えます。
まあ、自作ゲーム販売に向けプログラムを覚えることを優先にして学んでいくのは変わりません。
HTML&CSSの上級編に入ります。
上級編ではあるのですが、どうやら全てのプログラムを学べるわけではないらしく、少し調べた所半分ほど紹介の無かった単語というかタグを見つけました。
まあ、そのタグも使い道が無さそうであったり、習ったもので代用可能な範囲と思えたりと、専門家に必要な部分が省かれたと思います。
なので、上級編が終わった後は初級編・中級編と同じく上級編のまとめを行い、投稿できるか分かりませんがブログの内容を考えつつゲーム作りに進んでいこうと思います。
今の所『JavaScript』を学ぼうと考えています。
では、上級編を始めましょう。
１．レスポンシブデザイン
上級編ではタブレットやスマホでも対応する画面を作っていきます。
今の状態ではタブレットなどにすると
画像が重なり合う
文字が変な所にある
文字や画像が大きく見にくい
配置の問題もある
と多くの問題点があります。
そこを調整する技術を『レスポンシブデザイン』と呼び、様々なデバイスや画面サイズに合わせてレイアウトを変更させます。
スマートフォン表示に対応したサイト制作においては必須技術らしいですね。
中級編では横幅を固定していたので、それよりも画面幅が狭くなると一部が隠れてしまい重なり合うようになります。
そこの対処の為にレスポンシブデザインを適用させて色んなデバイスでも表示出来る様に、見やすいように変更していきます。
２．メディアクエリ
また新たな単語ですが
『メディアクエリ』とは、画面サイズに応じてCSSを設定できる手法のことです。
スタイルを切り替える機能と思えば良いようです。
使うプログラムは
『@media (条件) {内容}』
なんら難しいことはなく、今までのCSSと同じような感じでした。
違う所は『条件』と呼ばれる部分でしょう。
例えば
@media (max-width: 500px ) {
h1 {
color: red;
}
}
上記のプログラム。
これが意味するのは
『500px以下の時に適用するCSS
h1のテキストを赤色で表示する』
といった感じになります。
最大の横幅が500pxで、それ以下の画面サイズの時文字が赤字になります、といったイメージをしてください。
注意する所は【条件に;を付けない】ところなのですが、CSSの中身の内容ではないからと思えば覚えやすいのではないでしょうか。
他にも『min-width』――最小幅を決めることも出来ます。
そして、条件を指定する○○pxという部分を
『ブレイクポイント』と呼ぶらしいです。
これを使えば
・通常では赤字で表示
・1000px以下の時青字で表示
・600px以下の時緑字で表示
このように複数の条件を付けて変更させることも出来ます。
というより、PC・タブレット・スマホと三つのサイズで表示させようとするなら必須というわけです。
更に
@media (max-width: 1000px) {
.img {
width: 50%;
}
}
@media (max-width: 600px) {
.img {
width: 100%;
}
}
高さと空白を決めておいた画像を複数表示させるときに上記のプログラムを書き込むと
・通常では横一列に並ぶ(floatあり)
・1000px以下の時横幅を50%(半分)で表示、二個ずつ
・600px以下の時横幅を100%で表示、一個ずつ
デバイスに応じて画像の幅を変更して表示させられます。
３．レイアウト崩れの対処
しかし、先ほどの状態に空白――上下ではなく左右に空白が生まれると、その分も追加されレイアウトの崩れが生じてしまいます。
あくまでも画像の横幅に関して変更を加えているだけで、空白はそのまま適用されてしまうからです。
そこで使うのが
『box-sizing: border-box;』
というプログラムです。
説明せずとも分かると思いますが
意味は『空白も含む』というものです。
これでレイアウトの崩れを未然に防ぐことができます。
注意として『marginは含まれない』という所があります。
marginは枠線の外側の空白なので含まれないと思ったらいいでしょう。
書き方はCSSファイルの一番上に
* {
box-sizing: border-box;
}
アスタリスクを用いて書きます。
以上がレスポンシブデザインとメディアクエリの内容となります。
次から作ったページの変更を行っていくことになります。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
