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

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

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

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

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

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

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

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

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

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

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

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

no image

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

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

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

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

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

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

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

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

no image

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

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

最新記事

チャーさん

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

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

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