「レスポンシブWebデザイン」とは?
「レスポンシブWebデザイン」とは、一つの HTML ファイルで PCのみならずタブレット、スマホ（スマートフォン）にも対応させる Webデザイン手法の事です。具体的には CSS（スタイルシート）を表示幅ごとに違うレイアウトで設定しておくことにより、さまざまな幅の端末に対応させます。
ページを非レスポンシブ（いずれかの端末専用）に変更したい場合
「すぐ使えるCMS」では、Ver. 5.0 から初期設定のデザインテンプレートがレスポンシブWebデザインになりました。これらの初期設定のテンプレートの製品では、ページを「PC専用」や「モバイル専用」など、いずれかの端末専用にしたい場合、デザインテンプレートを変更する必要があります。
このサポートページでは、初期設定のデザインを生かしながらPC専用にする方法やスマホ専用にする方法をご紹介します。CSSフレームワークとして Pure を使っている Ver. 5.0 以降の初期設定のテンプレートが対象です。
全く別にデザインを作る場合
なお、「すぐ使えるCMS」デザインテンプレートは自由に変更できますので、ご自身で全く別に作ったデザインサンプルから「すぐ使えるCMS」のデザインテンプレートにコピーしていただくことも可能です。
この場合は、このページでご紹介する方法は不要です。代わりに下記のページをご覧下さい。
サンプルHTMLファイルをデザインテンプレートに反映する方法
Pure に関する予備知識
このページでは、レスポンシブWebデザインから特定のサイズの端末に用にテンプレートを切り替える方法をご説明します。いくつか Pure の仕組みの理解が必要ですので、Pure を使うのが初めての方は、先に下記ページをご覧下さい。
Pureの使い方（CSSフレームワーク）
PC専用にする方法
Ver.5.0 の初期設定のテンプレートの表示をPC専用にする場合、以下の変更を行って下さい。どのデザインテンプレートでも、変更のポイントは同じです。
- viewport メタタグとレスポンシブWebデザイン用CSSファイルの読み込み削除
- レスポンシブWebデザインに使っていたクラス名の調整
- 幅の指定（オプション）
順に説明します。
viewport メタタグとレスポンシブWebデザイン用CSSファイルの読み込み削除
テンプレート内の以下の2か所を削除して下さい。<head> 内にあります。
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/css/pure-grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" type="text/css" href="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/css/pure-grids-responsive-min.css">
<!--<![endif]-->レスポンシブWebデザインに使っていたクラス名の調整
レスポンシブWebデザイン用に、初期設定のテンプレートには以下の様に多数のクラス設定がされています。
<div class="pure-u pure-u-1 pure-u-md-2-3 pure-u-lg-3-4 sugu-article-left">
このタグを、順番に以下の基準に照らして編集して下さい。
- 「-lg-」が付いたクラスがあれば、そのクラスからは「-lg」部分を削除。その他の「pure-u-」で始まるクラスを削除
- 「-lg-」が付いたクラスが無い場合、「-md-」が付いたクラスがあれば、そのクラスからは「-md」部分を削除。その他の「pure-u- 」で始まるクラスを削除
- 「-lg-」が付いたクラスも「-md-」が付いたクラスも無い場合、「-sm-」が付いたクラスがあれば、そのクラスからは「-sm」部分を削除。その他の「pure-u-」で始まるクラスを削除
※ 「pure-u」クラスは残します。削除するのは、「pure-u」の後にもハイフンで名前が続くクラスです。
例
<div class="pure-u pure-u-1 pure-u-md-2-3 pure-u-lg-3-4 sugu-article-left">この指定には「pure-u-lg-3-4」がありますので、ここから「-lg」を削除し、残った「pure-u-3-4」以外の「pure-u-***」を削除します。下記コードが編集結果です。
<div class="pure-u pure-u-3-4 sugu-article-left">
幅の指定（オプション）
初期設定の表示幅は、1024pxを最大として、ウィンドウ幅に応じて縮小されるようになっています。PC専用サイトで固定幅にする場合は、webdir/parts/css/sugu-site.css を編集して下さい。
webdir/parts/css/sugu-site.css の編集：変更前
初期設定では、以下のように「max-width」で幅が設定されています。これを「width」に変更の上、幅を指定して下さい。
/* ページ全体の枠 */
.sugu-window {
max-width: 1024px;
margin: 0 auto;
}webdir/parts/css/sugu-site.css の編集：変更例
/* ページ全体の枠 */
.sugu-window {
width: 960px;
margin: 0 auto;
}スマホ（スマートフォン）専用に切り換える方法
Ver. 5.0 の初期設定のテンプレートから表示をスマホ専用（スマートフォン専用）にする場合、以下の変更を行って下さい。どのデザインテンプレートでもポイントは同じで、以下の変更を行います。
- レスポンシブWebデザイン用CSSファイルの読み込み削除
- レスポンシブWebデザインに使っていたクラス名の調整
- ページ幅の指定
- 画像幅の指定
順に説明します。
レスポンシブWebデザイン用CSSファイルの読み込み削除
テンプレート内の以下のコードを削除して下さい。<head> 内にあります。
【注意】PC専用にする場合と異なり、viewport メタタグは削除しません。
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/css/pure-grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" type="text/css" href="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/css/pure-grids-responsive-min.css">
<!--<![endif]-->レスポンシブWebデザインに使っていたクラス名の調整
レスポンシブWebデザイン用に、初期設定のテンプレートには以下の様に多数のクラス設定がされています。
<div class="pure-u pure-u-1 pure-u-md-2-3 pure-u-lg-3-4 sugu-article-left">
このタグを、順番に以下の基準に照らして編集して下さい。
- 「pure-u-」の後に直接数字が付いたクラスがあれば、そのクラスは残し、その他の「pure-u-sm-*」、「pure-u-md-*」、「pure-u-lg-*」クラスを削除
- 「pure-u-」の後に直接数字が付いたクラスが無ければ、「pure-u-sm-*」、「pure-u-md-*」、「pure-u-lg-*」クラスを削除し、希望の表示幅で「pure-u-*-*」を指定
※ 「pure-u」クラスは残します。
「pure-u-*-*」での表示幅の指定方法は下記ページをご覧下さい。
Pureの使い方（CSSフレームワーク）
例
<div class="pure-u pure-u-1 pure-u-md-2-3 pure-u-lg-3-4 sugu-article-left">この指定には「pure-u-1」がありますので、これを残して他を削除します。下記コードが編集結果です。
<div class="pure-u pure-u-1 sugu-article-left">
ページ幅の指定
webdir/parts/css/sugu-site.css 内の幅指定を下記のように編集して下さい。
webdir/parts/css/sugu-site.css の編集：変更前
/* ページ全体の枠 */
.sugu-window {
max-width: 1024px;
margin: 0 auto;
}webdir/parts/css/sugu-site.css の編集：変更例
/* ページ全体の枠 */
.sugu-window {
width: 100%;
margin: 0 auto;
}画像幅の指定
ページ内に小さい画像が含まれる場合、上記の設定だけだと希望の幅で表示されずに画像のピクセル実寸で表示される場合があります。この場合は、適宜 「pure-u-*-*」クラスを足して表示幅を調整して下さい。
「pure-u-*-*」での表示幅の指定方法は下記ページをご覧下さい。
Pureの使い方（CSSフレームワーク）