Sassの@mixinでレスポンシブ対応(Sass記法)

自力でレスポンシブ対応しようぜ!

レスポンシブ対応とは

一応説明するとWebページのデザインが画面サイズに合わせて変化するようにすることです。

少なくともPCサイズとスマフォサイズは用意したいところ

どうやるのか

CSSでmediaQueryという仕組みを使って画面サイズごとのデザインを指定します。

こんな感じ

こんな感じに書くと400px以上とそれ以下の時で見た目を分けることができます。便利。

SassでクールにMediaQueryを使うには?

Sassのmixinという機能を使うとちょっとクール。

mixinに関してはググってください。そのうちちゃんとやりたいね。

で、どうなるかというとこんな感じ。

こんな感じで各クラスごと、画面サイズごとに簡単に指定することができるわけです。
クールですね。

クラスの中で画面サイズ指定するんじゃなくて画面サイズごとにクラス指定する書き方も考えられますがどっちがメジャーなんですかね?

まあ前者(今回の書き方)のほうが読みやすいと個人的には思うのでとりあえずこのままやってみようと思います。

いやーそれにしてもSass、便利ですね。

ではまた。

にほんブログ村 IT技術ブログへ
おすすめ一覧

おすすめのサーバ

ミニバード :初心者向け。安くて簡単でWordPressブログ5個まで作れます。250円。

ロリポップ :初心者向け。250円~使えてお安い。500円のがかなり強くておすすめ。老舗で安心。

Conoha:中級者向け。安くクラウドを使ってみたい人におすすめ。時間定額なのでクラウド破産の心配なし。

おすすめのドメイン会社

スタードメイン ミニバード とセットで管理が楽。ついでにポイントももらえてお得。

名づけてねっと :キャンペーンやってておとく

その他おすすめ

Udemy :ビデオ講座は本当に捗るのでマジでおすすめです。

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です