レスポンシブで、表示させたくない部分を隠す
どうも、こんばんは。
気づけばもう１０日程で２０１５年が終わるという事実が恐ろしくてたまりません(´・ω・`)
ほんとに時間経つのが早すぎますね・・・来年の今頃は、就職も決まって卒業研究を煮詰めているのか、それとも・・・・・・・・・
・・・考えるのやめましょうか！！
というわけで（？）、今回はインターンでのコーディング中に学んだことをメモがてら記事にしようと思います。
内容は、レスポンシブデザインでレイアウトをする時に、片方のデバイスにのみ表示させたい部分がある際、もう片方のデバイスでその部分の表示を隠す方法です。（上手く纏められなくて長い・・・
すごい単純な方法ですし、常識レベルのものだとは思うのですが、忘れないように一応念のため、記事にしておきます_(：3 」∠)_
一部分を消して表示させるレスポンシブのデザイン
そもそもレスポンシブデザインは、CSS3のメディアクエリ機能を使ってPCの表示とスマホ・タブレットの表示を別々にレイアウトするデザインで、スマホでのWebサイト閲覧が増えた事で普及したデザイン。
PCのディスプレイもワイドスクリーンが普及したという事もあり、PCでの表示だけを目的とすると、スマホ等では横幅の差で大分見辛くなってしまいます。そんなわけで、レスポンシブデザインの多くは、レイアウトをボックス形式にしてデバイスに合わせて組み換え、２カラムや３カラムのレイアウトにするというものになっています。
しかしそれだけでなく、もっと別のアプローチもあるようです。全く別のデザイン・・・と言うと大げさですし大雑把ですが、レイアウトだけでなく、デザインを大きく変えるやり方もあるわけです。それこそ、また一からデザインをし直すような事もあるんだとか。勿論、相当な手間になるそうですが・・・
その一つとして、CSSで一部分のレイアウトを表示させなくする事で、デザインを変えるという方法があります。
例えば、スマホでは表示させる空間的余裕がない事からその部分だけ表示させない様にしたり、先ほど言った様にデザインを大きく変える時に、一から作る為に元の部分を隠してその部分を新たに作り出したり。
この様にレスポンシブデザインはもちろん、それを抜きにしても、何かと重宝する方法のようです。
非表示にするにはdisplayプロパティ！
さて、それでは実際に一部分のみを隠す方法ですが・・・ここまで長々と話しておいてなんですが、恐ろしく簡単です。
CSSで、{display: none;}と記述する、と至ってシンプル。
displayプロパティは値によって、宣言したセレクタ部分のボックスの種類を変える機能を持っているわけですが、その値の一つである「none」を宣言すると、その部分のボックスを存在しないものとして扱い、非表示にする機能を持っています。
この宣言をスマホ表示にするメディアクエリ内に記述する事で、スマホから閲覧した際に、その宣言をした部分を非表示にする事ができます。
まとめ
この様に、レスポンシブデザインはボックスを組み替えたりして変形させるだけでなく、部分部分を非表示にしたり、それを利用して全く別のデザインにしたりでき、レスポンシブデザインを実装するにしても色々な方法があるようです。
最初はシンプルなものしか分からず簡単だと思っていたのですが、結構奥が深そうで、まだまだ勉強が必要ですね・・・
