どうも！LSSです！！
ついこないだまで「レスポンシブ？何それおいしいの？」だったLSSが、メディアクエリについて語ります！ｗ
レスポンシブデザインとは
以前は、「ネットサーフィンはPCでするもの」で、PCの画面で読みやすいサイトを作っておけばそれで良かった、って時代がありました。
「PCは持っていないけどスマホをガンガン使いこなしている」
人も増えてきました。
それにより、
「ＰＣで見る事しか考えられていないサイトよりも、スマホでも見やすいように工夫したサイト」
である事が求められるようになった、という背景があります。
具体的な例として、例えばはてなブログ。
レスポンシブに対応したテーマだと、
「PCで見た時は横長の画面を活かした、右にサイドバーがある配置」
「スマホで見た時は、記事は読みやすく幅をめいっぱい使用、サイドバーは記事の下に回り込んで配置」
みたいに、画面のレイアウトごと変化したりしますね。
画面のサイズごとに、使うCSSを切り替えるメディアクエリ
「メディアクエリ」というのを使用すると、画面のサイズに応じて、
「幅が狭い画面で見ている時はスマホ用のCSS」、
「幅が広い画面で見ている時はPC用のCSS」
を有効にする、という切り替えができます！
切り替えた中では、例えばgridレイアウトなどを使って、画面内のパーツ位置を変更したり、枠のサイズを調節したりします。
メディアクエリ使用例
例えば↓こんなコードを、はてなブログ「HTML編集」画面にコピペしたとします。
<style><!--
@media screen and (min-width:600px){
.waku{
width:150px;
}
}
@media screen and (max-width:599px){
.waku{
width:100px;
}
}
.waku{
display:inline-block;
border: 1px solid black;
}
--></style>
<div class="waku">テストですよ</div>
<div class="waku">テストだってば</div>
<div class="waku">テストです</div>
すると、
↑こんな風に表示されます。
「こんな風に表示されます」と言って、今、この記事を読んでいる貴方が、PCで見ているのか、スマホで見ているのか分からないので、表示例をスクショで示すと、
・PC表示の場合
・スマホ表示の場合
…といった感じで、
PC表示の場合は「width:150pxの枠」、
スマホ表示の場合は「width:100pxの枠」
に切り替えて表示される事で、どちらも３つ並べても横幅が画面に収まるように調節されます^^
コード解説
<style><!--
@media screen and (min-width:600px){
.waku{
width:150px;
}
}
@media screen and (max-width:599px){
.waku{
width:100px;
}
}
.waku{
display:inline-block;
border: 1px solid black;
}
--></style>
<div class="waku">テストですよ</div>
<div class="waku">テストだってば</div>
<div class="waku">テストです</div>
共通の指定
まず、<style>タグ内の最後の
.waku{
display:inline-block;
border: 1px solid black;
}
これは、「どっちの表示の場合であっても共通した設定」を書いています。
wakuというクラスに対しての指定で、
「インラインブロックとして表示」
「枠線を1pxの黒い普通の線で表示」
という指定になります。
min-width:600pxという条件のメディアクエリ
<style><!--
@media screen and (min-width:600px){
.waku{
width:150px;
}
}
@media screen and (max-width:599px){
.waku{
width:100px;
}
}
.waku{
display:inline-block;
border: 1px solid black;
}
--></style>
<div class="waku">テストですよ</div>
<div class="waku">テストだってば</div>
<div class="waku">テストです</div>
次に、
@media screen and (min-width:600px){
.waku{
width:150px;
}
}
という指定。
@media screen and (min-width:600px)という条件、
これは
「min（最小でも）width（幅が）600pxはある場合」
という意味の条件になります。
この条件を満たした場合のみ、その中に書かれた、
.waku{
width:150px;
}
が適用され、「wakuというクラスを持つ要素は幅150pxで表示する」という事になります。
max-width:599pxという条件のメディアクエリ
<style><!--
@media screen and (min-width:600px){
.waku{
width:150px;
}
}
@media screen and (max-width:599px){
.waku{
width:100px;
}
}
.waku{
display:inline-block;
border: 1px solid black;
}
--></style>
<div class="waku">テストですよ</div>
<div class="waku">テストだってば</div>
<div class="waku">テストです</div>
次に、
@media screen and (max-width:599px){
.waku{
width:100px;
}
}
という指定。
今度は@media screen and (max-width:599px)という条件、
これは
「max（最大でも）width（幅が）599pxもない場合」
という意味の条件になります。
この条件を満たした場合のみ、その中に書かれた
.waku{
width:100px;
}
が適用され、「wakuというクラスを持つ要素は幅100pxで表示する」という事になります。
こんな風に「場合分け」してCSSを適用させる事で、PC（幅広い画面）にはPC用の、スマホ（幅が狭い画面）にはスマホ用の、CSS指定を割り当てる事ができます。
その「場合分け」を実現するのが「メディアクエリ」という事ですね。
今回は「メディアクエリ」についてのみ解説しました
「スマホでも見やすい画面を提供する」レスポンシブデザインの実現のためには、「それぞれの状況に適したレイアウト」であったり、「漢数字の三みたいなハンバーガーメニュー」であったり、と様々な工夫が組み合わされています。
今回は、どんな工夫であってもまず必要となる「場合分け」を行う「メディアクエリ」についての記事を書きました^^
「PC画面用にすっげぇかっこいいデザインが完成したぜ！
なのにスマホで見たら恐ろしく見づらいの！！
せっかくのデザインを捨てずに、スマホでも見れるように出来ないかな？？」
って思った時に、思い出していただければ、と思いますｗ
…てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
