css cssでレスポンシブ

cssのレスポンシブの書き方「初心者向け記事」

投稿日:2019年9月15日 更新日:

Pocket

うも、チャーさんです。

 

あなたはcssのレスポンシブの書き方を、

知りたいと思っていませんか?

 

この記事では、cssのレスポンシブの書き方、

メディアクエリ、コードの具体例など

書いています。

 

 

なので、あなたがこの記事を読めば、

レスポンシブ初心者でも、レスポンシブのcssを、

書けるでしょう。

 

スポンサードサーチ

cssのレスポンシブ書くならこれを書きましょう

 

cssのレスポンシブの書き方は、

動画でも解説してます。

 

あなたが動画で理解するタイプなら、

動画を見てください。

 

 

ということで、話を戻しまして、まず結論からです。

cssのレスポンシブの書き方ですが、

以下のように書きます。

 

@media screen and (max-width:500px){

ここにcssを記述する

}

 

 

でなぜこのように書くかというと、

cssでは上記のように書いてやることで、

 

画面サイズ00pxから{}内のcssを、

適用するというのができるからです。

 

 

例えば上記の例で言えば、

500px以下からは{}内に書いたcssを、

適用することができるという意味です。

 

でなんでこんなことをするのか、

一応補足しておきます。

 

 

まず画面サイズというのは、

パソコンサイズからスマホサイズなどに変わると、

小さくなります。

 

するとパソコンサイズに合わせてcssを書き、

配置やサイズを合わせても、

 

スマホサイズになると、デザインが

大きく崩れてしまうのです。

(画面幅が小さくなるため)

 

 

で、その際に、上記のように

メディアクエリ

@media screen and (max-width:500px){

ここにcss

}

 

を使うと、画面幅に合わせた、

cssの記述ができるので、

またスマホサイズ用のデザインができるわけです。

 

 

なので、パソコンから、スマホになっても

デザインが崩れずに、それぞれの画面幅で、

最適なデザインが表示されるというわけです。

 

というわけで、

あなたがcssでレスポンシブを行いたいなら、

上記のようなメディアクエリ

 

@media screen and (max-width:500px){

}

を使いましょう。

 

 

スポンサードサーチ

cssレスポンシブの具体的な書き方

 

で、書き方ということで、

cssのレスポンシブでの書き方を、

もう少し具体的に書いておきます。

 

例えば一番みじかなとこでいうと、

スマホとpcサイズでフォントサイズを

変えたいという場合、

 

以下のように書きます。

 

 

css

 

p {

font-size:20px;

}

 

@media screen and (max-width:500px){

p {

font-size:16px;

}

}

 

このようにcssのファイルに書いておくと、

画面幅が500px以下になった瞬間に、

pタグで囲ったテキストのサイズが16pxになってくれます。

 

 

また、divなどのサイズも同じで、

 

html 

 

<div class=”box”></div>

 

css

 

box {

width:400px;

height:400px;

}

@media screen and (max-width:500px){

.box {
width:200px;

height:100px;

}

}

 

みたいな感じで書くと、

500px以下で、divで作った領域のサイズが、

小さくなってくれます。

 

 

スポンサードサーチ

max-widthとmin-widthについて

 

で、もう一つレスポンシブ書く際に関わるのが、

@media screen and (max-width:500px){

}

このmax-widthというやつです。

 

 

メディアクエリには、

max-widthとmin-widthとあり、

この2つは微妙に違います。

 

 

上記の例のmax-widthの場合、500px以下になったら、

{}内のcssが適用されますが、

 

min-widthの場合、500px以上になったら、

{}内のcssが適用されます。

 

 

なので、幅が小さくなったら、か、

それ以上になったらという違いがあるので、

しっかり区別して使いましょう。

 

とは言えこれは一度実際にあなた自身で、

メディアクエリ両方書いてみて、

どんな風に動くのかを目で見て見るといいでしょう。

 

そうすれば違いが掴めます。

 

 

またcssファイルに書くときは、

メデイアクエリがごちゃ混ぜになると、

ややこしいので、

 

それぞれの画面幅ごとのcssは、

まとめて書くようにしましょう。

 

 

例えば、まずパソコンサイズのcssを全部書いて、

それからスマホサイズのcssを書いていく、

みたいな感じで、わかりやすいように分けておきましょう。

 

1~400行ぐらいまでがパソコンサイズのcss記述

401行目~はスマホサイズのcss記述

 

みたいな感じ。

 

 

上記のようにすると見やすいです。

 

 

と色々書いてきましたが、

上記の内容で、cssのレスポンシブは、

書き始めることができるでしょう。

 

で書いてみたら、画面幅を大きくしたり、

小さくしたりして、ちゃんとレスポンシブが、

機能してるかチェックしましょう。

 

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

cssのレスポンシブの書き方ですが、

@media screen and (max-width:500px){

ここにcss

}

 

というメディアクエリを使いましょう。

するとあとはブラウザが勝手に処理してくれます。

 

では書き方がわかったと思うので、

早速あなた自身でcssのレスポンシブを、

書いてみましょう。

 

まずはフォントサイズなんか変えてみると、

簡単です。

 

フォントサイズ変えるには、

以下のように書けばできるので、

参考にしてみてください。

 

p {

font-size:20px;

}

 

@media screen and (max-width:500px){

p {

font-size:16px;

}

}

 

ということで、実際に書いてみて、

あなたのcssスキルをアップさせましょう。

 

それでは、cssのレスポンシブの書き方についてでした。

 

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

 

チャーさん

-css, cssでレスポンシブ


スポンサードサーチ

関連記事

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

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

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

no image

cssで画像を丸くする方法「15秒以内にできます」

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

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

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

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

no image

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

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

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

最新記事

チャーさん

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

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

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