レスポンシブウェブデザインとは?設定方法

副業

【在宅ワーク・副業したい初心者向け】レスポンシブウェブデザインの設定方法

2019年2月11日

レスポンシブウェブデザインの設定方法を解説します。

レスポンシブウェブデザインのしくみがわかったところで今回はHTML、CSSへどうやって記述していくかを学んでいきましょう。

ビューポートを記述する

レスポンシブウェブデザインにするためにはHTMLにビューポートの設定が必要です。

ビューポートとは、それぞれの(PCやタブレット、スマホ)デバイスの画面幅に合わせて表示する大きさを調整するコードです。

書き方

ビューポート

HTMLのheadタグの中にmetaタグを記述するだけです。

色々書いてありますが今の所はこれを一発書けばOKということで覚えておきましょう。

メディアクエリを記述する

メディアクエリとは、適用させたいCSSに変更するコードです。

例えば、スマホサイズの場合、タブレットの場合、PCの場合などで表示する文字の大きさや表示する情報を変えないといけないとすると、このメディアクエリを使って各々のデバイスに合わせたCSSを適用させる必要があります。

書き方1

CSSに直接書くやり方です。

CSSに直接書く480px以上

CSSに直接書く480pxまで

CSSに直接書く480px-1024pxまで

書き方2

HTMLに記述するやり方です。

HTMLに記述

linkタグを用いて設定します。

CSSをデバイスごとに用意しhrefの中にそのCSSファイルを指定します。

以上、レスポンシブウェブデザインの書き方でした。

-副業

© 2020 楽するわーく