（※これから紹介するのはほんの一例であり、私の個人的見解を含みます。これが絶対ということはないですし、もっと良いやり方があったり、コンテンツの内容によって違ってきたりするということは理解しておいてください。）

生徒「レスポンシブって難しい・・・。」
先生「どうしました？」
生徒「先生、レスポンシブがうまくできないんです。」
先生「レスポンシブとはどういうことを言うか、わかりますか？」
生徒「PCでもスマホでもサイトが見られるということですよね？」
先生「そうですね。もう少し詳しく言えば、一つのHTMLソースをデバイスや画面サイズに応じて適切に表示できるようにすることですね。なのでただ画面サイズに対して縮めただけというようなレイアウトではレスポンシブと呼べるかは微妙なところですね。」
生徒「そうなんですね。」

先生「簡単なコードを例にレスポンシブのやり方について見ていきましょう。まず、用意したHTMLはこちらです。」



「そしてそれに対してこのようにスタイルを設定します。」



「その見栄えがこちら」
DEMO①

「まずはPC用に固定値でレイアウトを決めました。次にこれを画面サイズに応じて最適なものにしていくのですが、このとき幅や余白などの数値はbodyに対して相対的に設定したいので、％にします。
ということで％にしたものがこちらです。今回は幅のみ％指定です。」



DEMO②

「これで画面を縮めても表示されてるでしょう。どこまでも伸びていくと気持ち悪いので、max-widthを指定しています。」
生徒「でも、先生。縮めていくとリストやコンテンツが狭くなりすぎる気がするのですが。」
先生「そうですね。同じレイアウトのまま画面サイズが小さくなれば見づらくなります。そこでブレークポイントを指定しましょう。」
生徒「ブレークポイント？」
先生「ブレークポイントとは画面サイズが変化したときにスタイルが変わる画面幅のことです。メディアクエリー（@media screen snd …）でブレークポイントを指定した、その画面サイズまでの間でのみ違うスタイルを適用させることができます。（※デバイスサイズや向きによっても分けられます。詳しくはこちら
デバイスに合わせてCSSを振り分ける「Media Queries」）
メディアクエリーで画面サイズ600xp以下の時のスタイルを指定したものがこちらです。(@media以外は②と一緒です)」



DEMO③

「これだと画面サイズが小さくなってもある程度見やすさを維持できていると思います。」

生徒「そうですね、コンテンツの幅もあるし、ナビのボタンもタップしやすいです。」
先生「実際にはこれにコンテンツの内容が入ってくるので、これだけでレスポンシブ完成というわけにはいきませんが、基本的な考え方はこんなかんじです。」
生徒「そうなんですね。先生、もう一度レスポンシブに挑戦してみます。」

参考サイト
必読！5分でわかるレスポンシブWebデザインまとめ
レスポンシブWebデザインの作り方（簡単設定方法）

いきなりですが、クイズです！

このようなHTMLがあります。



このHTMLに以下のようにスタイルを設定したときdivのfont-sizeはいくらになるでしょう。

①


②


 
 
わかりましたか？

では正解発表です。下のリンクからどうぞ。「チェック用」となっているほうには同じサイズになるように、px単位でfont-sizeを指定しています。
①答え

②答え

①と②の違いはfont-sizeの単位です。emとremはどう違うのか。

○emとは
emは相対単位と言って、親要素のサイズに対しその何倍かという計算をしてサイズを設定します。なので、先ほどの例であれば、（16*1.5*2*1.5）=72pxになります。他に％が相対単位になります。それに対してpxはそれ独自にサイズを指定するので、絶対単位といいます。

○remとは
remは:root emの略で、htmlのサイズに対してその何倍かでサイズを設定し、親要素の影響を受けません。なので、先ほどの例では、(16px*2rem)=32pxとなります。これがemとremの違いです。

個人的にはremを使うことをおすすめします。なぜなら、例えば前回紹介したdisplay:inline-bloock;のときに親要素にfont-size:0;を設定すると、emでは0にかけ算することになるので、文字サイズを設定できません。親要素を考慮に入れて混乱することを避けるためにもremを使っていくのがいいのではないでしょうか。

参考サイト:フォントサイズの指定はCSS3の「rem」が便利そう

table「あの程度で落ちるとは、横並び四天王の面汚しよ。」
flex「だが奴はわれら四天王の中で最弱。」

そのころ、一方・・・

float「俺は落ちてない。落ちたのはカラムだ。ちくしょう、clearできる要素さえあれば・・・。」
???「おやおや、情けないお姿だ。」
float「だれだ！？・・・お前はoverflow！」
overflow「float解除ができず、お困りのようですね。私が力をお貸ししましょう。」
float「力だと？」
overflow「はい。」

○floatについて
floatは要素を左または右に寄せて、スペースを空け、そこにほかの要素を入れることで横並びを実現するCSSプロパティです。
floatの特徴は要素を左（または右）に寄せたときその要素が浮き上がったようになってしまうということです。そうなるといくつか問題が起こります。
まず一つ目の問題は、隙間がある限り下にある要素が入り込んできてしまうということです。すると横並びにするつもりのないものまで横並びになってしまったり、レイアウトが崩れてしまったりします。
二つ目の問題は、子要素をすべてfloatさせた場合、親要素の高さが0になってしまいます。なので、背景画像などを入れている場合は出なくなってしまいます。
DEMO(float解除できてない)

直しました。
DEMO(float解除)

この問題を解決するためのプロパティがclearです。clearはfloatしている要素の下の要素にかける必要があります。



しかし、floatしている要素の下に要素がないと、clearをかけることができません。そんな時に登場するのがclearfixとoverflowです。
clearfixとは疑似要素でfloat要素の下にclearするための要素を作り出す方法です。以下のコードをCSSに書き、float要素の親要素にクラス属性として付与することで機能させます。

overflowは実際の機能としては、内側の要素の見え方を指定するプロパティです。これをfloat要素の親要素にかけることで、親要素の高さが戻ってきます。値はvisible以外にしましょう。
DEMO

floatについてはこのサイトが詳しくて、わかりやすかったです。
CSSの【float】についてちょっと本気出して説明してみた。（たねっぱさん）

 

inline-block「さて、次は俺の番だな。」

○inline-block
inline-blockはdisplayプロパティの値の一つで、inlineのように横に並びますが、blockのように幅・高さを取れるというものです。一見、ナビゲーションなどのような要素を横並びするには便利なように見えますが、一つ問題があります。 下のようにコード内で改行してしまうと、その分要素の間に隙間が空いてしまうということです。これはinlineの特性を持っているためです。
DEMO

この問題はinline-blockをかける要素を改行しないか、親要素にfont-size:0をかけるかすることで解決できます（子要素にfont-sizeを設定しなおすのを忘れないように注意）。
DEMO

さらにtext-alignの値によってカラム落ちしたときの挙動が変わります。こちらは最後のまとめDEMOにのせていますので、確認してください。

 

table「お前などまだまだだ。俺の力を見せてやろう。」

○table
これは親要素にdisplay:table、子要素にdisplay:table-cellを設定します。こうすると、子要素が横並びになります。
文字通りtableと同じようになるので、幅が縮まってもカラム落ちしません。さらに親要素にtable-layout:fixedをかけると子要素が同じ幅で親要素に収まるようになります（子要素にwidthを設定していない場合）。


DEMO

注意する点は、tableなのでmarginが効かないということです。他もいろいろtableと一緒です。

 

flex「真の強者がだれか、そろそろはっきりとさせる時がきたようだな。」

○flex
flexとはdisplayプロパティの値の一つです。以前はdisplay:boxだったりdisplay:flexboxだったりしたそうですが、現在では統一されて、モダンブラウザではほぼ使えるようです。 使い方は親要素にdisplay:flexをかけるだけです。 こう書くと簡単に思えますが、これだけではflexの利点はあまりありません。ここからいろいろと設定していきます。


DEMO

ここで使用しているプロパティは以下の通り。

・flex-wrap:wrap（はみ出した要素を折り返す）
・justify-content:center（子要素を中央揃えで配置）
・flex-grow:1（子要素の大きさの比。同じものは同じ大きさに。数字の大きいものが大きくなる。）
・flex-shrink:1（子要素の縮み具合の比。0にすると縮まない。）
・flex-basis:100px（基本となる大きさを設定する。あとは親要素の幅に従う。要するに幅を設定する。）

非常にざっくりした説明ですが、いろいろ試してみてください。以下のサイトが詳しいです。
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説（colissさん）

 

○横並び比較
4種類の横並びを一つにしてみましたので、画面を縮めたりして試してみてください。

DEMO

コードはこちら（HTMLはすべてul,liで組んでいます。すべてのタグにmargin:0 padding:0 box-sizing:borderboxをかけています。）


それぞれに良さがありますので、状況に応じて使い分けていきましょう。今回は紹介が目的なので簡単な説明だけにしましたが、今後、機会があればそれぞれについて詳しく書いていきたいと思います。

太郎君がコーディングをしています。
太郎「あれ？なんでだろう・・・。」
博士「どうしたんじゃ、太郎君？」
太郎「あ、博士。実は、余白を大きくしようとしてmargin-bottomを大きくしたんだけど、変わらないんですよ。」
博士「ふむ、どれどれ。・・・おや、これは」
太郎「博士、どうしたんですか？」
博士「太郎君、これをchromeのディベロッパーツールで見てみるのじゃ。」→こちら
太郎「はい。あれ、margin-bottomがかかってない。」
博士「そう、上下のmarginは、重なるときはどちらか大きいほうを取り、小さいほうは無視されるのじゃ。」
太郎「そうだったんですね。博士、余白についてもっと詳しく聞かせてください。」
博士「よかろう。ではいろいろ見ていこう。」

———————————————————————————————————-

○マージンとパディングの違い

まずは、marginとpaddingの違いについて確認しておきましょう。
ざっくり言えばマージンが外側、パディングが内側なのですが、では何が変わるのでしょうか。
余白をマージンでとった場合（左）と、パディングで取った場合（右）で見比べてみましょう。
DEMO①

マージンで取った場合は、背景色が文字の後ろにしかなく、ボーダーは文字の周りに着いていますが、パディングの場合は背景色、ボーダーともに広がっています。つまり、パディングなら背景色、背景画像の表示できる範囲が広がるのです。背景画像を入れるときは画像の大きさ分のボックスの大きさを作ってあげないといけないので、ここでパディングが活躍するわけですね。

○marginの特徴
次にmarginの特徴についてです。上下のmarginについては、さっきも見た通りですが、それ以外に子要素のマージンも注意が必要です。
DEMO②

デモをディベロッパーツールで見てもらうとわかるのですが、親要素にmargin-top:30px、子要素にmargin-top:60pxをかけているのですが、上の要素との余白は60pxしか空いていません。これは親要素と子要素の上マージンでは、子要素のマージンは飛び出してしまって、大きいほうが採用されてしまうのです。下マージンも同様のことが起こります。

○box-sizing:border-box
余白に関係するお話として、border-boxのお話をしておきましょう。
border-boxとはbox-sizingというCSSプロパティの値の一つです。これを設定するとwidthにborderとpaddingを含んでくれます。

どういうことか。もう少し詳しく説明しますね。
width:100px; border:1px; padding:30px;の要素が3つ並んでいたとしたら、横幅の合計は(100＋1＋30)*3で393pxになります。しかし、この要素にbox-sizing:border-boxをかけると、3つの横幅の合計は300pxになるのです。
DEMO③

レスポンシブ対応するときにwidthを％で設定するときなどに便利ですので、ぜひ使ってほしいと思います。

———————————————————————————————————-

博士「ということじゃ。わかったかな？」
太郎「はい、博士。」
博士「今日、話したのはほんの一部じゃ。自分でいろいろ調べてみることが大切じゃな。」

以上です。。抜けてることも多々あるかと思いますので、ご意見・ご感想お待ちしております。Facebookページ