2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【レスポンシブ】Sassを使ってレスポンシブに対応する

Posted at

#きっかけ
求人をみてるとよく、レスポンシブ対応ができる人〜とあり
「あ、レスポンシブはやっとかないといけない項目だ!」と思って
ポートフォリオで使うことにしました。

いつもSassを使っているので今回も使っていきます!
(Sassって関数が使えるのを今回知りました〜)

#導入と使い方

###HTMLにviewportを記載する
参考サイト
もう逃げない。HTMLのviewportをちゃんと理解する
時間ができたら細かく噛み砕いてここに追記します。

###メディアクエリをかく
今回はスマホ、タブレット、PCに対応させます。

参考サイト
SCSSの基本的な書き方
この、メディアクエリの部分を参考に書きました。

優先させたい画面サイズがもしスマホサイズなら、
スマホ対応メディアクエリから書いていき、最後にPCサイズのメディアクエリ
のように順番が変わるようです。

レスポンシブ対応した見た目を確認するときはChromeのデベロッパーツールで確認できます。

#おわり
今回の記事はほぼ参考サイトを書くだけになってしまいました...
CSSは書くより見た目を考える方のが時間かかっちゃう気がします><

関係ないですが、スマホ対応について色々調べてたら
PWAなるものがあるらしく、やってみたいな〜って思いました。
PWAに興味を持っている人向けに概要とか動向とかをまとめた

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?