表示・非表示で、よりレスポンシブなサイトに
2013.12.16
スタッフブログ
ドーモ、タカミチです。
ある日、タカミチは
レスポンシブデザインでのHP制作中に
この部分、スマホで見たときに邪魔だなー
消せないかなー、
特に画像に文字が含まれていると、なにが書いてあるか
わからなくなったりするんだよねー
と思いました。
そんな時は
cssで
@media screen and (max-width: 460px){
.none {display:none}
}
.none {display:none}
}
てな感じで、cssで制御してあげれば解決です。
上の場合は460px以下のスクリーンサイズになると
クラス名noneがついたものが消える。という指定
になっています。
スイッチ的な感じ？
これで、スマホサイズでいらない要素は
<div class=”none”>
で指定して消してしまいましょう。
ちなみに
@media only screen and (min-width: 460px)
and (max-width: 760px){
}
and (max-width: 760px){
}
のようにすると、
460px～760pxの間での指定になります。
これでタブレットなどのスクリーンでも、うまく要素を制御していくことができます。
意外に簡単に指定できるのでどんどん活用しようと思っています。