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

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

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

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

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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