もくじ

【はじめてのAdobe Dreamweaver⑤】レスポンシブを設定する方法

ハウツー
ウエのicon
ウエ

こんにちは、ウエさんです。
今回はDreamweaverでレスポンシブの設定をする方法です。
レスポンシブ?それはなんぞや?と思う人もいるかもしれませんが、端的にいえばサイトをPCとスマホ両方に対応させる方法のことです。
昔はPC用とスマホやタブレット用とファイルを分けて制作していたこともあったのですが、今はCSSなどを使ってどちらでも見れるように対応させるやり方が主流です。

もし何も設定しなかったら?

レスポンシブも何も設定しなかった場合、PC用のスタイルがそのままスマホで表示されます。PC画面サイズのものがスマホサイズに縮小されてしまい、文字が小さく表示されたり、レイアウトが崩れてしまうので、webサイトを作るのであれば必ず調整が必要になります。
Dreamweaverでは簡単にレスポンシブが導入できるので、活用してみましょう!

レスポンシブにしたいファイルを用意

今回レスポンシブ設定用にリストメニューを作成したので、これをレスポンシブに適用させてみようと思います。
ファイルの中身は以下の通り。分かりやすいように簡素に作っています。
index.htm
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Dreamweaver</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body>
<header>
    <h1>Dreamweaverを使ってみよう</h1>
</header>
<section>
  <h2>レスポンシブサイトにしてみよう</h2>
  <div>
    <ul class="flex">
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
      <li>リスト4</li>
      <li>リスト5</li>
      <li>リスト5</li>
    </ul>
  </div>
</section>

</body>
</html>
スタイルの条件】
リストは横並び
ある一定の画面幅まではリストは5個横並びを固定させる
スマホでは折り返して表示させたい
main.css
@charset "UTF-8";
.flex {
  display: flex; /*横並び*/
  align-items: flex-start;/*上部揃え*/
  justify-content:space-between;/*均等割り*/
}
.flex li {
  flex-basis: calc(100% / 5);/*要素の幅を5等分する*/
}
今回は横並びにするためdisplay: flex;を使っています。flexでは画面幅が狭くなったら折り返すという指定もできますが、ある程度の画面幅まではリストは5個横並びを維持させたいと考え、今はあえていれていません。
上記ファイルの内容で画面幅を変えて見てみると、このようにリストが横並びのまま崩れてしまいます。
ではこれをレスポンシブに対応させてみましょう!

①HTMLファイルのheadにビューポートをいれる

ビューポートとはなんぞや?と思われるかもしれませんが、レスポンシブサイトにするために必須のタグです。
書き方はいろいろあるのですが、Dreamweaverでは下記のようなコードが挿入ポネルに登録されています。
<meta name="viewport" content="width=device-width, initial-scale=1">
これをheadの中に挿入します。
画面右の挿入パネルから『ビューポート』を探します。
そしてHTMLファイルの<head>タグ内に挿入します。
挿入パネルを使ったビューポートの挿入方法
挿入したい箇所にカーソルをもっていき、ビューポートをクリックすると下記のように挿入されます。
これでHTMLファイルの方は終わりです。
挿入パネルからビューポートをhead内に挿入したところ

②CSSにメディアクエリーを入れてスタイルの調整

次はスマホサイズになった時のスタイルを調整します。
メディアクエリーというタグをCSSファイルに追加し、スタイルを調整してきます。

ルーラーで画面幅を指定しCSSファイルに追加する

ブレイクポイントを決めて、ルーラーを動かし指定します。
ブレイクポイントとは、スタイルを切り替える画面幅のことです。
今は様々なサイズのデバイスが増え、ブレイクポイントも制作する人の考え方やサイトのデザインによって違います。
今回は最近よく設定で見かける599px幅で切り替わるようにしようと思います。
まずは挿入したいCSSファイルを開き、調整したいスタイルのところにカーソルを持っていきます。
挿入したいところにカーソルをもってくる
次にブレイクポイントを設定し、ビューポートを挿入します。
ルーラーのプラスアイコンをクリックするとサイズを指定できます。
ルーラーの場所
599pxより小さいサイズの場合の指定を行いたいので、最大値の値max-widthに599pxと入力します。
もし599pxよりも大きい幅として最小値を指定したいのであればmin-widthにサイズを記述します。
現在挿入したいCSSファイルを開いている状態なので、プルダウンリストを「ページで定義」にしてからOKボタンを押します。
メディアクエリーの設定
@mediaがちゃんと挿入されました!これがメディアクエリーです。
メディアクエリーが追加されました
もし思った位置に挿入できなくても移動させてしまえば問題ありません。
@media (max-width: 599px){
}
このビューポートの中に、調整したいスタイルを記述すれば完成です!
💡
他にもCSSデザイナーパネルからもメディアクエリーを追加する方法があります。ルーラーからは設定できる条件が固定されていますが、他の条件で設定する場合はCSSデザイナーを使うと良いです。CSSデザイナーパネルの@Mediaから設定可能です。

スタイルを調整してみる

下記のようにスタイルを調整してみました。
ブレイクポイントでは、折り返すようにして、見やすいように<li>タグの幅を100pxに固定しました。
@charset "UTF-8";
.flex {
  display: flex; /*横並び*/
  align-items: flex-start;/*上部揃え*/
  justify-content:space-between;/*均等割り*/
}
.flex li {
  flex-basis: calc(100% / 5);/*要素の幅を5等分する*/
}

@media (max-width: 599px){
  .flex {
    flex-wrap: wrap;/*画面幅が狭くなったら折り返す*/
  }
	.flex li {
    flex-basis: 100px;/*幅を100pxに固定*/
  }
}
このように設定したブレイクポイントで折り返すように調整ができました!
これで完成です!
ちなみにビューポートは下記のように複数設定ができます。
@media (max-width: 599px){
  .flex {
    flex-wrap: wrap;/*画面幅が狭くなったら折り返す*/
  }
  .flex li {
    flex-basis: 100px;/*幅を100pxに固定*/
  }
}

@media (max-width: 360px){
  .flex li {
    flex-basis: 80px;/*幅を80pxに固定*/
  }
}
もっとPCサイズ、タブレットサイズ、スマホサイズ、さらに小さいデバイス用とサイトのデザインによって細かく調整をかけることもあります。

まとめ

Dreamweaverではこのように、挿入パネルやルーラーを使ってレスポンシブの設定を簡単にすることができます。
ブレイクポイントはある程度自分で幅を決めておいて、サイトごとに微調整しても良いと思います。
webサイト制作では欠かせないレスポンシブの設定ですが、Dreamweaverの機能をうまく活用すれば簡単にできるのでどんどん使っていきましょう!
ウエのicon
ウエ
シンママ子1猫1。30代後半からweb制作の仕事をはじめ、現在肩こり悪化が最大の悩み。