レイアウトの段組みとレスポンシブデザイン

どうもこんにちは。とうとう三日更新してませんでしたオオキタです。
一昨日とその前の日は、親が東京きてたりサバゲー行ったり飲みに行ったりetcでそもそも勉強ができなかったりしてました。まぁ、サバゲーも飲みも楽しかったですし、親に自分の今後の事について話せたりとかしたのでよかったですけどね。
そして昨日に関しては、勉強はしたのですが更新する前に寝てしまったという・・・決してゲームにうつつを抜かしていたわけではｹﾞﾌﾝｹﾞﾌﾝ

さておき。とりあえず、昨日勉強した事について復習も兼ねて書き連ねようと思います。今回は、段組みだとかレスポンシブデザインについて。

段組みでのレイアウト

・・・はい、今回申し訳程度にスタイルシートでデザイン弄ってみました。ほんとに申し訳程度ですがｗ
まぁ、少しずつこういうのも増やしていけたらいいなぁと。

それで、段組みについてですが。これは前の本でも触りだけ学習したのですが、今回はもう少し詳しくやった内容でした。
具体的には、divでマークアップしたbox1~box4というclass名の４つのボックスをCSSでいじっていき、いくつかの２段組みや３段組みのレイアウトを行うというものです。floatでボックスを回り込ませるのは前と同様ですが、box1,2を横に並べてその下にbox3,4を並べる場合には、box1,2を新たなclassでグループにしてclearfixを行ったりする必要があるようです。

このclearfixというのは、「フローティングボックスが後続のボックスのレイアウトに影響を与えないようにするためのテクニック」だそうで、今回で言うと下にあるbox3がbox1,2の右側に回り込まないようにする為のものになります。ここは、単純に新たなクラスにoverflow: hiddenを適用したり、横幅の合計割合が100％を超えると起こるカラム落ちという現象を利用する事でも同様の事ができるようです。

レスポンシブデザインについて

続いてレスポンシブデザインについてです。これは簡潔に言うと、ボックスを使って設定した段組みを状況によって解除するものみたいですね。WEBデザインに絡めて言うと、AndroidやiOSで見ているかPCで見ているかによってデザインを変更したりできるようで、いかにも現在では必須でありそうなデザイン方法です。

基本的には@media(){}（メディアクエリ）で囲み、横幅が何px以下の時に横並びを解除するかというブレイクポイントを設定する事で、レスポンシブデザインが可能になるようです。
勿論応用も必要で、横並び時に中央に持ってくるメインコンテンツを解除時には上から2番目の位置に持ってくるようにしたり、横並びの解除に中間のステップを追加してボックスの並びを3段階にしたりと、様々なレイアウト方法があるようですね。

現在学習している本のChap.2以降も、複雑なレイアウトをこれらの組み合わせで構築していくようで、レスポンシブデザインについて更に多くの事が学べそうで楽しみですね。ガンガン進めていきたい所です。