Cafi Netつながる情報技術

レスポンシブ Web デザイン62

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

無料テンプレートの利用規約はこちらです。

無料テンプレート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 に記載されています。

class「img_300」を適用した場合

例えば、幅 300px の画像を配置して class「img_300」を適用したとします。

小さな画面サイズ(幅 500px 未満)で閲覧している場合は、画像を横中央に配置してテキストは画像の下に表示されます。

大きな画面サイズ(幅 500px 以上)で閲覧している場合は、画像の右側にテキストが回り込むデザインとなります。

同じように、class「img_400」「img_500」「img_600」を用意したので、画像のサイズによって適用してみてください。

class 名より 200px 大きな画面になると、テキストが右側に回り込む設定です。(例えば、class「img_400」を適用すると、600px 以上の画面でテキストが右側に回り込みます)

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