[コーディングの実践]LEVEL NORMAL

div#mainタグのcssコーディング

次はcssへ特別な記述を行うことスマートフォンなどの閲覧端末ごとに表示を最適化させる記述を行いましょう。

スマホ対応を行うには様々な方法がありますが、今回は最も推奨されている対応手法である「レスポンシブWebデザイン」という手法を使います。
レスポンシブWebデザイン(以後:RWDと表記)は閲覧するデバイスの画面サイズに合わせて、Webサイトを最適なサイズにリサイズ表示する、表示最適化の手法です。

そのレスポンシブWebデザインを行うために不可欠なのが「CSS3 Media Queries」(以後:メディアクエリと表記・呼称)という技術です。
今回はそのメディアクエリを使用してスマホ対応を行いたいと思います。

なおRWDおよびメディアクエリに関しては以下の記事を参考にしてください。

[コーディングの応用] どうしても覚えてほしいスマートフォン対応!レスポンシブWebデザイン(RWD)

div.contentセレクタにスマホ対応用の宣言ブロック=メディアクエリを追加する

ではメディアクエリを使用して表示最適化対応を行います。
まずは以下の手順でセレクタの宣言ブロック内に宣言の一つとして特別な記述を行います。

1. div.contentセレクタ内の「gap: 30px;」の下の行を改行する。
2. 「@」と一文字入力して[Tab]キーを押す。
3. ❷で展開されたコードのセレクタに次の❹の記述を追加する。※セミコロン(;)は不要
4.  and (max-width: 768px)
5. style.cssを上書き保存Ctrl + Sする。
6. コード記述・展開前および展開後を確認する。

参考:①CSS3 Media Queriesの展開

これで、モニターの横幅が768px以下の場合に有効となる宣言を追加できるようになり、
「スマホ限定の表示」を実現できるようになりました。

div.contentセレクタのメディアクエリに宣言を追加する

では早速メディアクエリの宣言ブロックに宣言を追加して「スマホ対応の表示」を実現しましょう。
今回はdiv.content内にある画像とテキストブロックの横並びを縦積みに変更し、さらに見やすくするため左右にのみ余白を作りましょう。
以下の手順でメディアクエリ内に宣言の記述を行いましょう。

1. 先ほど追記したメディアクエリの宣言ブロック内に、以下の②の文字列を打ち込み、行末で[Tab]キーを押す。
2. fxww+p0-30[Tab]
3. style.cssを上書き保存Ctrl + Sする。
4. コード記述・展開前および展開後を確認する。
5. ブラウザで開発者ツールを起動F12してデバイス表示に切り替えCtrl + Shift + Mて確認する。

fxww

flex–wrap: wrap;

p0-30

padding: 0 30px;

div.contentはFlexboxで、折り返し(flex-wrap)については特に指定していないため初期値の折り返しなし(nowrap)でした。
そのため画面を縮めても画像とテキストブロックが2列に並んで表示されていますが、スマホだと折り返した方が見やすくなります。
そこでメディアクエリ内で折り返しあり(wrap)に変更し、さらに内側余白(padding)を作るため、0 30pxを宣言して左右のみ余白を作りました。

div.imgセレクタにメディアクエリと宣言を追加する

次にdiv.content内にある画像のブロックのdiv.imgもスマホ対応表示に切り替えましょう。
以下の手順でメディアクエリを作り、宣言の記述を行いましょう。

1. div.imgセレクタ内の「max-width: 150px;」の下の行を改行する。
2. 先ほどのメディアクエリ追加と同様の手順でメディアクエリを追加する。
3. ②の宣言ブロック内に、以下の④の文字列を打ち込み、行末で[Tab]キーを押す。
4. maw100p[Tab]
5. style.cssを上書き保存Ctrl + Sする。
6. コード記述・展開前および展開後を確認する。

maw100p

max-width: 100%;

div.imgタグの子要素のimgタグの本来の横幅は、画像の本来の横幅である300pxですが、
親要素であるdiv.imgタグの横幅上限(max-width)に150pxが宣言されているため縮めて表示されていました。
ただスマホサイズ表示時にはdiv.imgとdiv.textは横並びから縦積みに変更されるため、この横幅上限は不要です。

そこで、メディアクエリを使って親要素div.imgタグの横幅上限を150px → 100%に変更して横幅上限を広げ、
子要素のimgタグを本来の横幅で表示するようにしています。
※親要素の横幅が299px以下になった場合は除く

以上が代表的なスマホ対応の手順です。
次はプラグインを使って簡単にスライドショーを追加したいと思います。