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の書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

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

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

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

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

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

no image

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

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

no image

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

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

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

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

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

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

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

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

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

最新記事

チャーさん

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

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

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