レスポンシブ Web デザイン51~55
スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート51~55です。
2014/2/4 画像の枠(class img_frame)を一部修正しました。
ブラウザの幅を狭めると、レイアウトの切り替わりを確認できます。(レイアウトを切り替えた場合は、メニューを正しい位置に表示するために、再読み込みが必要な場合があります)
スクロールして閲覧するスマートフォンやタブレットを意識して、ページは切り替えない1ページのウェブサイトを作成しました。(もちろん、ページを増やすこともできます)
縦長のページになるので、メニューは画面の上端に固定して、スクロールに合わせて付いてくるように設定しました。(position fixed が効かない環境では、最初の表示位置に固定されたままになります)
スクリーンサイズが幅 600px 未満の場合は、メニューボタンをクリック(タップ)すると、メニューが左側から表示されます。
メニューボタンを再びクリックするか、メニューのいずれかをクリックすると、メニューは閉じます。
スクリーンサイズが幅 600px 以上の場合は、メニューが中央に展開します。
スポンサーリンク
今回は、シンプルでゆとりのあるデザインを意識しました。
小さなデバイスでも簡単に読めるように、文章を簡潔にするのも良いかと思います。
無料テンプレート51~55 の編集方法の解説もご用意しております。
無料テンプレート51 は、ヘッダーとフッターのカラーが紺色です。
無料テンプレート52 は、ヘッダーとフッターのカラーが黒色です。
紺色も濃い色なので分かりにくいですが、こちらは真っ黒です。
コンテンツ部分のカラーは同じです。
無料テンプレート53 は、ヘッダーとフッターのカラーが緑色です。
無料テンプレート54 は、ヘッダーとフッターのカラーが紫色です。
無料テンプレート55 は、ヘッダーとフッターのカラーが赤色です。
当サイトの無料テンプレートがお役に立ちましたら幸いです。
スポンサーリンク