• PC用に作成された画面をスマートフォンなどで閲覧した時に、拡大縮小や画面移動を繰り返さなくても画面操作が出来るデザインです。
• スマートフォンにはスマートフォンから閲覧しやすく、操作性も良い画面にする事で、どのような機種からでも快適に閲覧出来るようになります。
• レスポンシブWEBデザインに対応していとGoogleの表示順位にも影響すると言われています。

以下、ChamaNetで採用しているレスポンシブWEBデザインを説明します。

• １つのCSSに画面サイズ毎のCSSを全て記述する事も可能ですが、CSSが長文になり煩雑になる事から、ChamaNetではPCとスマートフォンの２本で記述し、PC用の一部にタブレット用サイズを記述しています。
• 　

まず、HTMLヘッダーで画面サイズに合わせてPC用とスマートフォン用のCSSを切り替え、タブレットだけPCサイズより小さくても表示出来るようにしています。

また、入力ボタンや写真サイズなども、スマートフォンの画面をはみ出さないようCSSで最大幅を指定します。

HTMLヘッダーに下記のように記述すると、通常は「css/style.css」のみ適用され、画面サイズが568px以下では「css/smart.css」も適用するようになります。

<link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> <link media="only screen and (min-width: 0px) and (max-width: 568px)" href="css/smart.css" type="text/css" rel="stylesheet" />

「css/style.css」では、下記のように記述し、スマートフォン用メニューなどを非表示にしています。

#smartheader{ display:none; }

これで<div id="smartheader">・・・</div>はPC画面に表示されなくなります。

「css/smart.css」では、下記のように記述し、PC用メニューなどを非表示にしています。

#header{ display:none; }

これで<div id="header">・・・</div>はスマートフォンには表示されなくなりますので、PCとスマートフォンでメニューを切り替え出来ます。

画像の自動縮小

「css/style.css」に、下記のように記述すると画像サイズの横幅を100%に指定し、縦サイズを自動縮小出来ます。

img{ max-width: 100%; height: auto; }

TABLEが自動縮小されて中の画像が閲覧出来ないサイズまで小さくなる場合、tableのtdにwidth=〇%のように記述し、「css/style.css」に下記のように記述します。

table { table-layout: fixed; }

　

入力ボタンの自動縮小

「css/style.css」に、下記のように記述すると、入力ボタンのサイズを自動縮小出来ます。

（例）入力ボタンのHTML：<INPUT type="text" name="sample" size="100" class="inputwidth" >

.inputwidth { width: 90%; }

PC用としてコンテンツ幅を広めに取るとタブレット画面の横幅を超過する場合があります。 画面サイズを超過しないよう、PC用のCSSに画面サイズがコンテンツの幅より小さい場合は、画面幅を小さくするようCSSを記述します。

一般的なタブレットサイズ768px以下の場合で、class名「abcd」の横幅を切り替える方法は下記のようになります。 /*** PCサイズ ***/ @media(min-width:769px){ .abcd{ width:1160px; } } /*** タブレットサイズ ***/ @media(max-width:768px) and (min-width: 321px){ .abcd{ width:100%; } }