Technology ホームページ作成

[CSS] レスポンシブサイトを作る時の下準備

2021-01-20

CSSでレスポンシブサイトを作る時に用意すべきステップを整理。


レスポンシブ用のCSSファイルを用意

まずは、stylesheet.cssとは別にファイルを用意する。


Responsive.CSSで、幅を設定

レスポンシブを記述するシートで、どの幅の時点で、デザインを変更するのか、設定をする。

設定の際には、以下のコードを記述する。

@media all and (max-width: 〇〇px) {
  
}


例えば上の記述であれば、最大〇〇pxまでは、この{ }の中のデザインが適用されますよ、というような形になる。

もちろん、タブレット用、スマホ用でいくつ設定しても良い。

@media all and (max-width: 〇〇px) {
  
}

@media all and (max-width: ▲▲px) {
  
}


HTMLで、CSSの読み込みとviewportの設定

HTMLのヘッダー内には、Responsive.cssを読み込むためのリンクと、viewportの設定が必要。

<head>
 //viewportの設定
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タイトル</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="stylesheet.css">
  //stylesheetの読み込み
  <link rel="stylesheet" href="responsive.css">
</head>

-Technology, ホームページ作成