レスポンシブ Web デザイン62
スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート 62 です。
Free Template 62 をダウンロード（zip）
サンプル（動作確認）はこちら
基本的な仕組みは無料テンプレート 59・60 や無料テンプレート 61 と同じなので、そちらの解説も参考にしてください。
ブロックの増やし方や、アニメーションのスピードを変更する方法は、無料テンプレート 59・60 の編集方法を参考にしてください。（解説の中で何行目という記載がありますが、テンプレートによっては数行異なるケースがございます）
無料テンプレート 62 では、ナビゲーション（各ブロックへのリンク）を画面下に格納するデザインから、画面右に並べるデザインに変更しました。（上下ボタンは削除しました）
ナビゲーションは、ワンページスクロールがオフの時は表示されません。また、ナビゲーションの高さが画面の高さを超えた場合は非表示になります。
無料テンプレート 62 には、文房具の写真（フリー写真素材）を使用しました。
写真はそのままご利用頂いても構いませんし、他の写真に変更することもできます。
スポンサーリンク
背景写真の編集について
今回の背景写真には、紺色の外枠が付いています。
同じように外枠を付けたい場合は、images フォルダの frame.png をご利用ください。
frame.png は透過PNG なので、透過PNG が扱える画像編集ソフトをご利用ください。（詳しくは検索してみてください）
写真をご用意頂き、写真の上に frame.png を重ねれば外枠が作成できます。（写真と外枠のサイズは調整してください）
<p>タグ内への画像の配置について
<p>タグ内に画像を配置する場合は、ブロック5 とブロック6 の HTML コードを参考にしてみてください。
ブロック5 に記載があるように、幅 950px 以上の画像はどの画面サイズでも横幅ピッタリに表示されます。（950px 以上の画像を配置しても自動的に縮小されるので、ファイルサイズを抑えるために 950px 程度に加工して掲載されることをお勧めいたします）
ワンページスクロールは、コンテンツで見えない部分が生じないように、「ブロック内のコンテンツの高さが、画面の高さを超えるとオフになる」ように設定されています。
ワンページスクロールをオフにしたくない場合は、縦に大きな画像の配置は避けてください。（大きな画面で見ている方は余裕がありますが、小さな画面で見ている方はワンページスクロールがオフになりやすいです。スマートフォンでいえば、縦で閲覧している場合はオフになりにくいですが、横にするとオフになりやすくなります。）
HTML コードは、<p><img src="images/ファイル名.jpg" alt="サンプル画像"/></p> となっていますが、このように画像には width と height を設定しないでください。
こうすることで、画面サイズに合わせて画像サイズが自動的に調整されます。
画像サイズの変化は、ワンページスクロールをオフにして、ブラウザの幅を狭めるとよく分かります。
950px といった大きな画像ではなく、小さな画像を配置したい場合もあるかと思いますので、いくつか class を用意しました。
サンプルとしてブロック6 に配置した画像の HTML コード
<p class="img_300"><img src="images/ファイル名.jpg" alt="サンプル画像"/></p>
赤字が class 名です。
class の内容は、style.css に記載されています。
例えば、幅 300px の画像を配置して class「img_300」を適用したとします。
小さな画面サイズ（幅 500px 未満）で閲覧している場合は、画像を横中央に配置してテキストは画像の下に表示されます。
大きな画面サイズ（幅 500px 以上）で閲覧している場合は、画像の右側にテキストが回り込むデザインとなります。
同じように、class「img_400」「img_500」「img_600」を用意したので、画像のサイズによって適用してみてください。
class 名より 200px 大きな画面になると、テキストが右側に回り込む設定です。（例えば、class「img_400」を適用すると、600px 以上の画面でテキストが右側に回り込みます）
当サイトの無料テンプレートがお役に立ちましたら幸いです。
スポンサーリンク