どうも、チャーさんです。
あなたはcssでレスポンシブにするには、
何を書けばいいのか？と思っていませんか？
この記事では、cssでレスポンシブにするための、
方法や、記述、手順を紹介しています。
つまり、あなたがこの記事を読めば、
あなた自身でレスポンシブ対応が、
できるようになります。
なのでレスポンシブに興味がある、
またはしてみたい、できるようになりたい。
そう思っていたら、このまま読んでみてください。
スポンサードサーチ
目次
cssでレスポンシブをするためにはこの２つをしよう
レスポンシブにするには、
１、
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
をhtmlファイルのheadタグ内に書く。
２、
そしてcssファイル内に、
@media (max-width:px){
ここにcssを記述する
}
大きく分けてこの２つをやりましょう。
こうすれば、スマホやタブレットなど、
画面の大きさに合わせたデザインにする、
レスポンシブ対応にすることができます。
ちなみに、先に注意でして、
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
ですが、これを書かないと、
スマホやタブレットでレスポンシブが、
うまく機能しないので忘れず書きましょう。
スポンサードサーチ
cssでレスポンシブの実際例をお見せします。
ということで、ここからは実際にこれらを使い、
レスポンシブの具体例をお見せしようと思います。
まず、以下の画像をみてください。
これはpcサイズの時に表示される、
簡単なページ例です。
で、このページこのままの記述で
画面サイズを小さくすると、
こんな風に崩れます。
そんな時に、上で紹介した、
@media (max-width:px){
ここにcssを記述する
}
を使い、記述を加えた上で小さくすると、
はい、ちゃんとしたレイアウトになりましたね。
この画像の例では、
@media (max-width:600px){
li {
margin-top:20px;
}
h1 {
font-size:110px;
display:inline-block;
}
}
と記述しておりまして、
画面のサイズが600px以下（スマホとかのサイズ)
になった時に、{}内の処理をしてという意味になります。
{}内の処理は、liタグのmargin調整、
h1の文字サイズ変更です。
スマホのように画面が小さくなると、
メニューが崩れたり、文字サイズが大き過ぎるのを、
直すためです。
と実例をみましたが、
こんな風に、
@media (max-width:OOpx){
}
を使うことで、
OOな画面サイズ(ピクセル)の時は、
{}内のcssを適用する。
みたいな指示が出せるわけです。
なので、これを使うことでスマホや、タブレットなど、
それぞれのサイズ用のcssを書けば、
レスポンシブ対応になるわけです。
@mediaでのcss記述内容についての補足
ちなみに、
@media (max-width:OOpx){
}
ですが、全てのcssをまたその時ように、
書かないといけないわけではなく、
変更したい部分の記述だけ書けばokです。
具体的には、
@media (max-width:OOpx)では、
{}内に書いた内容だけ上書き、加筆されるイメージで、
その他の部分は、もともと書いておいた、
cssの記述がそのまま使われます。
なので、画像の例の、
@media (max-width:600px){
li {
margin-top:20px;
}
h1 {
font-size:110px;
display:inline-block;
}
}
では、marginがついて、フォントサイズが変わっただけで、
枠(border)などは、そのまま生きています。
なので、
@media (max-width:OOpx){
}
の中に書いたcssが上書きまたはプラスで、
適用されると覚えておくと良いでしょう。
スポンサードサーチ
cssでレスポンシブ対応にするための具体的な手順
で、ここからは、
この記事で紹介した内容を使い、
どうやってレスポンシブにするのかその手順を書きます。
viewport書きましょう
まずは、
htmlファイル内のheadタグ内に、
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
と書きましょう。
これはコピペでOkです。
例
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
cssを書きましょう
次に、cssを普通にまずは書きましょう。
まずは予定してる画面サイズ(例えばpcサイズ)
などで一度cssを書いて、必要な分を作ればいいです。
理由は人によるかと思いますが、
そのほうが順序としてやりやすいからです。
まぁあくまで順序は人によるので、
あなたが好きな順序があれば好きにしましょう。
画面サイズを指定しましょう。
で、次に、画面サイズを指定しましょう。
例えばスマホなら600pxとか、
タブレット向けなら1000pxとか。
これを指定しないと、
レスポンシブ対応できないので、
画面サイズはまず決めましょう。
@mediaを書きましょう。
で画面サイズが決まったら、
@media (max-width:px){
}
と書き、
{}内に適用させたいcssを書きましょう。
ちなみに補足として@mediaは、if文に似ており、
@media (max-width:OOpx)
の()の部分が条件になっています。
でこの()内の記述は、OOpx以下なら、
という意味なので、例えば600pxとしたら、
600px以下ならという条件になるわけです。
話を戻しまして、
ここのOOのとこに画面サイズを指定しましょう。
例
@media (max-width:600px){
}
意味600px以下なら{}内の処理をする。
で、サイズ書いたら、
実際にそのサイズの時に行いたいcssの処理を、
記述しましょう。
そうするとそのサイズ以下になった時に、
{}内の記述が適用されます。
例
@media (max-width:600px){
body{
background-color:blue;
}
}
↑の場合は、
画面サイズがスマホぐらいになると、
背景色が青色に変わるって意味ですね。
クロームで画面サイズを動かして確認しましょう
で、書いたあとは、
実際にクロームなどのブラウザで、
確認しましょう。
ウィンドウの画面サイズを小さくしたりして、
@mediaで指定したサイズ以下になった時の、
処理がちゃんと実行されてるか確認しましょう。
スポンサードサーチ
まとめ
それではまとめに入ります。
レスポンシブにするには、
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
をhtmlファイルのheadタグ内に書く。
そしてcssファイル内に、
@media (max-width:OOpx){
ここにcssを記述する
}
をやりましょう。
そうすれば、あなたもレスポンシブができるように、
なります。
さて、それではいい機会なので、
まずはお使いのエディターで、
実際にやってみましょう。
pcのクローム上だと、
@media (max-width:OOpx){
}
だけで{}内に書いたcssが反映されるので、
レスポンシブの記述体験をしてみてください。
最初は、背景色を変えるとか、
文字色を変えるとか、
そういうのからやると動きを掴みやすいですよ。
例
↓
@media (max-width:600px){
p {
color:red;
}
}
それでは、読んでもらってありがとうございました。
チャーさん
