WEBサイト制作の準備 - WEBサイト制作の勉強

WEBサイトを制作するにあたり、GoogleフォームやGoogleカレンダーなどのWEBサービスを上手に使う事でHTML・CSSやjQueryでは出来ない事が可能になり、クライアントの要望にも答えられるようになります。
また、FacebookやTwirterなどのSNSをWEBサイトに埋め込む事でクライアントが自ら情報を発信出来るようになるので、サイトに埋め込む際の注意点や設定をしっかりと覚えましょう。

今回の内容

１、サーバーの準備
２、画面全体の背景画像を配置する際の注意点
３、Googleフォームの挿入と自動返信機能の追加
４、Googleカレンダーの設置
５、FacebookとTwirterの埋め込み
６、Googleの検索アルゴリズムを理解する
７、Webフォントの使い方
８、ユーザビリティを考えたjQueryの設置

１、サーバーの準備

FacebookのPage-pluginはサーバー上にデータをアップしないと確認出来ない為、データをローカルでは無くサーバー上にアップロードする必要があります。XAMPP等の仮想サーバーでも問題無いですが、練習の意味も含め実際に無料サーバーを借りてデータをアップしてみましょう。

無料レンタルサーバーwww.ninja.co.jp

www.xdomain.ne.jp

２、背景画像を画面全体に表示させる

ここ数年、画面全体に画像を配置した印象的なサイトが増えています。画面全体に画像を配置する場合、ユーザーのPCモニターの解像度に依存しないようにCSSで正しい設定をする必要があります。また、高解像度の画像を使用する際の注意点もしっかりと理解しましょう。

yachin29.hatenablog.com

body {
  background-image: url(bg.png);

  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
  /* 画像を繰り返し表示しない */
  background-repeat: no-repeat;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #464646; 
}

３、Googleフォームの挿入と自動返信機能の追加

４、Googleカレンダーの設置

今の段階では、こういったサービスを使う以外に方法は無いので、設置方法などをしっかりと理解しましょう。

yachin29.hatenablog.com

８、ユーザビリティを考えたjQueryの設置

むやみにjQueryを入れるのはページの表示を遅くするだけでなく、ユーザーにとって使いづらいサイトになってしまいます。ユーザーの視点に立ち、必要な物だけを入れるようにしましょう。

$(function() {
    var topBtn = $('#toTop');    
    topBtn.hide();
    //スクロールが100pxに達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

今回の目標

http://yachin29.html.xdomain.jp/bg-img/