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

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

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

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

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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