レスポンシブウェブデザインの設定方法を解説します。
レスポンシブウェブデザインのしくみがわかったところで今回はHTML、CSSへどうやって記述していくかを学んでいきましょう。
ビューポートを記述する
レスポンシブウェブデザインにするためにはHTMLにビューポートの設定が必要です。
ビューポートとは、それぞれの（PCやタブレット、スマホ）デバイスの画面幅に合わせて表示する大きさを調整するコードです。
書き方
HTMLのheadタグの中にmetaタグを記述するだけです。
色々書いてありますが今の所はこれを一発書けばOKということで覚えておきましょう。
メディアクエリを記述する
メディアクエリとは、適用させたいCSSに変更するコードです。
例えば、スマホサイズの場合、タブレットの場合、PCの場合などで表示する文字の大きさや表示する情報を変えないといけないとすると、このメディアクエリを使って各々のデバイスに合わせたCSSを適用させる必要があります。
書き方1
CSSに直接書くやり方です。
書き方2
HTMLに記述するやり方です。
linkタグを用いて設定します。
CSSをデバイスごとに用意しhrefの中にそのCSSファイルを指定します。
以上、レスポンシブウェブデザインの書き方でした。