Cafi Netつながる情報技術

レスポンシブ Web デザイン51~55

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

無料テンプレート51のサンプル

2014/2/4 画像の枠(class img_frame)を一部修正しました。

ブラウザの幅を狭めると、レイアウトの切り替わりを確認できます。(レイアウトを切り替えた場合は、メニューを正しい位置に表示するために、再読み込みが必要な場合があります)

スクロールして閲覧するスマートフォンやタブレットを意識して、ページは切り替えない1ページのウェブサイトを作成しました。(もちろん、ページを増やすこともできます)

縦長のページになるので、メニューは画面の上端に固定して、スクロールに合わせて付いてくるように設定しました。(position fixed が効かない環境では、最初の表示位置に固定されたままになります)

スクリーンサイズが幅 600px 未満の場合は、メニューボタンをクリック(タップ)すると、メニューが左側から表示されます。

メニューボタンを再びクリックするか、メニューのいずれかをクリックすると、メニューは閉じます。

スクリーンサイズが幅 600px 以上の場合は、メニューが中央に展開します。

今回は、シンプルでゆとりのあるデザインを意識しました。

小さなデバイスでも簡単に読めるように、文章を簡潔にするのも良いかと思います。

無料テンプレート51~55 の編集方法の解説もご用意しております。

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

無料テンプレート51

Free Template 51 をダウンロード(zip)

無料テンプレート51 は、ヘッダーとフッターのカラーが紺色です。

無料テンプレート52

Free Template 52 をダウンロード(zip)

無料テンプレート52 は、ヘッダーとフッターのカラーが黒色です。

紺色も濃い色なので分かりにくいですが、こちらは真っ黒です。

コンテンツ部分のカラーは同じです。

無料テンプレート53

Free Template 53 をダウンロード(zip)

無料テンプレート53 は、ヘッダーとフッターのカラーが緑色です。

無料テンプレート54

Free Template 54 をダウンロード(zip)

無料テンプレート54 は、ヘッダーとフッターのカラーが紫色です。

無料テンプレート55

Free Template 55 をダウンロード(zip)

無料テンプレート55 は、ヘッダーとフッターのカラーが赤色です。

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