初学者のレスポンシブデザイン

はじめに

就活で使用しているポートフォリオにレスポンシブなデザインを取り入れたので書きます。
（私は現在就活中の大学生です）

レスポンシブとは

PC、タブレット、スマホなど異なる画面サイズの幅に合わせて柔軟にデザインを調整し、見やすい最適な表示にすることです。
私の大学のホームページにもつい最近導入されました。（うちの大学は遅れてるのかな？

レスポンシブの導入

レスポンシブなデザインを始める前に、まずHTMLのヘッダーに以下を追記します。

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

これによりWebページを閲覧している端末の画面サイズに合わせて表示域を調整してくれます。
これをしないとレスポンシブなデザインを作っても、うまく動作しません。（経験済み）

ブレイクポイントを決める

ブレイクポイントとは、CSSを切り替える画面サイズのことです。
以下が端末の一般的なサイズ表です。

端末	サイズ
PC	1024px以上
タブレット	768px以上
スマホ	480px未満

CSSに指定する

上の表を使ってブレークポイントを決めると
以下のようになります。

@media screen and (min-width: 1024px) {
    1024px以上(PC)のCSS
}
@media screen and (min-width: 768px) {
    768px以上(タブレット)のCSS
}
@media screen and (max-width: 480px) {
    480px未満(スマホ)のCSS
}

まとめ

今回の記事では、簡単にですがレスポンシブなデザインを作る方法を書きました。

レスポンシブなデザインはUIの向上やSEO対策などのメリットがある反面、表示が重くなったり単純に作るのが大変だったりします。
しかし、私がユーザー側に立った時には、やはりレスポンシブなデザインのWebページの方が使いやすいと感じます。大学のホームページでとても感じました。
なので、これから私が作るWebページはレスポンシブを考えたものにしたいと思います。