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

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

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

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

no image

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

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

no image

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

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

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

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

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

no image

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

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

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

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

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

最新記事

チャーさん

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

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

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