レスポンシブWebデザインをHTML5＋CSS3で制作するための設定を行います。
また、各ディバイスにおいて閲覧するサイトをどれくらいの大きさで表示するかを指定するための、viewportの設定を行います。
① DOCTYPE宣言 →
② meta要素のcharset属性 → ③ viewportの指定 →
（1）■data/Smarty/templates/default/site_frame.tpl の冒頭を下記のように変更します。
<!--{*
* Responsive
* Copyright (C) 2013 LOCKON CO.,LTD. All Rights Reserved.
* http://www.lockon.co.jp/
*}-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="<!--{$smarty.const.CHAR_CODE}-->">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
（2）カラム構成を2カラムに変更します。
①を、id=”container”の上に置きます。
②とを横に並べます。ここが2カラムで表示されます。
③とを、
とします。（HTML5）
④を、
■data/Smarty/templates/default/site_main.tpl
<div class="frame_outer">
<!--{* ▼HeaderHeaderTop COLUMN*}-->
<div id="headertopcolumn">
</div>
<!--{* ▼HEADER *}-->
<!--{* ▼TOP COLUMN*}-->
<div id="topcolumn" class="cf changeArea">
</div>
<!--{* ▼RIGHT COLUMN *}-->
<aside id="rightcolumn" class="cf changeArea">
</aside>
<div id="container" class="cf changeArea">
<!--{* ▼MAIN COLUMN *}-->
<article <!--{if $tpl_column_num == 2 or $tpl_column_num == 3}-->id="two_main"<!--{elseif $tpl_column_num == 1}-->id="one_main"<!--{/if}--> class="main">
</article>
<!--{* ▼LEFT COLUMN *}-->
<aside id="side">
</aside>
</div>
<!--{* ▼BOTTOM COLUMN*}-->
<div id="bottomcolumn" class="cf changeArea">
</div>
<!--{* ▼FOOTER *}-->
<!--{* ▼FooterBottom COLUMN*}-->
<div id="footerbottomcolumn" class="cf changeArea">
</div>
</div>
▼デモサイト
http://www.kaiplus.com/responsive/2125/
▼購入
http://www.kaiplus.com/download/
