htmlcss レスポンシブ化してみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

レスポンシブ化してみよう

HTML×CSS|2018年10月16日

2018年10月16日

近年、たくさんのデバイスが誕生しました。
スマートフォンやタブレット、新しいパソコン。
様々な形でウェブサイトを閲覧できるようになったのは、ご存知の通りです。

そのため、すべてのデバイスでしっかり表示される作り方が必要でした。
結果、誕生したのが「レスポンシブ化」という方法です。

レスポンシブサイトは、どの端末でも適切なレイアウトで閲覧できます。
具体的には「画面の横幅」に応じて、レイアウトを変更させる方法です。

スマートフォンはスマートフォンのレイアウトになる。
パソコンではパソコンのレイアウトになる。
タブレットではもちろんタブレットに適したサイズになる。
デバイスによって調整されるのが、レスポンシブです。

では、レスポンシブサイトの作り方について、進めて行きましょう。

■ MISSION 6 – こちらのサイトを再現してみましょう
https://base91.net/mission/cording/6/index.html

■ 解答ファイルのダウンロード
https://workroom.biz/mission/cording/6/mission6.zip

※ zipファイルって何? どうやって開くの?
http://base91.net/zip-how-to-open/

もし、どうしても分からなければ、解答ファイルをダウンロードして中身を確認しましょう。
一人で何も見ることなく、MISSION6を再現できたら次に進んでみてください。

今回活用しているHTMLとCSSは下記の通りです。

新出のHTMLタグ

特にありません。
mission5以前を参考にしてください。

各タグにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/html/

新出のCSSプロパティ

レスポンシブ化にはmedia screenというタグを使います。
medea screenには「レイアウトを変化させるサイズ」を設定できます。

1
2
3
@media screen and (max-width:900px) {
 
}

上記の場合は、900px以下になったら、レイアウトを変化させるという意味です。

■ max-widthの場合
画面の横幅が「指定以下になったら括弧内のCSSを適応する」ということです。

■ min-widthが指定された場合
「指定以上の横幅なら括弧内のCSSを適応する」ということです。

では、具体的にどうやったら、変化させることができるのでしょう。
設定そのものは簡単で{}内に適応させたいCSSを書くだけです。

1
2
3
4
5
6
@media screen and (max-width:900px) {
    .mainCont figure{
        margin-right:0px;
        margin-left:0px;
    }
}

これで画面の横幅が900px以下になった時に、中のCSSが適応されます。
今回であれば、.mainCont figureのmarginが左右とも0になるということです。

初期状態でfigureの左右にmarginが指定してあった場合。
900px以下に画面の横幅が変化したら、0に上書きされます。

この仕組みを使って、各デバイスのサイズにあわせて、変更していきます。
レイアウトの変化が起こるポイントを「ブレークポイント」と言います。

今回最も気をつけるのは、横に3つ記事が並んだ、記事一覧のセクションです。

画面の幅が小さくなった時、横に並んだままだと、小さく圧縮されて視認性が悪くなります。
なので、一定の横幅になったら、縦に並ぶように設定してあります。
詳しくは、デベロッパーツールおよび検証ツールを使って確認してみてください。

各プロパティにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/style/

レスポンシブで変化する箇所の確認例

では、一体どのようにして変化箇所を確認すれば良いのでしょう。

まずWEBサイトを開いて、ブラウザの横幅を伸縮させてみましょう。
そうすると、明らかにレイアウトが変化する箇所があるはずです。

変化が観測できたら、デベロッパーツールで変化する箇所を選択しましょう。
そして、画面の横幅を左右伸縮させて、CSSの変化を観察してみてください。

下記に簡単な動画をご用意しましたので、確認してみてください。

このように、デベロッパーツールを使って変化を観測できます。
最初は「変化があからさまに確認できる箇所」を観察した方が良いですね。

色々なWEBサイトで確認してみましょう。
レスポンシブ化の方法に関して、たくさんの発見があるはずです。

メディアクエリをCSSファイルの「どこ」に書くか

CSSファイルの「どの箇所に」メディアクエリを書くか。
そんな質問を、時々うけることがあります。
答えは本当に様々なのですが、僕個人は最後にまとめて書くことが多いです。

まず、基本的なレイアウト用のCSSを一通り書きます。
そして、最後にまとめてレスポンシブ用のCSSを書きます。

今回のMISSIONの回答ファイルでもそうですね。
一通りCSSを書いた最後に、メディアクエリが記述してあります。

最終的には、自分の書き方に合わせて記述場所を考えていくと良いでしょう。
ぜひ、ご自身の管理しやすい書き方を見つけてみてください。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら