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

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

投稿日:

Pocket

うも、チャーさんです。

あなたは、レスポンシブで要素を消すには、

どうしたらいいのだろう、と思っていませんか?

 

この記事では、レスポンシブで要素を消す方法を、

コード例付きで書いてます。

 

 

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

ある要素をpcで表示、スマホでは消す(逆も)

ということができるようになります。

 

なので、あなたがレスポンシブで要素を消す

方法を探しているのならば、ぜひこのまま下に

スクロールし読んでみてください。

 

スポンサードサーチ

レスポンシブで要素を消す手順

 

ということで結論からです。

レスポンシブで要素を消すには、

 

・消したい要素にクラスをふり、

・そのクラスにdisplay:none;を記述し、

・そのクラスを消したいサイズのブレイクポイントに記述する

 

これをやりましょう。

 

 

そうするとレスポンシブで要素を消せます。

 

コード例

 

上記ではイメージしづらいと思いますので、

例を出します。

 

例えば、

html

<div class=”hide”>この要素を消す<div>

 

css

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

.hide {

display:none;

}

}

 

上記のような記述をしておけば、

 

画面幅600px以上の時は、

.hideというクラスは、作動しないので、

divの要素は表示されますが、

 

画面幅が600px以下になった時、

.hideというクラスに書いといた、

display:none;が作動します。

 

 

そして、その結果、

html

<div class=”hide”>この要素を消す<div>

 

hideのクラスがふってある上記のdivタグの要素が、

画面幅600px以下で非表示になります。

 

つまりレスポンシブで要素を消すことができたわけです。

 

 

なので、レスポンシブで要素を消すには、

消したい要素にクラスを振っておいて、

 

そのクラスにdisplay:none;を書いて、

消したいブレイクポイントのとこに

記述しておけばいいわけです。

 

使う場面

 

で上記のようにレスポンシブで要素を消すのは、

だいたいにおいてpcではある要素を表示して、

 

スマホサイズでは画面の小ささの関係上、

そのある要素を消すみたいな使い方を

することになることが多いです。

 

 

なので、ブレイクポイントは、

あなたがここからはスマホサイズの表示に

しようと決めている部分で、

 

上記のようにdisplay:none;の

クラスを書いておけばいいでしょう。

 

そうすれば、だいたいにおいて、

間違いなくあなたの想定した通りの

動きをしてくれるでしょう。

 

 

スポンサードサーチ

まとめ

 

ということで、まとめに入ります。

あなたがレスポンシブで要素を消したい場合、

 

・消したい要素にクラスをふり、

・そのクラスにdisplay:none;を記述し、

・そのクラスを消したいサイズのブレイクポイントに記述する

 

という上記の3つをやりましょう。

 

 

そうすれば、レスポンシブで要素を消すことができ、

pcでは表示、スマホでは非表示。

 

逆も然りである要素をスマホでは表示させて、

pcでは非表示にすることが可能です。

 

けっこうデザインの幅が広がるので、

ぜひ知っておくと良いでしょう。

 

 

ということで、早速あなた自身で、

実践してみましょう。

 

実践すればあなたのcssスキルが上がりますし、

web制作に役立ちますよ。

 

 

さてということで、まずは

あなたがレスポンシブで消したい要素を決めましょう。

 

次に、その消したい要素にクラス名を

ふりましょう。

 

次にそのクラス名を、要素を非表示にしたい、

画面幅(ブレイクポイント)に記述しましょう。

 

 

そしてdisplay:none;とそのクラス名の{}

内に記述しておきましょう。

 

次に画面サイズを変えてみましょう。

そしてちゃんと要素が消えていれば成功です。

 

はい、ということでレスポンシブで要素を消す方法に

ついての記事でした。

 

 

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

でわ。

 

チャーさん

 

-css, cssでレスポンシブ

スポンサードサーチ

関連記事

no image

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

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

no image

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

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

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

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

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

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

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

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

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

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

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

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

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

最新記事

チャーさん

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

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

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