表示・非表示で、よりレスポンシブなサイトに

13/12/16

投稿者:takamichi

ドーモ、タカミチです。

ある日、タカミチは
レスポンシブデザインでのHP制作中に

この部分、スマホで見たときに邪魔だなー
消せないかなー、
特に画像に文字が含まれていると、なにが書いてあるか
わからなくなったりするんだよねー

と思いました。

そんな時は
cssで

@media screen and (max-width: 460px){
.none {display:none}
}

てな感じで、cssで制御してあげれば解決です。

上の場合は460px以下のスクリーンサイズになると
クラス名noneがついたものが消える。という指定
になっています。

スイッチ的な感じ?

switch007



これで、スマホサイズでいらない要素は

<div class=”none”>

で指定して消してしまいましょう。

ちなみに

@media only screen and (min-width: 460px)
and (max-width: 760px){
}

のようにすると、
460px~760pxの間での指定になります。

これでタブレットなどのスクリーンでも、うまく要素を制御していくことができます。

意外に簡単に指定できるのでどんどん活用しようと思っています。




pページの先頭へ