後楽エンブログ

「後」の人生を「楽」にするために「エン」ジニアにキャリア変更した私が初心者エンジニアを応援するブログです。

【HTML&CSS初心者】レスポンシブデザインが簡単に分かる!作れる!~基本はBoxの解除~

f:id:rikei-venture:20190517191534j:plain

PC用サイトを作成したけど、レスポンシブ対応させるには一から作り直さなきゃじゃん!

計画性を持たずに闇雲に上からサイトを作っていくと、いざレスポンシブ対応させようとしたとき、一から考え直さなくてはならなくなる可能性があります。

かと言って、毎回計画性をもってから作るのもしんどいです。

 

理想は、レスポンシブ対応させたいところを後から修正できるようにすることです。

「ここの部分モバイル画面だと少し字が大きい気がするから、サイズ変えよ~」

みたいな時にその部分だけをすぐに修正できるようなものがいいですね。

 

一つレスポンシブ対応を考えた時に、全体の構造から考え直さなきゃダメなようなコードは絶対にダメです。

私は初めサイト形成した時にこの現象によく陥りました(笑)

後から見てわからなくなります。

 

レスポンシブ対応を簡単に理解するためにはボックスレイアウトの概念を理解しておく必要があります。

というか、それがわかれば超簡単です。

何それ?という方は是非まずはこちらの記事を参照していただけたらと思います。

ボックスデザインの概念を理解いたしましたら、レスポンシブデザインの説明もスムーズに入ってくると思いますので、ここから本題に入りたいと思います!

本記事のテーマ

【超簡単】レスポンシブ対応って要はBox横並びの解除

 レスポンシブデザインの基本はBoxデザイン

Boxの横並びはどんな形のものであれ、解除すれば縦に並んだ状態になります。

盲点かもしれませんが、この縦に並んだ形こそがスマホ画面の形式なのです。

f:id:rikei-venture:20190517162051p:plain

つまり、ブラウザの大きさによって横並びを解除すればいいんです。

画面の横幅が大きい時は横並びで、小さくなったら横並び解除すれば自然と縦並びになる。

当たり前じゃん(笑)って方には申し訳ないです。

この考え方を最初に持っていなかった、私には衝撃的に簡単に思えたので(笑)

メディアクエリを適応してみよう

ブラウザ画面を横の幅に応じて、横並びを解除してみます。

レスポンシブのやり方

・「@media(){~}」で横並びの設定しているところを囲む

・ ブレイクポイントを指定

「@media(){~}」はメディアクエリと呼ばれるものです。

ごちゃごちゃ説明するより具体例を見せた方が早いと思うので、次のコードをご覧ください。

 ※今回Result画面はPC、スマホ関係なく767px以下の画面なので縦に並ぶと思います。

See the Pen xNdmqa by Jwataru (@jwataru) on CodePen.

@media(min-width:768px){~}は768px以上は囲った部分のスタイルシートが適用されるという意味です。

※ 参考までに

iPhone6  375px

Nexus7   600px

iPad        768px

f:id:rikei-venture:20190517165528p:plain

ここまでが基本となります。

簡単!!!

横並び解除構造の順番をコントロール

レスポンシブあるあるとして次のようなケースが考えられます。

f:id:rikei-venture:20190517172014p:plain

ケース1はここまででやってきたことなのですが、問題はケース2です。

これはメインコンテンツがどこに来るかの違いによって生じます。

2の位置がメインコンテンツであるが、スマホ表示のときは2番目に表示させたいというときですね。

こちらの解決策をご覧ください。

ケース2の解決策

① Box2,Box3,Box4をBoxAでくくる。

② Box2,Box3をBoxBでくくる。

③ BoxB,Box4を横並びにする。

④BoxBの中身を左にBox3、右にBox2が来るように指定する。

⑤レスポンシブを適応する。

f:id:rikei-venture:20190517175322p:plain

%というのは、親要素に対してどのくらいの割合か?というモノです。

BoxBという親要素に対してBox2が75%、Box3が25%となります。

以上の考え方をまとめたものが次のコードとなります。

 ※今回Result画面はPC、スマホ関係なく767px以下の画面なので縦に並ぶと思います。

See the Pen KLmLMe by Jwataru (@jwataru) on CodePen.

 ブレイクポイントを複数設定する

次は下図のような三段階のレスポンシブを適応させていきたいと思います。

f:id:rikei-venture:20190517185159p:plain

BoxBとBox4の横並びを解除した状態を中間の状態にしていきます。

中間の状態は600px以上767px以下の時に表示させるため、

「@media(min-width:600px)and(max-width:767px)」で追加で指定します。

 

 ※今回Result画面はPC、スマホ関係なく600px以下の画面なので縦に並ぶと思います。

See the Pen rgmEVO by Jwataru (@jwataru) on CodePen.

簡単!

まとめ

これで、ボックスを横に並べるところから始まり、レスポンシブの設定をするところまででレイアウトの基本は完了です。

複雑なレイアウトもこの考え方の組み合わせで大体ができてしまいます。

 

どうでしょうか?

以前と比べて見えてくる世界は少しでも変わったでしょうか?

細かいテクニックはその都度身につけていけばいいんです。

ただ、基本概念というものは最初に抑えておかないと、その後の学習スピードに影響が生じます。

今のうちに抑えておくべきですし、ここまでついてきてくれたアナタにはもう基本が身についています。

 

基本概念ともう一つ非常に大事なことがあります。

それは、テンプレートを準備しておくということ。

 

毎回毎回一から作り上げていくのは非常に効率が悪く、毎回頭を使わなくてはいけないので大変ですし、ミスも出やすいです。

頻出の形をおさえ、どこかに保存していつでも引っ張ってこれるようにしておくことがかなり大事です。

 

初心者プログラマーはほとんどの人がタイピングが遅いです。

それを少しでも補うのが、自作テンプレートの使いまわしです。

 

サイト作成における、パーツ作りというのを次にやっていきたいと思います。