レスポンシブ Web デザイン59・60

スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート 59・60 です。

無料テンプレート59

無料テンプレート 59 は、白背景に黒文字です。

無料テンプレート 60 は、黒背景に白文字です。

無料テンプレート 59 と 60 の大きな特徴は、各デバイスの「画面全体に表示される背景画像」と「ワンページスクロール」です。

ブロックごとに、各デバイス（スマートフォン・タブレット・パソコン）の画面全体に表示されるので、画面をリサイズしてご確認ください。

背景画像は style.css に記載した background-size: cover; により、画面全体に表示される設定です。

大きな画面で見ても写真が引き伸ばされてボヤけないように、1920px × 1080px の写真を梱包しました。

写真はファイルサイズを抑えるために、Adobe Photoshop CC で画質60（やや高画質）で書き出しました。（写真はご自由に入れ替えてご利用頂けますし、サイズも決まっておりません）

ワンページスクロールは、パソコンでは「マウスホイールを少し回す」か「テンキーの上下キー」で操作します。

iphone や iPad では「上下にフリック」して操作します。

画面下部に格納されたナビゲーションでも操作できます。

ワンページスクロールに合わせて、ブロック内の見出し（<h1>タグ）と段落（<p>タグ）が順番に表示されます。（繰り返し操作を行っていると、デバイスの処理速度によっては、見出しの前に段落が表示されるケースがあるようです）

ワンページスクロールには、オフになる条件が設定されています。

ワンページスクロールは、各ブロックのいずれかのコンテンツの高さが、画面の高さを超えたときオフになります。

つまり、どこかのブロックのコンテンツが多いと、オフになるデバイスが増えます。

オフにする理由は、コンテンツが画面より高いときにワンページスクロールがオンになっていると、画面からはみ出した部分のコンテンツが読めないからです。

パソコンで閲覧している方は、画面が大きいのでコンテンツが多くてもワンページスクロールはオンのままだと思います。

スマートフォンでは、コンテンツが多いとワンページスクロールはオフになると思います。

※ワンページスクロールがオフになったら通常のスクロールになるだけなので、閲覧上の問題はありません。ワンページスクロールを使用したい場合は、コンテンツを少なめに調整してくださいという意味で説明させて頂きました。

ワンページスクロールがオフになった場合は、素早いスクロールに対応するため、見出し（<h1>タグ）と段落（<p>タグ）のアニメーションもオフになります。また、ナビゲーションの上下ボタンも非表示になります。

ナビゲーションの幅が画面の幅より広くなると、ナビゲーションの表示は「丸ボタン」から「現在のブロック/総ブロック数」という表示に切り替わります。

ナビゲーションを表示しながらウィンドウのサイズを変更すると、動作を確認して頂けます。

動作確認は、Google Chrome／Firefox／Safari／Internet Explorer 11・10・9・8・7・6／Android 2.3／iphone 5s／初代 iPad で行いました。

Internet Explorer 9・7・6 はシミュレーターでの確認となりますが、その他は実機で確認しました。

Android 2.3 では、ワンページスクロールがスムーズではなかったので、予めオフに設定されています。

今後もなるべく多くの環境で動作確認を行っていきたいと思いますが、全ての環境での確認は困難なため、念のため画面左上にワンページスクロールをオフにするボタン（scroll action off）を配置しました。

当サイトの無料テンプレートがお役に立ちましたら幸いです。