Programing beginner by koala

スマホサイズの時に大幅にデザインを変える方法!動画付き「過保護説明」

例えば、下記のサイトのように、画面サイズが変わる時に、思いっきりデザインを変えたい!という時、ありますよね。

https://www.airbnb.jp/host/homes

すでにhtmlで用意されている文字などの「並び」を変えるなら、レスポンシブ化も簡単ですが、文字の配列なども、なんかもう、すべて変わっている場合、どうしたらいいんだろう?

といったことを説明していきますね(^^)

Contents

レスポンシブで大幅な変更!CSSだけで出来る?

上記のサイトを見てみると、PC画面とタブレット・スマホ画面では、デザインだけの問題ではなく、表示されている文字なども異なりますよね?

例えば、PC画面では、背景画像の中に検索フォームなどがあったのに、タブレット・スマホ画面では、それがなくなり、ヘッダー画像に「空き部屋で世界をつなごう」という文字が表示されています。

また、PC画面では、背景画像の中にあった検索フォームが、今度はヘッダーの下に移動しています。

画面サイズによって、かなりの違いがありますが、こんなこと、CSSだけで、出来るの??

結論から申し上げますと、出来ませんっ!!!

じゃあどうするか?

この場合、PC画面の場合と、タブレット・スマホ画面の場合とで、表示させるhtmlを変えています。

つまり、htmlには、PC画面用、タブレット・スマホ画面用の、両方の記述をしておき、CSSにて、display: none;を使い、表示させるものをコントロールしている感じです(^^)

早速やってみよう!!

まずは体感するのが一番かと思います。下記のコードをご自分のテキストエディタにコピペしてください!

面倒でなければ、お付き合いくださいね(^^)

htmlはこちら。

※スタイルシートのファイルパス(ファイル名)は適宜変えてくださいね!

CSSはこちら。

※画像はご自分のものを入れてみてくださいね!面倒であれば、background-colorに変えて、背景色にしてもOKです!!

(画像は異なりますが)下記の状態になっているかと思います。


※クリックすると大きくなります。

早速レスポンシブ化していこう!

さて、これでレスポンシブデザインを加え、冒頭で紹介したサイトの状態に持って行きたいと思います!

まずはヘッダーと背景画像の部分を消します。

表示をしない時の指定は、display: none;ですね!

「レスポンシブの際に表示」の部分を表示させます

PCサイズの際に、display: none;だった部分を、表示させます!

ちなみに、「レスポンシブの際に表示」の部分は、(新しい)ヘッダーの部分から、検索フォームの部分までのすべてになります。

その部分の幅と高さも指定しておきましょう(^^)

ヘッダーにあたる部分に背景画像を入れよう!

背景画像と背景色に変えた方は、色を変えたりすると分かりやすいかもしれませんね!

後は、検索フォームのデザインですね!

難しい部分は上記の部分だけかと思います、後は、検索フォームのデザインだけですので、コードだけ紹介しておきますね!

お疲れさまでした!

まとめ

最近は、スマホ検索が増えましたし、レスポンシブデザインは必須になってきました!

ですので、こういったちょっと凝ったデザインが出来るようになると、表現の幅が広がり、他のサイトとも差別化できますね(^^)

以上です!

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら