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でレスポンシブ

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

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

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

no image

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

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

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

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

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

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

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

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

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

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

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

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

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

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

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

最新記事

チャーさん

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

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

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