Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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で見出しに画像を表示させる方法「簡単にできる」

どうも、チャーさんです。 あなたはcssで見出しに画像を表示させたい。 そう思っていませんか?   この記事では、cssで見出しに画像を 表示させる方法を書いてます。   なのであ …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

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

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

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

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

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

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

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

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

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

最新記事

チャーさん

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

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

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