ウェブサイト制作

[CSS] レスポンシブ対応のためのブレイクポイントの設定のやり方

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

CSSでウェブサイトをレスポンシブ対応にするためには、ブレイクポイントを作成する必要がある。


そもそもブレイクポイントとは？

ブレイクポイントとは、PCのデザインからスマホのデザインに切り替わる時の画面幅のこと。


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

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

responsive.css


Responsive.CSSで、幅を設定

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

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

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

}


max-widthとは、最大幅を決めるときに使う。

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

逆にmin-widthという書き方もできる。この場合は、最小幅〇〇pxまで{ } の中のデザインが適用されますよという形になる。

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

もし複数設定したい場合は、ファイル毎に分けても良いし、一つのファイルに二つブレイクポイントを入れても良い。

他と追えば下記は複数設置した時の例。

@media screen and (max-width: 834px) {
/* 834pxまでの幅の場合 */

}

@media screen and (max-width: 414px) {
/* 414pxまでの幅の場合 */

}
@media screen and (max-width: 320px) {
/* 480pxまでの幅の場合 */

}

この{ }の中に、レスポンシブの時だけ対応させたいCSSを書いていく事になる。


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>


全体像を把握する

下記にHTMLとCSS、Javascriptを使ったwebサイトの作り方についての記事をまとめた。


[st-card myclass=”” id=3358 label=”” pc_height=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”on”]


また、コンピューターについての全体像も把握しておくと、web制作の理解にも役立つ。


[st-card myclass=”” id=4587 label=”” pc_height=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”on”]