css

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

投稿日:

Pocket

うも、チャーさんです。

 

あなたはcssでレスポンシブにするには、

何を書けばいいのか?と思っていませんか?

 

この記事では、cssでレスポンシブにするための、

方法や、記述、手順を紹介しています。

 

 

つまり、あなたがこの記事を読めば、

あなた自身でレスポンシブ対応が、

できるようになります。

 

なのでレスポンシブに興味がある、

またはしてみたい、できるようになりたい。

 

そう思っていたら、このまま読んでみてください。

 

スポンサードサーチ

cssでレスポンシブをするためにはこの2つをしよう

 

レスポンシブにするには、

 

1、

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

をhtmlファイルのheadタグ内に書く。

 

2、

そしてcssファイル内に、

@media (max-width:px){

ここにcssを記述する

}

 

大きく分けてこの2つをやりましょう。

 

こうすれば、スマホやタブレットなど、

画面の大きさに合わせたデザインにする、

レスポンシブ対応にすることができます。

 

 

ちなみに、先に注意でして、

<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;

 }

}

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-css


スポンサードサーチ

関連記事

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。